@e-burgos/tucu-ui 2.5.0 → 2.6.0

package/documentation/LivePriceFeedSection-CIIrnZ4o.js

@@ -0,0 +1,143 @@
+import { jsxs as a, Fragment as t, jsx as e } from "react/jsx-runtime";
+import { H as m, C as i, a as r, T as c, L as n, B as l, E as d, P as h, A as u, c as p } from "../index-DoxeCFUJ.js";
+import { TrendingUp as v } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const C = () => {
+  const s = [
+    { name: 1, value: 45e3 },
+    { name: 2, value: 45200 },
+    { name: 3, value: 44800 },
+    { name: 4, value: 45100 },
+    { name: 5, value: 45300 }
+  ];
+  return /* @__PURE__ */ a(t, { children: [
+    /* @__PURE__ */ e(
+      m,
+      {
+        title: "LivePriceFeed",
+        description: "Real-time price display with integrated chart visualization for cryptocurrency price tracking.",
+        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-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg border border-green-500/50", children: /* @__PURE__ */ e(v, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ e(i, { 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__ */ a("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ a(i, { className: "p-4", children: [
+        /* @__PURE__ */ e(c, { tag: "h5", className: "mb-3", children: "With Chart" }),
+        /* @__PURE__ */ e(
+          n,
+          {
+            id: "bitcoin",
+            name: "Bitcoin",
+            symbol: "BTC",
+            icon: /* @__PURE__ */ e(l, { className: "w-6 h-6" }),
+            balance: "1.25",
+            usdBalance: "45,000",
+            change: "+2.5%",
+            isChangePositive: !0,
+            prices: s
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a(i, { className: "p-4", children: [
+        /* @__PURE__ */ e(c, { tag: "h5", className: "mb-3", children: "Negative Change" }),
+        /* @__PURE__ */ e(
+          n,
+          {
+            id: "ethereum",
+            name: "Ethereum",
+            symbol: "ETH",
+            icon: /* @__PURE__ */ e(d, { className: "w-6 h-6" }),
+            balance: "5.5",
+            usdBalance: "16,500",
+            change: "-1.8%",
+            isChangePositive: !1,
+            prices: [
+              { name: 1, value: 3e3 },
+              { name: 2, value: 2950 },
+              { name: 3, value: 2980 },
+              { name: 4, value: 2920 },
+              { name: 5, value: 2900 }
+            ]
+          }
+        )
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(
+      h,
+      {
+        componentName: "LivePriceFeed",
+        defaultValues: {
+          id: "bitcoin",
+          name: "Bitcoin",
+          symbol: "BTC",
+          balance: "1.25",
+          usdBalance: "45,000",
+          change: "+2.5%",
+          isChangePositive: !0,
+          isBorder: !1
+        },
+        controlOverrides: [
+          {
+            name: "isChangePositive",
+            type: "boolean",
+            description: "Whether the price change is positive"
+          },
+          {
+            name: "isBorder",
+            type: "boolean",
+            description: "Show border around the component"
+          }
+        ],
+        includeProps: [
+          "id",
+          "name",
+          "symbol",
+          "balance",
+          "usdBalance",
+          "change",
+          "isChangePositive",
+          "isBorder"
+        ],
+        children: (o) => /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(
+          n,
+          {
+            ...o,
+            icon: /* @__PURE__ */ e(l, { className: "w-6 h-6" }),
+            prices: s
+          }
+        ) })
+      }
+    ),
+    /* @__PURE__ */ e(u, { componentName: "LivePriceFeed" }),
+    /* @__PURE__ */ e(i, { 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 { LivePriceFeed } from '@e-burgos/tucu-ui';
+
+const priceData = [
+  { name: 1, value: 45000 },
+  { name: 2, value: 45200 },
+  { name: 3, value: 44800 },
+  { name: 4, value: 45100 },
+];
+
+<LivePriceFeed
+  id="bitcoin"
+  name="Bitcoin"
+  symbol="BTC"
+  icon={<Bitcoin />}
+  balance="1.25"
+  usdBalance="45,000"
+  change="+2.5%"
+  isChangePositive={true}
+  prices={priceData}
+/>`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  C as default
+};

package/documentation/LivePriceFeedSection-V76Z5Fer.js

@@ -0,0 +1,20 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DWDUS-PU.js"),n=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>{const i=[{name:1,value:45e3},{name:2,value:45200},{name:3,value:44800},{name:4,value:45100},{name:5,value:45300}];return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"LivePriceFeed",description:"Real-time price display with integrated chart visualization for cryptocurrency price tracking.",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-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg border border-green-500/50",children:e.jsx(n.TrendingUp,{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(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Chart"}),e.jsx(a.LivePriceFeed,{id:"bitcoin",name:"Bitcoin",symbol:"BTC",icon:e.jsx(a.Bitcoin,{className:"w-6 h-6"}),balance:"1.25",usdBalance:"45,000",change:"+2.5%",isChangePositive:!0,prices:i})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Negative Change"}),e.jsx(a.LivePriceFeed,{id:"ethereum",name:"Ethereum",symbol:"ETH",icon:e.jsx(a.Ethereum,{className:"w-6 h-6"}),balance:"5.5",usdBalance:"16,500",change:"-1.8%",isChangePositive:!1,prices:[{name:1,value:3e3},{name:2,value:2950},{name:3,value:2980},{name:4,value:2920},{name:5,value:2900}]})]})]})})})}),e.jsx(a.PropPlayground,{componentName:"LivePriceFeed",defaultValues:{id:"bitcoin",name:"Bitcoin",symbol:"BTC",balance:"1.25",usdBalance:"45,000",change:"+2.5%",isChangePositive:!0,isBorder:!1},controlOverrides:[{name:"isChangePositive",type:"boolean",description:"Whether the price change is positive"},{name:"isBorder",type:"boolean",description:"Show border around the component"}],includeProps:["id","name","symbol","balance","usdBalance","change","isChangePositive","isBorder"],children:s=>e.jsx("div",{className:"w-full",children:e.jsx(a.LivePriceFeed,{...s,icon:e.jsx(a.Bitcoin,{className:"w-6 h-6"}),prices:i})})}),e.jsx(a.AutoPropsTable,{componentName:"LivePriceFeed"}),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 { LivePriceFeed } from '@e-burgos/tucu-ui';
+
+const priceData = [
+  { name: 1, value: 45000 },
+  { name: 2, value: 45200 },
+  { name: 3, value: 44800 },
+  { name: 4, value: 45100 },
+];
+
+<LivePriceFeed
+  id="bitcoin"
+  name="Bitcoin"
+  symbol="BTC"
+  icon={<Bitcoin />}
+  balance="1.25"
+  usdBalance="45,000"
+  change="+2.5%"
+  isChangePositive={true}
+  prices={priceData}
+/>`})})})})]})};exports.default=r;

package/documentation/LoaderSection-CkUnMvCy.js

@@ -0,0 +1,96 @@
+import { jsxs as a, Fragment as d, jsx as e } from "react/jsx-runtime";
+import { H as m, C as r, a as i, T as l, ad as s, P as c, A as n, c as t } from "../index-DoxeCFUJ.js";
+import { Loader2 as h } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const L = () => /* @__PURE__ */ a(d, { children: [
+  /* @__PURE__ */ e(
+    m,
+    {
+      title: "Loader",
+      description: `A versatile loader component with multiple animation variants and
+          sizes for indicating loading states.`,
+      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-indigo-500 to-violet-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(h, { 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(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { 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(r, { className: "p-4", children: [
+      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Default Loader" }),
+      /* @__PURE__ */ e(s, {})
+    ] }),
+    /* @__PURE__ */ a(r, { className: "p-4", children: [
+      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Small Loader" }),
+      /* @__PURE__ */ e(s, { size: "small" })
+    ] }),
+    /* @__PURE__ */ a(r, { className: "p-4", children: [
+      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Large Loader" }),
+      /* @__PURE__ */ e(s, { size: "large" })
+    ] }),
+    /* @__PURE__ */ a(r, { className: "p-4", children: [
+      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Three Dots Only" }),
+      /* @__PURE__ */ e(s, { showOnlyThreeDots: !0 })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { 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(r, { className: "p-4", children: [
+      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Blink Variant" }),
+      /* @__PURE__ */ e(s, { variant: "blink" })
+    ] }),
+    /* @__PURE__ */ a(r, { className: "p-4", children: [
+      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Scale Up Variant" }),
+      /* @__PURE__ */ e(s, { variant: "scaleUp" })
+    ] }),
+    /* @__PURE__ */ a(r, { className: "p-4", children: [
+      /* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Move Up Variant" }),
+      /* @__PURE__ */ e(s, { variant: "moveUp" })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(
+    c,
+    {
+      componentName: "Loader",
+      defaultValues: {
+        variant: "moveUp",
+        size: "medium",
+        color: "primary",
+        showOnlyThreeDots: !1,
+        tag: "div"
+      },
+      excludeProps: [],
+      children: (o) => /* @__PURE__ */ e(s, { ...o })
+    }
+  ),
+  /* @__PURE__ */ e(n, { componentName: "Loader" }),
+  /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    t,
+    {
+      language: "tsx",
+      code: `import { Loader } from '@e-burgos/tucu-ui';
+
+// Basic usage
+<Loader />
+
+// Different sizes
+<Loader size="small" />
+<Loader size="medium" />
+<Loader size="large" />
+
+// Different variants
+<Loader variant="blink" />
+<Loader variant="scaleUp" />
+<Loader variant="moveUp" />
+
+// Different colors
+<Loader color="primary" />
+<Loader color="success" />
+<Loader color="danger" />
+
+// Three dots only
+<Loader showOnlyThreeDots />`
+    }
+  ) }) }) })
+] });
+export {
+  L as default
+};

package/documentation/LoaderSection-DEAO4HDA.js

@@ -0,0 +1,23 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DWDUS-PU.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Loader",description:`A versatile loader component with multiple animation variants and
+          sizes for indicating loading states.`,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-indigo-500 to-violet-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(s.Loader2,{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(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:"Default Loader"}),e.jsx(a.Loader,{})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Small Loader"}),e.jsx(a.Loader,{size:"small"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Large Loader"}),e.jsx(a.Loader,{size:"large"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Three Dots Only"}),e.jsx(a.Loader,{showOnlyThreeDots:!0})]})]})})})}),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.Loader,{variant:"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.Loader,{variant:"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.Loader,{variant:"moveUp"})]})]})})})}),e.jsx(a.PropPlayground,{componentName:"Loader",defaultValues:{variant:"moveUp",size:"medium",color:"primary",showOnlyThreeDots:!1,tag:"div"},excludeProps:[],children:r=>e.jsx(a.Loader,{...r})}),e.jsx(a.AutoPropsTable,{componentName:"Loader"}),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 { Loader } from '@e-burgos/tucu-ui';
+
+// Basic usage
+<Loader />
+
+// Different sizes
+<Loader size="small" />
+<Loader size="medium" />
+<Loader size="large" />
+
+// Different variants
+<Loader variant="blink" />
+<Loader variant="scaleUp" />
+<Loader variant="moveUp" />
+
+// Different colors
+<Loader color="primary" />
+<Loader color="success" />
+<Loader color="danger" />
+
+// Three dots only
+<Loader showOnlyThreeDots />`})})})})]});exports.default=i;

