@e-burgos/tucu-ui 1.1.1 → 2.0.0

package/CustomIconsSection-DJMbKrH3.mjs

@@ -0,0 +1,162 @@
+import { jsxs as o, jsx as a } from "react/jsx-runtime";
+import { useState as d } from "react";
+import { T as s, C as h, a as p, d as w, E as N, av as g, aw as u, i as y, ax as x, ay as I, az as f, aA as C, aB as b, aC as v, aD as k, aE as S, aF as T, aG as L, aH as B, aI as E, aJ as F, aK as M, aL as P, aM as U, aN as D, aO as $, aP as z, aQ as G, aR as H, aS as R, aT as V, aU as W, aV as j, aW as A, aX as J, aY as K, aZ as O, a_ as Q, a$ as X, b0 as Y, b1 as Z } from "./index-Hq6IUBmn.mjs";
+import { Coins as _, Layout as q, Share2 as aa, Component as ea } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const la = () => {
+  const [m, t] = d(null), l = [
+    {
+      category: "Blockchain & Crypto",
+      description: "Cryptocurrency and blockchain-related icons",
+      icon: /* @__PURE__ */ a(_, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+      color: "from-yellow-500 via-orange-500 to-amber-500",
+      icons: [
+        { name: "Bitcoin", component: /* @__PURE__ */ a(w, { className: "w-6 h-6" }) },
+        { name: "Ethereum", component: /* @__PURE__ */ a(N, { className: "w-6 h-6" }) },
+        { name: "Bnb", component: /* @__PURE__ */ a(g, { className: "w-6 h-6" }) },
+        { name: "Cardano", component: /* @__PURE__ */ a(u, { className: "w-6 h-6" }) },
+        { name: "Tether", component: /* @__PURE__ */ a(y, { className: "w-6 h-6" }) },
+        { name: "Usdc", component: /* @__PURE__ */ a(x, { className: "w-6 h-6" }) },
+        { name: "Doge", component: /* @__PURE__ */ a(I, { className: "w-6 h-6" }) },
+        { name: "Flow", component: /* @__PURE__ */ a(f, { className: "w-6 h-6" }) }
+      ]
+    },
+    {
+      category: "Layout Controls",
+      description: "Icons for layout switching and navigation",
+      icon: /* @__PURE__ */ a(q, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+      color: "from-blue-500 via-indigo-500 to-purple-500",
+      icons: [
+        {
+          name: "ClassicLayoutIcon",
+          component: /* @__PURE__ */ a(C, { className: "w-6 h-6" })
+        },
+        {
+          name: "MinimalLayoutIcon",
+          component: /* @__PURE__ */ a(b, { className: "w-6 h-6" })
+        },
+        {
+          name: "ModernLayoutIcon",
+          component: /* @__PURE__ */ a(v, { className: "w-6 h-6" })
+        },
+        {
+          name: "RetroLayoutIcon",
+          component: /* @__PURE__ */ a(k, { className: "w-6 h-6" })
+        }
+      ]
+    },
+    {
+      category: "Social Brands",
+      description: "Social media platform icons",
+      icon: /* @__PURE__ */ a(aa, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+      color: "from-pink-500 via-rose-500 to-red-500",
+      icons: [
+        { name: "Github", component: /* @__PURE__ */ a(S, { className: "w-6 h-6" }) },
+        { name: "Twitter", component: /* @__PURE__ */ a(T, { className: "w-6 h-6" }) },
+        { name: "Facebook", component: /* @__PURE__ */ a(L, { className: "w-6 h-6" }) },
+        { name: "Instagram", component: /* @__PURE__ */ a(B, { className: "w-6 h-6" }) },
+        { name: "Telegram", component: /* @__PURE__ */ a(E, { className: "w-6 h-6" }) }
+      ]
+    },
+    {
+      category: "UI Elements",
+      description: "Common UI and interface icons",
+      icon: /* @__PURE__ */ a(ea, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+      color: "from-green-500 via-emerald-500 to-teal-500",
+      icons: [
+        { name: "Tucu", component: /* @__PURE__ */ a(F, { className: "w-6 h-6" }) },
+        { name: "HomeIcon", component: /* @__PURE__ */ a(M, { className: "w-6 h-6" }) },
+        { name: "SearchIcon", component: /* @__PURE__ */ a(P, { className: "w-6 h-6" }) },
+        { name: "Sun", component: /* @__PURE__ */ a(U, { className: "w-6 h-6" }) },
+        { name: "Moon", component: /* @__PURE__ */ a(D, { className: "w-6 h-6" }) },
+        { name: "Check", component: /* @__PURE__ */ a($, { className: "w-6 h-6" }) },
+        { name: "Close", component: /* @__PURE__ */ a(z, { className: "w-6 h-6" }) },
+        { name: "Plus", component: /* @__PURE__ */ a(G, { className: "w-6 h-6" }) },
+        { name: "Star", component: /* @__PURE__ */ a(H, { className: "w-6 h-6" }) },
+        { name: "StarFill", component: /* @__PURE__ */ a(R, { className: "w-6 h-6" }) },
+        { name: "Verified", component: /* @__PURE__ */ a(V, { className: "w-6 h-6" }) },
+        { name: "Warning", component: /* @__PURE__ */ a(W, { className: "w-6 h-6" }) },
+        { name: "InfoCircle", component: /* @__PURE__ */ a(j, { className: "w-6 h-6" }) },
+        {
+          name: "DocumentIcon",
+          component: /* @__PURE__ */ a(A, { className: "w-6 h-6" })
+        },
+        { name: "BookIcon", component: /* @__PURE__ */ a(J, { className: "w-6 h-6" }) },
+        { name: "PlayIcon", component: /* @__PURE__ */ a(K, { className: "w-6 h-6" }) },
+        { name: "ProfileIcon", component: /* @__PURE__ */ a(O, { className: "w-6 h-6" }) },
+        { name: "EyeIcon", component: /* @__PURE__ */ a(Q, { className: "w-6 h-6" }) },
+        {
+          name: "EyeSlashIcon",
+          component: /* @__PURE__ */ a(X, { className: "w-6 h-6" })
+        },
+        { name: "LockIcon", component: /* @__PURE__ */ a(Y, { className: "w-6 h-6" }) },
+        { name: "Unlocked", component: /* @__PURE__ */ a(Z, { className: "w-6 h-6" }) }
+      ]
+    }
+  ], r = (e) => {
+    const c = `import { ${e} } from '@e-burgos/tucu-ui';
+
+<${e} className="w-6 h-6" />`;
+    navigator.clipboard.writeText(c), t(e), setTimeout(() => t(null), 2e3);
+  };
+  return /* @__PURE__ */ o("div", { className: "space-y-8", children: [
+    /* @__PURE__ */ o("div", { className: "text-center space-y-4", children: [
+      /* @__PURE__ */ a(s, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Custom Tucu Icons" }),
+      /* @__PURE__ */ a(
+        s,
+        {
+          tag: "p",
+          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "98+ custom-designed icons organized by category"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a("div", { className: "space-y-8", children: l.map((e, c) => /* @__PURE__ */ a(h, { className: "overflow-hidden", children: /* @__PURE__ */ a(p, { title: e.category, className: "mt-2 mb-2", children: /* @__PURE__ */ o("div", { className: "w-full space-y-6 p-4 sm:p-6", children: [
+      /* @__PURE__ */ o("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: `p-2 rounded-lg bg-linear-to-br ${e.color} shadow-lg`,
+            children: e.icon
+          }
+        ),
+        /* @__PURE__ */ o("div", { children: [
+          /* @__PURE__ */ a(s, { tag: "h3", className: "text-xl font-semibold", children: e.category }),
+          /* @__PURE__ */ a(
+            s,
+            {
+              tag: "p",
+              className: "text-gray-600 dark:text-gray-400",
+              children: e.description
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ a("div", { className: "grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-4", children: e.icons.map((n, i) => /* @__PURE__ */ o(
+        "div",
+        {
+          className: "flex flex-col items-center gap-2 p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors cursor-pointer group relative",
+          onClick: () => r(n.name),
+          title: `Click to copy: ${n.name}`,
+          children: [
+            /* @__PURE__ */ a("div", { className: "text-gray-700 dark:text-gray-300 group-hover:text-brand transition-colors", children: n.component }),
+            /* @__PURE__ */ a(
+              s,
+              {
+                tag: "span",
+                className: "text-xs text-center text-gray-500 dark:text-gray-400",
+                children: n.name
+              }
+            ),
+            m === n.name && /* @__PURE__ */ a("div", { className: "absolute -top-8 left-1/2 transform -translate-x-1/2 px-2 py-1 bg-green-500 text-white text-xs rounded whitespace-nowrap z-10", children: "Copied!" })
+          ]
+        },
+        i
+      )) })
+    ] }) }) }, c)) })
+  ] });
+};
+export {
+  la as default
+};

package/DefiAppLogoSection-D7jgArKN.mjs

@@ -0,0 +1,120 @@
+import { jsxs as t, Fragment as o, jsx as e } from "react/jsx-runtime";
+import { T as s, C as a, a as r, a3 as l, B as n, c as p } from "./index-Hq6IUBmn.mjs";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const b = () => /* @__PURE__ */ t(o, { children: [
+  /* @__PURE__ */ t("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ e(s, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "DefiAppLogo" }),
+    /* @__PURE__ */ e(
+      s,
+      {
+        tag: "p",
+        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        children: "An animated brain-inspired logo component designed for DeFi applications, featuring pulsing nodes and signal flows that represent financial data processing."
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(r, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ t(a, { className: "p-4", children: [
+      /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Default Animated Logo" }),
+      /* @__PURE__ */ e("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ e(l, { width: 100, height: 100 }) })
+    ] }),
+    /* @__PURE__ */ t(a, { className: "p-4", children: [
+      /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Different Sizes" }),
+      /* @__PURE__ */ t("div", { className: "flex items-center gap-4 flex-wrap justify-center", children: [
+        /* @__PURE__ */ e(l, { width: 60, height: 60 }),
+        /* @__PURE__ */ e(l, { width: 100, height: 100 }),
+        /* @__PURE__ */ e(l, { width: 150, height: 150 })
+      ] })
+    ] }),
+    /* @__PURE__ */ t(a, { className: "p-4", children: [
+      /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "With Custom Classes" }),
+      /* @__PURE__ */ e("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ e(
+        l,
+        {
+          width: 120,
+          height: 120,
+          className: "opacity-90 hover:opacity-100 transition-opacity"
+        }
+      ) })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(r, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(n, { columns: [
+    {
+      key: "prop",
+      label: "Prop",
+      render: (i) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(i) })
+    },
+    {
+      key: "type",
+      label: "Type",
+      render: (i) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(i) })
+    },
+    {
+      key: "default",
+      label: "Default",
+      render: (i) => {
+        const c = String(i);
+        return c === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: c });
+      }
+    },
+    {
+      key: "description",
+      label: "Description"
+    }
+  ], data: [
+    {
+      prop: "...SVGAttributes",
+      type: "React.SVGAttributes<SVGElement>",
+      default: "-",
+      description: "All standard SVG attributes are supported"
+    }
+  ] }) }) }) }),
+  /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(r, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    p,
+    {
+      language: "tsx",
+      code: `import { DefiAppLogo } from '@e-burgos/tucu-ui';
+
+// Basic usage
+<DefiAppLogo width={100} height={100} />
+
+// Different sizes
+<DefiAppLogo width={60} height={60} />
+<DefiAppLogo width={100} height={100} />
+<DefiAppLogo width={150} height={150} />
+
+// With custom classes
+<DefiAppLogo 
+  width={120} 
+  height={120} 
+  className="opacity-90 hover:opacity-100 transition-opacity" 
+/>
+
+// With SVG attributes
+<DefiAppLogo 
+  width={80} 
+  height={80} 
+  className="custom-class"
+  viewBox="0 0 100 100"
+/>
+
+// Perfect for DeFi applications
+<div className="flex items-center gap-2">
+  <DefiAppLogo width={40} height={40} />
+  <span>My DeFi App</span>
+</div>
+
+// Features:
+// - Animated pulsing nodes
+// - Signal flow animations
+// - Gradient colors (blue, purple, pink)
+// - Perfect for financial/blockchain apps`
+    }
+  ) }) }) })
+] });
+export {
+  b as default
+};

package/DefiAppLogoSection-alsK3oh9.js

@@ -0,0 +1,36 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("./index-CjRk4ezu.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{const a=[{key:"prop",label:"Prop",render:i=>e.jsx("code",{className:"text-xs text-brand",children:String(i)})},{key:"type",label:"Type",render:i=>e.jsx("code",{className:"text-xs",children:String(i)})},{key:"default",label:"Default",render:i=>{const t=String(i);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"}],r=[{prop:"...SVGAttributes",type:"React.SVGAttributes<SVGElement>",default:"-",description:"All standard SVG attributes are supported"}];return e.jsxs(e.Fragment,{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:"DefiAppLogo"}),e.jsx(s.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"An animated brain-inspired logo component designed for DeFi applications, featuring pulsing nodes and signal flows that represent financial data processing."})]}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.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(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Default Animated Logo"}),e.jsx("div",{className:"flex items-center justify-center",children:e.jsx(s.DefiAppLogo,{width:100,height:100})})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Different Sizes"}),e.jsxs("div",{className:"flex items-center gap-4 flex-wrap justify-center",children:[e.jsx(s.DefiAppLogo,{width:60,height:60}),e.jsx(s.DefiAppLogo,{width:100,height:100}),e.jsx(s.DefiAppLogo,{width:150,height:150})]})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"With Custom Classes"}),e.jsx("div",{className:"flex items-center justify-center",children:e.jsx(s.DefiAppLogo,{width:120,height:120,className:"opacity-90 hover:opacity-100 transition-opacity"})})]})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.BasicTable,{columns:a,data:r})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.CodeBlock,{language:"tsx",code:`import { DefiAppLogo } from '@e-burgos/tucu-ui';
+
+// Basic usage
+<DefiAppLogo width={100} height={100} />
+
+// Different sizes
+<DefiAppLogo width={60} height={60} />
+<DefiAppLogo width={100} height={100} />
+<DefiAppLogo width={150} height={150} />
+
+// With custom classes
+<DefiAppLogo 
+  width={120} 
+  height={120} 
+  className="opacity-90 hover:opacity-100 transition-opacity" 
+/>
+
+// With SVG attributes
+<DefiAppLogo 
+  width={80} 
+  height={80} 
+  className="custom-class"
+  viewBox="0 0 100 100"
+/>
+
+// Perfect for DeFi applications
+<div className="flex items-center gap-2">
+  <DefiAppLogo width={40} height={40} />
+  <span>My DeFi App</span>
+</div>
+
+// Features:
+// - Animated pulsing nodes
+// - Signal flow animations
+// - Gradient colors (blue, purple, pink)
+// - Perfect for financial/blockchain apps`})})})})]})};exports.default=l;

