@e-burgos/tucu-ui 2.0.7 → 2.0.9

package/documentation/ComposedChartSection-DgidskHN.js

@@ -0,0 +1,21 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-BaGqriuz.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=[{name:"Jan",revenue:4e3,expenses:2400,profit:1600},{name:"Feb",revenue:3e3,expenses:1398,profit:1602},{name:"Mar",revenue:5e3,expenses:3200,profit:1800},{name:"Apr",revenue:4780,expenses:2908,profit:1872},{name:"May",revenue:5890,expenses:4800,profit:1090},{name:"Jun",revenue:6390,expenses:3800,profit:2590}],t=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-base md:text-base font-semibold",children:"ComposedChart"}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Composed chart combining line, bar, and area in a single chart for complex data visualization needs."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Bar + Line Combination",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.ComposedChart,{data:s,series:[{dataKey:"revenue",name:"Revenue",type:"bar"},{dataKey:"profit",name:"Profit",type:"line"}],height:300})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Area + Bar + Line",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.ComposedChart,{data:s,series:[{dataKey:"expenses",name:"Expenses",type:"area"},{dataKey:"revenue",name:"Revenue",type:"bar"},{dataKey:"profit",name:"Profit",type:"line"}],height:300})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Usage",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{code:`import { ComposedChart } from '@e-burgos/tucu-ui';
+
+const data = [
+  { name: 'Jan', revenue: 4000, expenses: 2400, profit: 1600 },
+  { name: 'Feb', revenue: 3000, expenses: 1398, profit: 1602 },
+  { name: 'Mar', revenue: 5000, expenses: 3200, profit: 1800 },
+];
+
+<ComposedChart
+  data={data}
+  series={[
+    { dataKey: 'expenses', name: 'Expenses', type: 'area' },
+    { dataKey: 'revenue', name: 'Revenue', type: 'bar' },
+    { dataKey: 'profit', name: 'Profit', type: 'line' },
+  ]}
+  height={300}
+  barRadius={4}
+  showGrid
+  showTooltip
+  showLegend
+/>`,language:"tsx"})})})}),e.jsx(a.PropPlayground,{componentName:"ComposedChart",defaultValues:{height:300,barRadius:4,showGrid:!0,showTooltip:!0,showLegend:!0,animate:!0},excludeProps:["data","series","colors","className","xAxisKey","emptyMessage"],children:r=>e.jsx(a.ComposedChart,{data:s,series:[{dataKey:"revenue",name:"Revenue",type:"bar"},{dataKey:"profit",name:"Profit",type:"line"}],...r})}),e.jsx(a.AutoPropsTable,{componentName:"ComposedChart"})]});exports.default=t;

package/documentation/{ComposedChartSection-CgHQ-PQM.js → ComposedChartSection-Dx2m0rSy.js}

@@ -1,10 +1,10 @@
 import { jsxs as n, Fragment as m, jsx as e } from "react/jsx-runtime";
-import { T as o, C as a, a as t, o as r, c as p, P as d, A as l } from "../index-B919yoKU.js";
+import { T as o, C as a, a as t, o as s, c as p, P as d, A as l } from "../index-lfg6LZ1p.js";
 import "lucide-react";
 import "react-router-dom";
 import "react";
 import "react-dom";
-const s = [
+const r = [
   { name: "Jan", revenue: 4e3, expenses: 2400, profit: 1600 },
   { name: "Feb", revenue: 3e3, expenses: 1398, profit: 1602 },
   { name: "Mar", revenue: 5e3, expenses: 3200, profit: 1800 },
@@ -13,20 +13,20 @@ const s = [
   { name: "Jun", revenue: 6390, expenses: 3800, profit: 2590 }
 ], v = () => /* @__PURE__ */ n(m, { children: [
   /* @__PURE__ */ n("div", { className: "text-center space-y-4", children: [
-    /* @__PURE__ */ e(o, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "ComposedChart" }),
+    /* @__PURE__ */ e(o, { tag: "h2", className: "text-base md:text-base font-semibold", children: "ComposedChart" }),
     /* @__PURE__ */ e(
       o,
       {
         tag: "p",
-        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        className: "text-sm text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
         children: "Composed chart combining line, bar, and area in a single chart for complex data visualization needs."
       }
     )
   ] }),
   /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Bar + Line Combination", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
-    r,
+    s,
     {
-      data: s,
+      data: r,
       series: [
         { dataKey: "revenue", name: "Revenue", type: "bar" },
         { dataKey: "profit", name: "Profit", type: "line" }
@@ -35,9 +35,9 @@ const s = [
     }
   ) }) }) }),
   /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Area + Bar + Line", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
-    r,
+    s,
     {
-      data: s,
+      data: r,
       series: [
         { dataKey: "expenses", name: "Expenses", type: "area" },
         { dataKey: "revenue", name: "Revenue", type: "bar" },
@@ -94,9 +94,9 @@ const data = [
         "emptyMessage"
       ],
       children: (i) => /* @__PURE__ */ e(
-        r,
+        s,
         {
-          data: s,
+          data: r,
           series: [
             { dataKey: "revenue", name: "Revenue", type: "bar" },
             { dataKey: "profit", name: "Profit", type: "line" }

package/documentation/CurrencySwapIconsSection-DZab3CRP.js

@@ -0,0 +1,7 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../index-BaGqriuz.js"),o=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const c=()=>e.jsxs(e.Fragment,{children:[e.jsx(r.HeroCard,{title:"CurrencySwapIcons",description:"Component for displaying currency swap pairs with overlapping icons and pair label. Supports all major cryptocurrencies.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-pink-500 via-rose-500 to-red-500 rounded-full flex items-center justify-center shadow-lg border border-pink-500/50",children:e.jsx(o.ArrowLeftRight,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsx(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.CardTitle,{title:"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 lg:grid-cols-3 gap-4",children:[e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"BTC to ETH"}),e.jsx(r.CurrencySwapIcons,{from:"BTC",to:"ETH"})]}),e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"ETH to USDT"}),e.jsx(r.CurrencySwapIcons,{from:"ETH",to:"USDT"})]}),e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"USDT to BNB"}),e.jsx(r.CurrencySwapIcons,{from:"USDT",to:"BNB"})]})]})})})}),e.jsx(r.PropPlayground,{componentName:"CurrencySwapIcons",defaultValues:{from:"BTC",to:"ETH"},controlOverrides:[{name:"from",type:"select",options:["BTC","ETH","USDT","BNB","USDC","ADA","DOGE"],description:"Source currency"},{name:"to",type:"select",options:["BTC","ETH","USDT","BNB","USDC","ADA","DOGE"],description:"Target currency"}],includeProps:["from","to"],children:s=>e.jsx("div",{className:"w-full flex justify-center",children:e.jsx(r.CurrencySwapIcons,{from:s.from,to:s.to})})}),e.jsx(r.AutoPropsTable,{componentName:"CurrencySwapIcons"}),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 { CurrencySwapIcons } from '@e-burgos/tucu-ui';
+
+<CurrencySwapIcons from="BTC" to="ETH" />
+<CurrencySwapIcons from="ETH" to="USDT" />
+<CurrencySwapIcons from="USDT" to="BNB" />
+
+// Supported coins: 'BTC' | 'ETH' | 'USDT' | 'BNB' | 'USDC' | 'ADA' | 'DOGE'`})})})})]});exports.default=c;