package/documentation/LogoSection-DBRfP-OY.js

@@ -0,0 +1,101 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DWDUS-PU.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=()=>e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Logo",description:`A flexible logo component that automatically adapts to light/dark mode
+          and supports various sizes and configurations.`,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-500 to-pink-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(a.Sparkles,{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 Logo (uses defaults)"}),e.jsx(s.Logo,{})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Custom Names"}),e.jsx(s.Logo,{name:"Custom",secondName:"App"})]}),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",children:[e.jsx(s.Logo,{name:"TUCU",size:"small"}),e.jsx(s.Logo,{name:"TUCU",size:"medium"}),e.jsx(s.Logo,{name:"TUCU",size:"large"}),e.jsx(s.Logo,{name:"TUCU",size:"xlarge"})]})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"With Custom Link Path"}),e.jsx(s.Logo,{name:"TUCU",path:"/home"})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Isotype Mode (First Letters Only)"}),e.jsx(s.Logo,{name:"TUCU",secondName:"UI",isoType:!0})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"With Custom Classes"}),e.jsx(s.Logo,{name:"TUCU",className:"opacity-80 hover:opacity-100 transition-opacity"})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Custom Logo Component"}),e.jsx(s.Logo,{name:"MY",secondName:"APP",logo:e.jsx("div",{className:"w-16 h-16 bg-linear-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center text-white font-bold text-xl shadow-lg",children:"M"})})]})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Advanced 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:"Custom Logo with SVG Icon"}),e.jsx(s.Logo,{name:"COMPANY",secondName:"LLC",logo:e.jsxs("svg",{width:"64",height:"64",viewBox:"0 0 64 64",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"rounded-lg",children:[e.jsx("rect",{width:"64",height:"64",rx:"12",fill:"url(#gradient)"}),e.jsx("defs",{children:e.jsxs("linearGradient",{id:"gradient",x1:"0",y1:"0",x2:"64",y2:"64",children:[e.jsx("stop",{offset:"0%",stopColor:"#3B82F6"}),e.jsx("stop",{offset:"100%",stopColor:"#8B5CF6"})]})}),e.jsx("path",{d:"M32 20L40 28L32 36L24 28L32 20Z",fill:"white"}),e.jsx("path",{d:"M20 32L28 40L36 32L28 24L20 32Z",fill:"white",opacity:"0.8"})]})})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Custom Logo with Image"}),e.jsx(s.Logo,{name:"COMPANY",secondName:"",logo:e.jsx("div",{className:"w-16 h-16 bg-linear-to-br from-indigo-500 via-purple-500 to-pink-500 rounded-xl flex items-center justify-center text-white font-bold text-2xl shadow-lg border-2 border-white/20",children:"C"})})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Only Primary Name"}),e.jsx(s.Logo,{name:"MYAPP",secondName:""})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Only Secondary Name"}),e.jsx(s.Logo,{name:"",secondName:"BRAND"})]})]})})})}),e.jsx(s.PropPlayground,{componentName:"Logo",defaultValues:{name:"Tucu",secondName:"UI",size:"medium",isoType:!1},excludeProps:["path","logo","preset"],children:o=>e.jsx(s.Logo,{...o})}),e.jsx(s.AutoPropsTable,{componentName:"Logo"}),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 { Logo } from '@e-burgos/tucu-ui';
+
+// Default usage (uses "TUCU" and "UI" as defaults)
+<Logo />
+
+// Custom names
+<Logo name="Custom" secondName="App" />
+
+// Different sizes
+<Logo name="TUCU" size="small" />
+<Logo name="TUCU" size="medium" />
+<Logo name="TUCU" size="large" />
+<Logo name="TUCU" size="xlarge" />
+
+// With custom link path
+<Logo name="TUCU" path="/home" />
+
+// Isotype mode (shows only first letters)
+<Logo name="TUCU" secondName="UI" isoType />
+
+// With custom CSS classes
+<Logo 
+  name="TUCU" 
+  className="opacity-80 hover:opacity-100 transition-opacity" 
+/>
+
+// With custom logo component (ReactNode)
+<Logo
+  name="MY"
+  secondName="APP"
+  logo={
+    <div className="w-16 h-16 bg-linear-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center text-white font-bold text-xl shadow-lg">
+      M
+    </div>
+  }
+/>
+
+// With custom SVG logo
+<Logo
+  name="COMPANY"
+  secondName="LLC"
+  logo={
+    <svg
+      width="64"
+      height="64"
+      viewBox="0 0 64 64"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="rounded-lg"
+    >
+      <rect
+        width="64"
+        height="64"
+        rx="12"
+        fill="url(#gradient)"
+      />
+      <defs>
+        <linearGradient
+          id="gradient"
+          x1="0"
+          y1="0"
+          x2="64"
+          y2="64"
+        >
+          <stop offset="0%" stopColor="#3B82F6" />
+          <stop offset="100%" stopColor="#8B5CF6" />
+        </linearGradient>
+      </defs>
+      <path d="M32 20L40 28L32 36L24 28L32 20Z" fill="white" />
+      <path
+        d="M20 32L28 40L36 32L28 24L20 32Z"
+        fill="white"
+        opacity="0.8"
+      />
+    </svg>
+  }
+/>
+
+// Custom logo with image/div component
+<Logo
+  name="COMPANY"
+  secondName=""
+  logo={
+    <div className="w-16 h-16 bg-linear-to-br from-indigo-500 via-purple-500 to-pink-500 rounded-xl flex items-center justify-center text-white font-bold text-2xl shadow-lg border-2 border-white/20">
+      C
+    </div>
+  }
+/>
+
+// Only primary name (empty secondName)
+<Logo name="MYAPP" secondName="" />
+
+// Only secondary name (empty name)
+<Logo name="" secondName="BRAND" />
+
+// The component automatically:
+// - Adapts to light/dark mode
+// - Shows TucuUiLogo icon when no custom logo is provided
+// - Defaults to "TUCU" and "UI" if names are undefined
+// - Handles empty strings for name or secondName`})})})})]});exports.default=t;