package/DesignPrinciplesSection-CbLaXe_T.mjs

@@ -0,0 +1,81 @@
+import { jsxs as i, Fragment as r, jsx as e } from "react/jsx-runtime";
+import { T as a, C as o } from "./index-Hq6IUBmn.mjs";
+import { CheckCircle as s, Minimize2 as l, Layers as n, Eye as c } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const f = () => /* @__PURE__ */ i(r, { children: [
+  /* @__PURE__ */ i("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ e(a, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Design Principles" }),
+    /* @__PURE__ */ e(
+      a,
+      {
+        tag: "p",
+        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        children: "Core principles that guide our design decisions and ensure consistency"
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6", children: [
+    {
+      title: "Consistency",
+      description: "Unified visual language and interaction patterns across all components.",
+      icon: /* @__PURE__ */ e(s, { className: "h-6 w-6 text-white filter drop-shadow-sm" }),
+      color: "from-emerald-500 via-green-500 to-teal-500"
+    },
+    {
+      title: "Simplicity",
+      description: "Clean, intuitive interfaces that reduce cognitive load.",
+      icon: /* @__PURE__ */ e(l, { className: "h-6 w-6 text-white filter drop-shadow-sm" }),
+      color: "from-blue-500 via-cyan-500 to-sky-500"
+    },
+    {
+      title: "Flexibility",
+      description: "Adaptable components that work across different contexts.",
+      icon: /* @__PURE__ */ e(n, { className: "h-6 w-6 text-white filter drop-shadow-sm" }),
+      color: "from-purple-500 via-violet-500 to-indigo-500"
+    },
+    {
+      title: "Accessibility",
+      description: "Inclusive design that works for everyone.",
+      icon: /* @__PURE__ */ e(c, { className: "h-6 w-6 text-white filter drop-shadow-sm" }),
+      color: "from-orange-500 via-amber-500 to-yellow-500"
+    }
+  ].map((t) => /* @__PURE__ */ e(
+    o,
+    {
+      className: "group hover:shadow-large transition-all duration-300 hover:-translate-y-1",
+      children: /* @__PURE__ */ i("div", { className: "w-full space-y-4 p-2 sm:p-2", children: [
+        /* @__PURE__ */ i("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: `p-3 rounded-xl bg-linear-to-br ${t.color} group-hover:scale-110 transition-all duration-300 shadow-lg hover:shadow-xl`,
+              children: t.icon
+            }
+          ),
+          /* @__PURE__ */ e(
+            a,
+            {
+              tag: "h3",
+              className: "font-semibold text-lg group-hover:text-primary transition-colors duration-300",
+              children: t.title
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-gray-600 dark:text-gray-400 leading-relaxed",
+            children: t.description
+          }
+        )
+      ] })
+    },
+    t.title
+  )) })
+] });
+export {
+  f as default
+};