package/documentation/CurrencySwapIconsSection-u7r7QNnv.js

@@ -0,0 +1,73 @@
+import { jsxs as e, Fragment as l, jsx as r } from "react/jsx-runtime";
+import { H as t, C as o, a as n, T as a, g as s, P as i, A as m, c as d } from "../index-lfg6LZ1p.js";
+import { ArrowLeftRight as p } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const S = () => /* @__PURE__ */ e(l, { children: [
+  /* @__PURE__ */ r(
+    t,
+    {
+      title: "CurrencySwapIcons",
+      description: "Component for displaying currency swap pairs with overlapping icons and pair label. Supports all major cryptocurrencies.",
+      icon: /* @__PURE__ */ r("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-pink-500 via-rose-500 to-red-500 rounded-full flex items-center justify-center shadow-lg border border-pink-500/50", children: /* @__PURE__ */ r(p, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+    }
+  ),
+  /* @__PURE__ */ r(o, { className: "overflow-hidden", children: /* @__PURE__ */ r(n, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ r("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: [
+    /* @__PURE__ */ e(o, { className: "p-4", children: [
+      /* @__PURE__ */ r(a, { tag: "h5", className: "mb-3", children: "BTC to ETH" }),
+      /* @__PURE__ */ r(s, { from: "BTC", to: "ETH" })
+    ] }),
+    /* @__PURE__ */ e(o, { className: "p-4", children: [
+      /* @__PURE__ */ r(a, { tag: "h5", className: "mb-3", children: "ETH to USDT" }),
+      /* @__PURE__ */ r(s, { from: "ETH", to: "USDT" })
+    ] }),
+    /* @__PURE__ */ e(o, { className: "p-4", children: [
+      /* @__PURE__ */ r(a, { tag: "h5", className: "mb-3", children: "USDT to BNB" }),
+      /* @__PURE__ */ r(s, { from: "USDT", to: "BNB" })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ r(
+    i,
+    {
+      componentName: "CurrencySwapIcons",
+      defaultValues: {
+        from: "BTC",
+        to: "ETH"
+      },
+      controlOverrides: [
+        {
+          name: "from",
+          type: "select",
+          options: ["BTC", "ETH", "USDT", "BNB", "USDC", "ADA", "DOGE"],
+          description: "Source currency"
+        },
+        {
+          name: "to",
+          type: "select",
+          options: ["BTC", "ETH", "USDT", "BNB", "USDC", "ADA", "DOGE"],
+          description: "Target currency"
+        }
+      ],
+      includeProps: ["from", "to"],
+      children: (c) => /* @__PURE__ */ r("div", { className: "w-full flex justify-center", children: /* @__PURE__ */ r(s, { from: c.from, to: c.to }) })
+    }
+  ),
+  /* @__PURE__ */ r(m, { componentName: "CurrencySwapIcons" }),
+  /* @__PURE__ */ r(o, { className: "overflow-hidden", children: /* @__PURE__ */ r(n, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ r("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ r(
+    d,
+    {
+      language: "tsx",
+      code: `import { CurrencySwapIcons } from '@e-burgos/tucu-ui';
+
+<CurrencySwapIcons from="BTC" to="ETH" />
+<CurrencySwapIcons from="ETH" to="USDT" />
+<CurrencySwapIcons from="USDT" to="BNB" />
+
+// Supported coins: 'BTC' | 'ETH' | 'USDT' | 'BNB' | 'USDC' | 'ADA' | 'DOGE'`
+    }
+  ) }) }) })
+] });
+export {
+  S as default
+};

package/documentation/CustomColorPaletteSection-BgsWYeFi.js

@@ -0,0 +1,19 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../index-BaGqriuz.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=()=>e.jsxs(e.Fragment,{children:[e.jsx(r.HeroCard,{title:"Custom Color Palette",description:"Override every color layer with hex values to match your brand identity exactly.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-pink-500 via-rose-500 to-red-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(a.Paintbrush,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(r.Typography,{tag:"h2",className:"mb-2",children:"Custom Palette Configuration"}),e.jsxs(r.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:["Provide custom colors via the"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"customPaletteColor"})," ","prop on ThemeProvider"]})]}),e.jsx(r.CardContainer,{children:e.jsx(r.CardTitle,{title:"Usage Example",children:e.jsx(r.CodeBlock,{language:"tsx",code:`<ThemeProvider
+  menuItems={menuItems}
+  customPaletteColor={{
+    primary: '#0052ff',           // Hex color or preset name
+    darkPrimary: '#578bfa',
+    secondary: '#f3f4f6',
+    darkSecondary: '#172131',
+    accent: '#f7d21a',
+    darkAccent: '#936000',
+    muted: '#4a5565',
+    darkMuted: '#828a99',
+    darkBg: '#030712',
+    lightBg: '#ffffff',
+    lightDark: '#f9fafb',
+    darkLightDark: '#0a101d',
+  }}
+>
+  {/* Your app */}
+</ThemeProvider>`})})}),e.jsx(r.Alert,{variant:"info",children:e.jsxs(r.Typography,{tag:"p",className:"text-xs",children:[e.jsx("strong",{children:"Note:"})," All color presets are defined in"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-700 rounded",children:"ui/tucu-ui/src/themes/config/index.ts"}),". Spectrum colors use the"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-700 rounded",children:"-50"})," ","value from Tucu UI Design Tokens, while default colors use semantic mappings."]})})]})]});exports.default=t;

package/documentation/CustomColorPaletteSection-pjhXRzh7.js

@@ -0,0 +1,74 @@
+import { jsxs as r, Fragment as t, jsx as e } from "react/jsx-runtime";
+import { H as o, T as a, C as d, a as s, c as i, aj as l } from "../index-lfg6LZ1p.js";
+import { Paintbrush as c } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const g = () => /* @__PURE__ */ r(t, { children: [
+  /* @__PURE__ */ e(
+    o,
+    {
+      title: "Custom Color Palette",
+      description: "Override every color layer with hex values to match your brand identity exactly.",
+      icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-pink-500 via-rose-500 to-red-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(c, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+    }
+  ),
+  /* @__PURE__ */ r("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ r("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Custom Palette Configuration" }),
+      /* @__PURE__ */ r(
+        a,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: [
+            "Provide custom colors via the",
+            " ",
+            /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: "customPaletteColor" }),
+            " ",
+            "prop on ThemeProvider"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(s, { title: "Usage Example", children: /* @__PURE__ */ e(
+      i,
+      {
+        language: "tsx",
+        code: `<ThemeProvider
+  menuItems={menuItems}
+  customPaletteColor={{
+    primary: '#0052ff',           // Hex color or preset name
+    darkPrimary: '#578bfa',
+    secondary: '#f3f4f6',
+    darkSecondary: '#172131',
+    accent: '#f7d21a',
+    darkAccent: '#936000',
+    muted: '#4a5565',
+    darkMuted: '#828a99',
+    darkBg: '#030712',
+    lightBg: '#ffffff',
+    lightDark: '#f9fafb',
+    darkLightDark: '#0a101d',
+  }}
+>
+  {/* Your app */}
+</ThemeProvider>`
+      }
+    ) }) }),
+    /* @__PURE__ */ e(l, { variant: "info", children: /* @__PURE__ */ r(a, { tag: "p", className: "text-xs", children: [
+      /* @__PURE__ */ e("strong", { children: "Note:" }),
+      " All color presets are defined in",
+      " ",
+      /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-700 rounded", children: "ui/tucu-ui/src/themes/config/index.ts" }),
+      ". Spectrum colors use the",
+      " ",
+      /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-700 rounded", children: "-50" }),
+      " ",
+      "value from Tucu UI Design Tokens, while default colors use semantic mappings."
+    ] }) })
+  ] })
+] });
+export {
+  g as default
+};

package/documentation/CustomIconsSection-8d02BzFW.js

@@ -0,0 +1,172 @@
+import { jsxs as o, Fragment as d, jsx as a } from "react/jsx-runtime";
+import { useState as h } from "react";
+import { H as p, T as s, C as w, a as u, B as N, E as g, aN as b, aO as y, f, aP as I, aQ as x, aR as C, aS as k, aT as v, aU as S, aV as T, aW as L, aX as B, aY as E, aZ as P, a_ as F, a$ as U, b0 as M, b1 as $, b2 as j, b3 as D, b4 as G, b5 as H, b6 as V, b7 as R, b8 as W, b9 as z, ba as O, bb as Q, bc as X, bd as Y, be as Z, bf as _, bg as q, bh as A, bi as J, bj as K } from "../index-lfg6LZ1p.js";
+import { Palette as aa, Coins as ea, Layout as oa, Share2 as na, Component as sa } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const da = () => {
+  const [m, t] = h(null), l = [
+    {
+      category: "Blockchain & Crypto",
+      description: "Cryptocurrency and blockchain platform icons",
+      icon: /* @__PURE__ */ a(ea, { 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(N, { className: "w-6 h-6" }) },
+        { name: "Ethereum", component: /* @__PURE__ */ a(g, { className: "w-6 h-6" }) },
+        { name: "Bnb", component: /* @__PURE__ */ a(b, { className: "w-6 h-6" }) },
+        { name: "Cardano", component: /* @__PURE__ */ a(y, { className: "w-6 h-6" }) },
+        { name: "Tether", component: /* @__PURE__ */ a(f, { className: "w-6 h-6" }) },
+        { name: "Usdc", component: /* @__PURE__ */ a(I, { className: "w-6 h-6" }) },
+        { name: "Doge", component: /* @__PURE__ */ a(x, { className: "w-6 h-6" }) },
+        { name: "Flow", component: /* @__PURE__ */ a(C, { className: "w-6 h-6" }) }
+      ]
+    },
+    {
+      category: "Layout Controls",
+      description: "Icons for layout switching and theme selection",
+      icon: /* @__PURE__ */ a(oa, { 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(k, { className: "w-6 h-6" })
+        },
+        {
+          name: "MinimalLayoutIcon",
+          component: /* @__PURE__ */ a(v, { className: "w-6 h-6" })
+        },
+        {
+          name: "ModernLayoutIcon",
+          component: /* @__PURE__ */ a(S, { className: "w-6 h-6" })
+        },
+        {
+          name: "RetroLayoutIcon",
+          component: /* @__PURE__ */ a(T, { className: "w-6 h-6" })
+        }
+      ]
+    },
+    {
+      category: "Social Brands",
+      description: "Social media platform brand icons",
+      icon: /* @__PURE__ */ a(na, { 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(L, { className: "w-6 h-6" }) },
+        { name: "Twitter", component: /* @__PURE__ */ a(B, { className: "w-6 h-6" }) },
+        { name: "Facebook", component: /* @__PURE__ */ a(E, { className: "w-6 h-6" }) },
+        { name: "Instagram", component: /* @__PURE__ */ a(P, { className: "w-6 h-6" }) },
+        { name: "Telegram", component: /* @__PURE__ */ a(F, { className: "w-6 h-6" }) }
+      ]
+    },
+    {
+      category: "UI Elements",
+      description: "Common interface and utility icons",
+      icon: /* @__PURE__ */ a(sa, { 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(U, { className: "w-6 h-6" }) },
+        { name: "HomeIcon", component: /* @__PURE__ */ a(M, { className: "w-6 h-6" }) },
+        { name: "SearchIcon", component: /* @__PURE__ */ a($, { className: "w-6 h-6" }) },
+        { name: "Sun", component: /* @__PURE__ */ a(j, { className: "w-6 h-6" }) },
+        { name: "Moon", component: /* @__PURE__ */ a(D, { className: "w-6 h-6" }) },
+        { name: "Check", component: /* @__PURE__ */ a(G, { className: "w-6 h-6" }) },
+        { name: "Close", component: /* @__PURE__ */ a(H, { className: "w-6 h-6" }) },
+        { name: "Plus", component: /* @__PURE__ */ a(V, { className: "w-6 h-6" }) },
+        { name: "Star", component: /* @__PURE__ */ a(R, { className: "w-6 h-6" }) },
+        { name: "StarFill", component: /* @__PURE__ */ a(W, { className: "w-6 h-6" }) },
+        { name: "Verified", component: /* @__PURE__ */ a(z, { className: "w-6 h-6" }) },
+        { name: "Warning", component: /* @__PURE__ */ a(O, { className: "w-6 h-6" }) },
+        { name: "InfoCircle", component: /* @__PURE__ */ a(Q, { className: "w-6 h-6" }) },
+        {
+          name: "DocumentIcon",
+          component: /* @__PURE__ */ a(X, { className: "w-6 h-6" })
+        },
+        { name: "BookIcon", component: /* @__PURE__ */ a(Y, { className: "w-6 h-6" }) },
+        { name: "PlayIcon", component: /* @__PURE__ */ a(Z, { className: "w-6 h-6" }) },
+        { name: "ProfileIcon", component: /* @__PURE__ */ a(_, { className: "w-6 h-6" }) },
+        { name: "EyeIcon", component: /* @__PURE__ */ a(q, { className: "w-6 h-6" }) },
+        {
+          name: "EyeSlashIcon",
+          component: /* @__PURE__ */ a(A, { className: "w-6 h-6" })
+        },
+        { name: "LockIcon", component: /* @__PURE__ */ a(J, { className: "w-6 h-6" }) },
+        { name: "Unlocked", component: /* @__PURE__ */ a(K, { 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(d, { children: [
+    /* @__PURE__ */ a(
+      p,
+      {
+        title: "Custom Tucu Icons",
+        description: "96 hand-crafted SVG icons designed for tucu-ui. Includes blockchain/crypto, layout controls, social brands, and UI elements — all importable as named exports.",
+        icon: /* @__PURE__ */ a("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-purple-500 via-pink-500 to-rose-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ a(aa, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ o("section", { className: "space-y-8", children: [
+      /* @__PURE__ */ o("div", { className: "text-center", children: [
+        /* @__PURE__ */ a(s, { tag: "h2", className: "mb-2", children: "Icon Gallery" }),
+        /* @__PURE__ */ a(
+          s,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "Click any icon to copy its import code"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a("div", { className: "space-y-6", children: l.map((e, c) => /* @__PURE__ */ a(w, { className: "overflow-hidden", children: /* @__PURE__ */ a(u, { 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-base 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-100 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 {
+  da as default
+};

package/documentation/CustomIconsSection-DVTQjvmK.js

@@ -0,0 +1,3 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("react"),o=require("../index-BaGqriuz.js"),n=require("lucide-react");require("react-router-dom");require("react-dom");const h=()=>{const[m,t]=d.useState(null),r=[{category:"Blockchain & Crypto",description:"Cryptocurrency and blockchain platform icons",icon:e.jsx(n.Coins,{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:e.jsx(o.Bitcoin,{className:"w-6 h-6"})},{name:"Ethereum",component:e.jsx(o.Ethereum,{className:"w-6 h-6"})},{name:"Bnb",component:e.jsx(o.Bnb,{className:"w-6 h-6"})},{name:"Cardano",component:e.jsx(o.Cardano,{className:"w-6 h-6"})},{name:"Tether",component:e.jsx(o.Tether,{className:"w-6 h-6"})},{name:"Usdc",component:e.jsx(o.Usdc,{className:"w-6 h-6"})},{name:"Doge",component:e.jsx(o.Doge,{className:"w-6 h-6"})},{name:"Flow",component:e.jsx(o.Flow,{className:"w-6 h-6"})}]},{category:"Layout Controls",description:"Icons for layout switching and theme selection",icon:e.jsx(n.Layout,{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:e.jsx(o.ClassicLayoutIcon,{className:"w-6 h-6"})},{name:"MinimalLayoutIcon",component:e.jsx(o.MinimalLayoutIcon,{className:"w-6 h-6"})},{name:"ModernLayoutIcon",component:e.jsx(o.ModernLayoutIcon,{className:"w-6 h-6"})},{name:"RetroLayoutIcon",component:e.jsx(o.RetroLayoutIcon,{className:"w-6 h-6"})}]},{category:"Social Brands",description:"Social media platform brand icons",icon:e.jsx(n.Share2,{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:e.jsx(o.Github,{className:"w-6 h-6"})},{name:"Twitter",component:e.jsx(o.Twitter,{className:"w-6 h-6"})},{name:"Facebook",component:e.jsx(o.Facebook,{className:"w-6 h-6"})},{name:"Instagram",component:e.jsx(o.Instagram,{className:"w-6 h-6"})},{name:"Telegram",component:e.jsx(o.Telegram,{className:"w-6 h-6"})}]},{category:"UI Elements",description:"Common interface and utility icons",icon:e.jsx(n.Component,{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:e.jsx(o.Tucu,{className:"w-6 h-6"})},{name:"HomeIcon",component:e.jsx(o.HomeIcon,{className:"w-6 h-6"})},{name:"SearchIcon",component:e.jsx(o.SearchIcon,{className:"w-6 h-6"})},{name:"Sun",component:e.jsx(o.Sun,{className:"w-6 h-6"})},{name:"Moon",component:e.jsx(o.Moon,{className:"w-6 h-6"})},{name:"Check",component:e.jsx(o.Check,{className:"w-6 h-6"})},{name:"Close",component:e.jsx(o.Close,{className:"w-6 h-6"})},{name:"Plus",component:e.jsx(o.Plus,{className:"w-6 h-6"})},{name:"Star",component:e.jsx(o.Star,{className:"w-6 h-6"})},{name:"StarFill",component:e.jsx(o.StarFill,{className:"w-6 h-6"})},{name:"Verified",component:e.jsx(o.Verified,{className:"w-6 h-6"})},{name:"Warning",component:e.jsx(o.Warning,{className:"w-6 h-6"})},{name:"InfoCircle",component:e.jsx(o.InfoCircle,{className:"w-6 h-6"})},{name:"DocumentIcon",component:e.jsx(o.DocumentIcon,{className:"w-6 h-6"})},{name:"BookIcon",component:e.jsx(o.BookIcon,{className:"w-6 h-6"})},{name:"PlayIcon",component:e.jsx(o.PlayIcon,{className:"w-6 h-6"})},{name:"ProfileIcon",component:e.jsx(o.ProfileIcon,{className:"w-6 h-6"})},{name:"EyeIcon",component:e.jsx(o.EyeIcon,{className:"w-6 h-6"})},{name:"EyeSlashIcon",component:e.jsx(o.EyeSlashIcon,{className:"w-6 h-6"})},{name:"LockIcon",component:e.jsx(o.LockIcon,{className:"w-6 h-6"})},{name:"Unlocked",component:e.jsx(o.Unlocked,{className:"w-6 h-6"})}]}],l=a=>{const c=`import { ${a} } from '@e-burgos/tucu-ui';
+
+<${a} className="w-6 h-6" />`;navigator.clipboard.writeText(c),t(a),setTimeout(()=>t(null),2e3)};return e.jsxs(e.Fragment,{children:[e.jsx(o.HeroCard,{title:"Custom Tucu Icons",description:"96 hand-crafted SVG icons designed for tucu-ui. Includes blockchain/crypto, layout controls, social brands, and UI elements — all importable as named exports.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-purple-500 via-pink-500 to-rose-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(n.Palette,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(o.Typography,{tag:"h2",className:"mb-2",children:"Icon Gallery"}),e.jsx(o.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Click any icon to copy its import code"})]}),e.jsx("div",{className:"space-y-6",children:r.map((a,c)=>e.jsx(o.CardContainer,{className:"overflow-hidden",children:e.jsx(o.CardTitle,{title:a.category,className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-6 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 ${a.color} shadow-lg`,children:a.icon}),e.jsxs("div",{children:[e.jsx(o.Typography,{tag:"h3",className:"text-base font-semibold",children:a.category}),e.jsx(o.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:a.description})]})]}),e.jsx("div",{className:"grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-4",children:a.icons.map((s,i)=>e.jsxs("div",{className:"flex flex-col items-center gap-2 p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors cursor-pointer group relative",onClick:()=>l(s.name),title:`Click to copy: ${s.name}`,children:[e.jsx("div",{className:"text-gray-700 dark:text-gray-300 group-hover:text-brand transition-colors",children:s.component}),e.jsx(o.Typography,{tag:"span",className:"text-xs text-center text-gray-500 dark:text-gray-400",children:s.name}),m===s.name&&e.jsx("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))})]})]})};exports.default=h;

package/documentation/DefiAppLogoSection-BloxEw2r.js

@@ -0,0 +1,132 @@
+import { jsxs as a, Fragment as n, jsx as e } from "react/jsx-runtime";
+import { H as c, C as s, a as o, T as l, ai as t, y as d, c as p, P as m, ah as h, A as f } from "../index-lfg6LZ1p.js";
+import { Diamond as g } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const v = () => /* @__PURE__ */ a(n, { children: [
+  /* @__PURE__ */ e(
+    c,
+    {
+      title: "DefiAppLogo",
+      description: `An animated brain-inspired logo component designed for DeFi
+          applications, featuring pulsing nodes and signal flows that represent
+          financial data processing.`,
+      icon: /* @__PURE__ */ e("div", { className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-rose-600 to-pink-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(g, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
+    }
+  ),
+  /* @__PURE__ */ e(s, { 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__ */ a("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ a(s, { className: "p-4", children: [
+      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Default Animated Logo" }),
+      /* @__PURE__ */ e("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ e(t, { width: 100, height: 100 }) })
+    ] }),
+    /* @__PURE__ */ a(s, { className: "p-4", children: [
+      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Different Sizes" }),
+      /* @__PURE__ */ a("div", { className: "flex items-center gap-4 flex-wrap justify-center", children: [
+        /* @__PURE__ */ e(t, { width: 60, height: 60 }),
+        /* @__PURE__ */ e(t, { width: 100, height: 100 }),
+        /* @__PURE__ */ e(t, { width: 150, height: 150 })
+      ] })
+    ] }),
+    /* @__PURE__ */ a(s, { className: "p-4", children: [
+      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "With Custom Classes" }),
+      /* @__PURE__ */ e("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ e(
+        t,
+        {
+          width: 120,
+          height: 120,
+          className: "opacity-90 hover:opacity-100 transition-opacity"
+        }
+      ) })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(s, { 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(d, { 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 r = String(i);
+        return r === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: r });
+      }
+    },
+    {
+      key: "description",
+      label: "Description"
+    }
+  ], data: [
+    {
+      prop: "...SVGAttributes",
+      type: "React.SVGAttributes<SVGElement>",
+      default: "-",
+      description: "All standard SVG attributes are supported"
+    }
+  ] }) }) }) }),
+  /* @__PURE__ */ e(s, { 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(
+    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`
+    }
+  ) }) }) }),
+  /* @__PURE__ */ e(
+    m,
+    {
+      componentName: "TucuUiLogo",
+      title: "Logo Playground",
+      defaultValues: {
+        size: 48
+      },
+      excludeProps: ["props", "className"],
+      children: (i) => /* @__PURE__ */ e(h, { ...i })
+    }
+  ),
+  /* @__PURE__ */ e(f, { componentName: "TucuUiLogo" })
+] });
+export {
+  v as default
+};

package/documentation/DefiAppLogoSection-DeVkbZnS.js

@@ -0,0 +1,38 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-BaGqriuz.js"),o=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.jsx(s.HeroCard,{title:"DefiAppLogo",description:`An animated brain-inspired logo component designed for DeFi
+          applications, featuring pulsing nodes and signal flows that represent
+          financial data processing.`,icon:e.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-rose-600 to-pink-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(o.Diamond,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),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`})})})}),e.jsx(s.PropPlayground,{componentName:"TucuUiLogo",title:"Logo Playground",defaultValues:{size:48},excludeProps:["props","className"],children:i=>e.jsx(s.TucuUiLogo,{...i})}),e.jsx(s.AutoPropsTable,{componentName:"TucuUiLogo"})]})};exports.default=l;