package/documentation/LogoSection-DuwWvmb4.js

@@ -0,0 +1,265 @@
+import { jsxs as a, Fragment as m, jsx as e } from "react/jsx-runtime";
+import { H as n, C as s, a as l, T as t, ag as o, P as r, A as d, c } from "../index-DoxeCFUJ.js";
+import { Sparkles as h } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const C = () => /* @__PURE__ */ a(m, { children: [
+  /* @__PURE__ */ e(
+    n,
+    {
+      title: "Logo",
+      description: `A flexible logo component that automatically adapts to light/dark mode
+          and supports various sizes and configurations.`,
+      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-500 to-pink-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(h, { 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(l, { 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: "Default Logo (uses defaults)" }),
+      /* @__PURE__ */ e(o, {})
+    ] }),
+    /* @__PURE__ */ a(s, { className: "p-4", children: [
+      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Custom Names" }),
+      /* @__PURE__ */ e(o, { name: "Custom", secondName: "App" })
+    ] }),
+    /* @__PURE__ */ a(s, { className: "p-4", children: [
+      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Different Sizes" }),
+      /* @__PURE__ */ a("div", { className: "flex items-center gap-4 flex-wrap", children: [
+        /* @__PURE__ */ e(o, { name: "TUCU", size: "small" }),
+        /* @__PURE__ */ e(o, { name: "TUCU", size: "medium" }),
+        /* @__PURE__ */ e(o, { name: "TUCU", size: "large" }),
+        /* @__PURE__ */ e(o, { name: "TUCU", size: "xlarge" })
+      ] })
+    ] }),
+    /* @__PURE__ */ a(s, { className: "p-4", children: [
+      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "With Custom Link Path" }),
+      /* @__PURE__ */ e(o, { name: "TUCU", path: "/home" })
+    ] }),
+    /* @__PURE__ */ a(s, { className: "p-4", children: [
+      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Isotype Mode (First Letters Only)" }),
+      /* @__PURE__ */ e(o, { name: "TUCU", secondName: "UI", isoType: !0 })
+    ] }),
+    /* @__PURE__ */ a(s, { className: "p-4", children: [
+      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "With Custom Classes" }),
+      /* @__PURE__ */ e(
+        o,
+        {
+          name: "TUCU",
+          className: "opacity-80 hover:opacity-100 transition-opacity"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a(s, { className: "p-4", children: [
+      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Custom Logo Component" }),
+      /* @__PURE__ */ e(
+        o,
+        {
+          name: "MY",
+          secondName: "APP",
+          logo: /* @__PURE__ */ e("div", { className: "w-16 h-16 bg-linear-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center text-white font-bold text-xl shadow-lg", children: "M" })
+        }
+      )
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Advanced 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: "Custom Logo with SVG Icon" }),
+      /* @__PURE__ */ e(
+        o,
+        {
+          name: "COMPANY",
+          secondName: "LLC",
+          logo: /* @__PURE__ */ a(
+            "svg",
+            {
+              width: "64",
+              height: "64",
+              viewBox: "0 0 64 64",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              className: "rounded-lg",
+              children: [
+                /* @__PURE__ */ e(
+                  "rect",
+                  {
+                    width: "64",
+                    height: "64",
+                    rx: "12",
+                    fill: "url(#gradient)"
+                  }
+                ),
+                /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ a(
+                  "linearGradient",
+                  {
+                    id: "gradient",
+                    x1: "0",
+                    y1: "0",
+                    x2: "64",
+                    y2: "64",
+                    children: [
+                      /* @__PURE__ */ e("stop", { offset: "0%", stopColor: "#3B82F6" }),
+                      /* @__PURE__ */ e("stop", { offset: "100%", stopColor: "#8B5CF6" })
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ e("path", { d: "M32 20L40 28L32 36L24 28L32 20Z", fill: "white" }),
+                /* @__PURE__ */ e(
+                  "path",
+                  {
+                    d: "M20 32L28 40L36 32L28 24L20 32Z",
+                    fill: "white",
+                    opacity: "0.8"
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a(s, { className: "p-4", children: [
+      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Custom Logo with Image" }),
+      /* @__PURE__ */ e(
+        o,
+        {
+          name: "COMPANY",
+          secondName: "",
+          logo: /* @__PURE__ */ e("div", { className: "w-16 h-16 bg-linear-to-br from-indigo-500 via-purple-500 to-pink-500 rounded-xl flex items-center justify-center text-white font-bold text-2xl shadow-lg border-2 border-white/20", children: "C" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a(s, { className: "p-4", children: [
+      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Only Primary Name" }),
+      /* @__PURE__ */ e(o, { name: "MYAPP", secondName: "" })
+    ] }),
+    /* @__PURE__ */ a(s, { className: "p-4", children: [
+      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Only Secondary Name" }),
+      /* @__PURE__ */ e(o, { name: "", secondName: "BRAND" })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(
+    r,
+    {
+      componentName: "Logo",
+      defaultValues: {
+        name: "Tucu",
+        secondName: "UI",
+        size: "medium",
+        isoType: !1
+      },
+      excludeProps: ["path", "logo", "preset"],
+      children: (i) => /* @__PURE__ */ e(o, { ...i })
+    }
+  ),
+  /* @__PURE__ */ e(d, { componentName: "Logo" }),
+  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    c,
+    {
+      language: "tsx",
+      code: `import { Logo } from '@e-burgos/tucu-ui';
+
+// Default usage (uses "TUCU" and "UI" as defaults)
+<Logo />
+
+// Custom names
+<Logo name="Custom" secondName="App" />
+
+// Different sizes
+<Logo name="TUCU" size="small" />
+<Logo name="TUCU" size="medium" />
+<Logo name="TUCU" size="large" />
+<Logo name="TUCU" size="xlarge" />
+
+// With custom link path
+<Logo name="TUCU" path="/home" />
+
+// Isotype mode (shows only first letters)
+<Logo name="TUCU" secondName="UI" isoType />
+
+// With custom CSS classes
+<Logo 
+  name="TUCU" 
+  className="opacity-80 hover:opacity-100 transition-opacity" 
+/>
+
+// With custom logo component (ReactNode)
+<Logo
+  name="MY"
+  secondName="APP"
+  logo={
+    <div className="w-16 h-16 bg-linear-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center text-white font-bold text-xl shadow-lg">
+      M
+    </div>
+  }
+/>
+
+// With custom SVG logo
+<Logo
+  name="COMPANY"
+  secondName="LLC"
+  logo={
+    <svg
+      width="64"
+      height="64"
+      viewBox="0 0 64 64"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="rounded-lg"
+    >
+      <rect
+        width="64"
+        height="64"
+        rx="12"
+        fill="url(#gradient)"
+      />
+      <defs>
+        <linearGradient
+          id="gradient"
+          x1="0"
+          y1="0"
+          x2="64"
+          y2="64"
+        >
+          <stop offset="0%" stopColor="#3B82F6" />
+          <stop offset="100%" stopColor="#8B5CF6" />
+        </linearGradient>
+      </defs>
+      <path d="M32 20L40 28L32 36L24 28L32 20Z" fill="white" />
+      <path
+        d="M20 32L28 40L36 32L28 24L20 32Z"
+        fill="white"
+        opacity="0.8"
+      />
+    </svg>
+  }
+/>
+
+// Custom logo with image/div component
+<Logo
+  name="COMPANY"
+  secondName=""
+  logo={
+    <div className="w-16 h-16 bg-linear-to-br from-indigo-500 via-purple-500 to-pink-500 rounded-xl flex items-center justify-center text-white font-bold text-2xl shadow-lg border-2 border-white/20">
+      C
+    </div>
+  }
+/>
+
+// Only primary name (empty secondName)
+<Logo name="MYAPP" secondName="" />
+
+// Only secondary name (empty name)
+<Logo name="" secondName="BRAND" />
+
+// The component automatically:
+// - Adapts to light/dark mode
+// - Shows TucuUiLogo icon when no custom logo is provided
+// - Defaults to "TUCU" and "UI" if names are undefined
+// - Handles empty strings for name or secondName`
+    }
+  ) }) }) })
+] });
+export {
+  C as default
+};