package/DesignPrinciplesSection-DHN9U0MX.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("./index-CjRk4ezu.js"),s=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(i.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Design Principles"}),e.jsx(i.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Core principles that guide our design decisions and ensure consistency"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6",children:[{title:"Consistency",description:"Unified visual language and interaction patterns across all components.",icon:e.jsx(s.CheckCircle,{className:"h-6 w-6 text-white filter drop-shadow-sm"}),color:"from-emerald-500 via-green-500 to-teal-500"},{title:"Simplicity",description:"Clean, intuitive interfaces that reduce cognitive load.",icon:e.jsx(s.Minimize2,{className:"h-6 w-6 text-white filter drop-shadow-sm"}),color:"from-blue-500 via-cyan-500 to-sky-500"},{title:"Flexibility",description:"Adaptable components that work across different contexts.",icon:e.jsx(s.Layers,{className:"h-6 w-6 text-white filter drop-shadow-sm"}),color:"from-purple-500 via-violet-500 to-indigo-500"},{title:"Accessibility",description:"Inclusive design that works for everyone.",icon:e.jsx(s.Eye,{className:"h-6 w-6 text-white filter drop-shadow-sm"}),color:"from-orange-500 via-amber-500 to-yellow-500"}].map(t=>e.jsx(i.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-2 sm:p-2",children:[e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx("div",{className:`p-3 rounded-xl bg-linear-to-br ${t.color} group-hover:scale-110 transition-all duration-300 shadow-lg hover:shadow-xl`,children:t.icon}),e.jsx(i.Typography,{tag:"h3",className:"font-semibold text-lg group-hover:text-primary transition-colors duration-300",children:t.title})]}),e.jsx(i.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 leading-relaxed",children:t.description})]})},t.title))})]});exports.default=r;

package/DrawerSection-C2gb1jbq.js

@@ -0,0 +1,41 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),r=require("./index-CjRk4ezu.js");require("lucide-react");require("react-router-dom");require("react-dom");const p=()=>{const[a,s]=o.useState(!1),[c,i]=o.useState("sidebar"),d=[{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 n=String(t);return n==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:n})}},{key:"description",label:"Description"}],l=[{prop:"isOpen",type:"boolean",default:"required",description:"Whether the drawer is open"},{prop:"setIsOpen",type:"(isOpen: boolean) => void",default:"required",description:"Function to control drawer state"},{prop:"type",type:"'sidebar' | 'sidebar-menu'",default:"required",description:"Type of drawer to display"},{prop:"position",type:"'left' | 'right'",default:"'left'",description:"Position of the drawer"},{prop:"backdrop",type:"boolean",default:"true",description:"Whether to show backdrop"},{prop:"title",type:"string",default:"-",description:"Title for the drawer"},{prop:"menuItems",type:"IMenuItem[]",default:"-",description:"Menu items (required for sidebar-menu type)"}];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:"Drawer"}),e.jsx(r.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A drawer component that slides in from the side, supporting both simple sidebar and sidebar-menu variants."})]}),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:"space-y-4",children:[e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"Sidebar Drawer"}),e.jsx(r.Button,{onClick:()=>{i("sidebar"),s(!0)},children:"Open Sidebar"}),e.jsx(r.Drawer,{isOpen:a,setIsOpen:s,type:"sidebar",title:"Sidebar Title",children:e.jsx(r.Typography,{tag:"p",children:"Sidebar content goes here"})})]}),e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"Right Position"}),e.jsx(r.Button,{onClick:()=>{i("sidebar"),s(!0)},children:"Open Right Drawer"}),e.jsx(r.Drawer,{isOpen:a,setIsOpen:s,type:"sidebar",position:"right",title:"Right Drawer",children:e.jsx(r.Typography,{tag:"p",children:"Content on the right"})})]})]})})})}),e.jsx(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(r.BasicTable,{columns:d,data:l})})})}),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 { Drawer, Button } from '@e-burgos/tucu-ui';
+import { useState } from 'react';
+
+function MyComponent() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>Open Drawer</Button>
+      <Drawer
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+        type="sidebar"
+        title="Drawer Title"
+      >
+        <div>Drawer content</div>
+      </Drawer>
+    </>
+  );
+}
+
+// Right position
+<Drawer
+  isOpen={isOpen}
+  setIsOpen={setIsOpen}
+  type="sidebar"
+  position="right"
+  title="Right Drawer"
+>
+  <div>Content</div>
+</Drawer>
+
+// Without backdrop
+<Drawer
+  isOpen={isOpen}
+  setIsOpen={setIsOpen}
+  type="sidebar"
+  backdrop={false}
+>
+  <div>Content</div>
+</Drawer>`})})})})]})};exports.default=p;

package/DrawerSection-CxC9PQJU.mjs

@@ -0,0 +1,188 @@
+import { jsxs as a, Fragment as h, jsx as e } from "react/jsx-runtime";
+import { useState as d } from "react";
+import { T as t, C as s, a as n, s as c, U as m, B as u, c as b } from "./index-Hq6IUBmn.mjs";
+import "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const C = () => {
+  const [o, i] = d(!1), [f, l] = d(
+    "sidebar"
+  );
+  return /* @__PURE__ */ a(h, { 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: "Drawer" }),
+      /* @__PURE__ */ e(
+        t,
+        {
+          tag: "p",
+          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "A drawer component that slides in from the side, supporting both simple sidebar and sidebar-menu variants."
+        }
+      )
+    ] }),
+    /* @__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(t, { tag: "h5", className: "mb-3", children: "Sidebar Drawer" }),
+        /* @__PURE__ */ e(
+          c,
+          {
+            onClick: () => {
+              l("sidebar"), i(!0);
+            },
+            children: "Open Sidebar"
+          }
+        ),
+        /* @__PURE__ */ e(
+          m,
+          {
+            isOpen: o,
+            setIsOpen: i,
+            type: "sidebar",
+            title: "Sidebar Title",
+            children: /* @__PURE__ */ e(t, { tag: "p", children: "Sidebar content goes here" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a(s, { className: "p-4", children: [
+        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Right Position" }),
+        /* @__PURE__ */ e(
+          c,
+          {
+            onClick: () => {
+              l("sidebar"), i(!0);
+            },
+            children: "Open Right Drawer"
+          }
+        ),
+        /* @__PURE__ */ e(
+          m,
+          {
+            isOpen: o,
+            setIsOpen: i,
+            type: "sidebar",
+            position: "right",
+            title: "Right Drawer",
+            children: /* @__PURE__ */ e(t, { tag: "p", children: "Content on the right" })
+          }
+        )
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(u, { 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 p = String(r);
+          return p === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: p });
+        }
+      },
+      {
+        key: "description",
+        label: "Description"
+      }
+    ], data: [
+      {
+        prop: "isOpen",
+        type: "boolean",
+        default: "required",
+        description: "Whether the drawer is open"
+      },
+      {
+        prop: "setIsOpen",
+        type: "(isOpen: boolean) => void",
+        default: "required",
+        description: "Function to control drawer state"
+      },
+      {
+        prop: "type",
+        type: "'sidebar' | 'sidebar-menu'",
+        default: "required",
+        description: "Type of drawer to display"
+      },
+      {
+        prop: "position",
+        type: "'left' | 'right'",
+        default: "'left'",
+        description: "Position of the drawer"
+      },
+      {
+        prop: "backdrop",
+        type: "boolean",
+        default: "true",
+        description: "Whether to show backdrop"
+      },
+      {
+        prop: "title",
+        type: "string",
+        default: "-",
+        description: "Title for the drawer"
+      },
+      {
+        prop: "menuItems",
+        type: "IMenuItem[]",
+        default: "-",
+        description: "Menu items (required for sidebar-menu type)"
+      }
+    ] }) }) }) }),
+    /* @__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(
+      b,
+      {
+        language: "tsx",
+        code: `import { Drawer, Button } from '@e-burgos/tucu-ui';
+import { useState } from 'react';
+
+function MyComponent() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>Open Drawer</Button>
+      <Drawer
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+        type="sidebar"
+        title="Drawer Title"
+      >
+        <div>Drawer content</div>
+      </Drawer>
+    </>
+  );
+}
+
+// Right position
+<Drawer
+  isOpen={isOpen}
+  setIsOpen={setIsOpen}
+  type="sidebar"
+  position="right"
+  title="Right Drawer"
+>
+  <div>Content</div>
+</Drawer>
+
+// Without backdrop
+<Drawer
+  isOpen={isOpen}
+  setIsOpen={setIsOpen}
+  type="sidebar"
+  backdrop={false}
+>
+  <div>Content</div>
+</Drawer>`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  C as default
+};