@e-burgos/tucu-ui 1.1.1 → 2.0.0

package/LivePriceFeedSection-CVUYaDLi.mjs

@@ -0,0 +1,187 @@
+import { jsxs as r, Fragment as s, jsx as e } from "react/jsx-runtime";
+import { T as t, C as i, a as c, L as l, d as o, E as d, B as p, c as m } from "./index-Hq6IUBmn.mjs";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const C = () => /* @__PURE__ */ r(s, { children: [
+  /* @__PURE__ */ r("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ e(t, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "LivePriceFeed" }),
+    /* @__PURE__ */ e(
+      t,
+      {
+        tag: "p",
+        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        children: "Real-time price display with integrated chart visualization for cryptocurrency price tracking."
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ r("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ r(i, { className: "p-4", children: [
+      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "With Chart" }),
+      /* @__PURE__ */ e(
+        l,
+        {
+          id: "bitcoin",
+          name: "Bitcoin",
+          symbol: "BTC",
+          icon: /* @__PURE__ */ e(o, { className: "w-6 h-6" }),
+          balance: "1.25",
+          usdBalance: "45,000",
+          change: "+2.5%",
+          isChangePositive: !0,
+          prices: [
+            { name: 1, value: 45e3 },
+            { name: 2, value: 45200 },
+            { name: 3, value: 44800 },
+            { name: 4, value: 45100 },
+            { name: 5, value: 45300 }
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ r(i, { className: "p-4", children: [
+      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Negative Change" }),
+      /* @__PURE__ */ e(
+        l,
+        {
+          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(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    p,
+    {
+      columns: [
+        {
+          key: "prop",
+          label: "Prop",
+          render: (a) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(a) })
+        },
+        {
+          key: "type",
+          label: "Type",
+          render: (a) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(a) })
+        },
+        {
+          key: "default",
+          label: "Default",
+          render: (a) => {
+            const n = String(a);
+            return n === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: n });
+          }
+        },
+        {
+          key: "description",
+          label: "Description"
+        }
+      ],
+      data: [
+        {
+          prop: "id",
+          type: "string",
+          default: "required",
+          description: "Unique identifier for the price feed"
+        },
+        {
+          prop: "name",
+          type: "string",
+          default: "required",
+          description: "Full name of the cryptocurrency"
+        },
+        {
+          prop: "symbol",
+          type: "string",
+          default: "required",
+          description: "Cryptocurrency symbol"
+        },
+        {
+          prop: "icon",
+          type: "React.ReactElement",
+          default: "required",
+          description: "Icon element for the cryptocurrency"
+        },
+        {
+          prop: "balance",
+          type: "string",
+          default: "required",
+          description: "Coin balance amount"
+        },
+        {
+          prop: "usdBalance",
+          type: "string",
+          default: "required",
+          description: "USD equivalent balance"
+        },
+        {
+          prop: "change",
+          type: "string",
+          default: "required",
+          description: "Price change percentage"
+        },
+        {
+          prop: "isChangePositive",
+          type: "boolean",
+          default: "required",
+          description: "Whether the price change is positive"
+        },
+        {
+          prop: "prices",
+          type: "Price[]",
+          default: "required",
+          description: "Array of price data points for the chart"
+        },
+        {
+          prop: "isBorder",
+          type: "boolean",
+          default: "false",
+          description: "Whether to show border instead of shadow"
+        }
+      ]
+    }
+  ) }) }) }),
+  /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    m,
+    {
+      language: "tsx",
+      code: `import { 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/LoaderSection-DkC3hHKp.js

@@ -0,0 +1,22 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("./index-CjRk4ezu.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=()=>{const l=[{key:"prop",label:"Prop",render:r=>e.jsx("code",{className:"text-xs text-brand",children:String(r)})},{key:"type",label:"Type",render:r=>e.jsx("code",{className:"text-xs",children:String(r)})},{key:"default",label:"Default",render:r=>{const s=String(r);return s==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:s})}},{key:"description",label:"Description"}],i=[{prop:"tag",type:"'div' | 'span'",default:"'div'",description:"HTML tag to render"},{prop:"size",type:"'large' | 'medium' | 'small'",default:"'medium'",description:"Size of the loader"},{prop:"variant",type:"'blink' | 'scaleUp' | 'moveUp'",default:"'moveUp'",description:"Animation variant"},{prop:"color",type:"'primary' | 'gray' | 'success' | 'danger' | 'info' | 'warning'",default:"'primary'",description:"Color of the loader"},{prop:"showOnlyThreeDots",type:"boolean",default:"false",description:"Show only three dots instead of four"},{prop:"className",type:"string",default:"-",description:"Additional CSS classes"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Loader"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A versatile loader component with multiple animation variants and sizes for indicating loading states."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"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.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:l,data:i})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{language:"tsx",code:`import { 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=t;

package/LoaderSection-DsDLwNrN.mjs

@@ -0,0 +1,143 @@
+import { jsxs as a, Fragment as o, jsx as e } from "react/jsx-runtime";
+import { T as l, C as r, a as t, _ as s, B as n, c } from "./index-Hq6IUBmn.mjs";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const x = () => /* @__PURE__ */ a(o, { children: [
+  /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ e(l, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Loader" }),
+    /* @__PURE__ */ e(
+      l,
+      {
+        tag: "p",
+        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        children: "A versatile loader component with multiple animation variants and sizes for indicating loading states."
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ 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(t, { 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(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { 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 d = String(i);
+        return d === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: d });
+      }
+    },
+    {
+      key: "description",
+      label: "Description"
+    }
+  ], data: [
+    {
+      prop: "tag",
+      type: "'div' | 'span'",
+      default: "'div'",
+      description: "HTML tag to render"
+    },
+    {
+      prop: "size",
+      type: "'large' | 'medium' | 'small'",
+      default: "'medium'",
+      description: "Size of the loader"
+    },
+    {
+      prop: "variant",
+      type: "'blink' | 'scaleUp' | 'moveUp'",
+      default: "'moveUp'",
+      description: "Animation variant"
+    },
+    {
+      prop: "color",
+      type: "'primary' | 'gray' | 'success' | 'danger' | 'info' | 'warning'",
+      default: "'primary'",
+      description: "Color of the loader"
+    },
+    {
+      prop: "showOnlyThreeDots",
+      type: "boolean",
+      default: "false",
+      description: "Show only three dots instead of four"
+    },
+    {
+      prop: "className",
+      type: "string",
+      default: "-",
+      description: "Additional CSS classes"
+    }
+  ] }) }) }) }),
+  /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    c,
+    {
+      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 {
+  x as default
+};

package/LogoSection-B_ll9gcD.js

@@ -0,0 +1,100 @@
+"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 r=()=>{const t=[{key:"prop",label:"Prop",render:o=>e.jsx("code",{className:"text-xs text-brand",children:String(o)})},{key:"type",label:"Type",render:o=>e.jsx("code",{className:"text-xs",children:String(o)})},{key:"default",label:"Default",render:o=>{const a=String(o);return a==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:a})}},{key:"description",label:"Description"}],l=[{prop:"name",type:"string",default:"-",description:'Primary logo text. Defaults to "TUCU" if not provided'},{prop:"secondName",type:"string",default:"-",description:'Secondary logo text. Defaults to "UI" if not provided'},{prop:"path",type:"string",default:"'/'",description:"Link path for the logo anchor link"},{prop:"className",type:"string",default:"-",description:"Additional CSS classes for the logo container"},{prop:"size",type:"'small' | 'medium' | 'large' | 'xlarge'",default:"'medium'",description:"Size of the logo. Affects both icon and text sizes"},{prop:"logo",type:"React.ReactNode | null",default:"null",description:"Custom logo component to replace the default TucuUiLogo"},{prop:"isoType",type:"boolean",default:"false",description:"Show only the first letter of each name (isotype mode)"}];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:"Logo"}),e.jsx(s.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A flexible logo component that automatically adapts to light/dark mode and supports various sizes and configurations."})]}),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.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:t,data:l})})})}),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=r;