@e-burgos/tucu-ui 2.0.8 → 2.0.10

package/documentation/LivePriceFeedSection-B_GgiNK8.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-19KsCnyX.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/LoaderSection-Chy1mcXx.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-19KsCnyX.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-yuB9Toxf.js

@@ -0,0 +1,23 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DMs_SmPq.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-BVWSaZET.js

@@ -0,0 +1,101 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DMs_SmPq.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-CfykWQ4k.js → LogoSection-iUxlu-_p.js}

@@ -1,21 +1,19 @@
-import { jsxs as a, Fragment as n, jsx as e } from "react/jsx-runtime";
-import { T as t, C as s, a as l, ad as o, P as m, A as r, c as d } from "../index-D3gBsvbO.js";
-import "lucide-react";
+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-19KsCnyX.js";
+import { Sparkles as h } from "lucide-react";
 import "react-router-dom";
 import "react";
 import "react-dom";
-const f = () => /* @__PURE__ */ a(n, { children: [
-  /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
-    /* @__PURE__ */ e(t, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Logo" }),
-    /* @__PURE__ */ e(
-      t,
-      {
-        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."
-      }
-    )
-  ] }),
+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)" }),
@@ -141,7 +139,7 @@ const f = () => /* @__PURE__ */ a(n, { children: [
     ] })
   ] }) }) }) }),
   /* @__PURE__ */ e(
-    m,
+    r,
     {
       componentName: "Logo",
       defaultValues: {
@@ -154,9 +152,9 @@ const f = () => /* @__PURE__ */ a(n, { children: [
       children: (i) => /* @__PURE__ */ e(o, { ...i })
     }
   ),
-  /* @__PURE__ */ e(r, { componentName: "Logo" }),
+  /* @__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(
-    d,
+    c,
     {
       language: "tsx",
       code: `import { Logo } from '@e-burgos/tucu-ui';
@@ -263,5 +261,5 @@ const f = () => /* @__PURE__ */ a(n, { children: [
   ) }) }) })
 ] });
 export {
-  f as default
+  C as default
 };

package/documentation/LucideIconsSection-CX6vVBZA.js

@@ -0,0 +1,169 @@
+import { jsxs as o, Fragment as d, jsx as e } from "react/jsx-runtime";
+import { useState as h } from "react";
+import { H as p, T as s, C as w, a as g } from "../index-19KsCnyX.js";
+import { Sparkles as N, Home as u, Menu as f, ArrowLeft as x, ArrowRight as y, ChevronUp as v, ChevronDown as C, Grid3X3 as b, List as k, Navigation as I, Plus as L, Minus as A, X as T, Check as S, Edit as E, Trash2 as D, Download as H, Upload as M, Zap as U, CheckCircle as X, AlertCircle as j, AlertTriangle as P, Info as R, Loader2 as $, Clock as F, Eye as G, EyeOff as O, Bell as q } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const V = () => {
+  const [r, c] = h(null), l = [
+    {
+      category: "Navigation & Layout",
+      description: "Essential navigation and layout icons",
+      icon: /* @__PURE__ */ e(I, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+      color: "from-blue-500 via-indigo-500 to-purple-500",
+      icons: [
+        { name: "Home", component: /* @__PURE__ */ e(u, { className: "w-6 h-6" }) },
+        { name: "Menu", component: /* @__PURE__ */ e(f, { className: "w-6 h-6" }) },
+        {
+          name: "ArrowLeft",
+          component: /* @__PURE__ */ e(x, { className: "w-6 h-6" })
+        },
+        {
+          name: "ArrowRight",
+          component: /* @__PURE__ */ e(y, { className: "w-6 h-6" })
+        },
+        {
+          name: "ChevronUp",
+          component: /* @__PURE__ */ e(v, { className: "w-6 h-6" })
+        },
+        {
+          name: "ChevronDown",
+          component: /* @__PURE__ */ e(C, { className: "w-6 h-6" })
+        },
+        {
+          name: "Grid3X3",
+          component: /* @__PURE__ */ e(b, { className: "w-6 h-6" })
+        },
+        { name: "List", component: /* @__PURE__ */ e(k, { className: "w-6 h-6" }) }
+      ]
+    },
+    {
+      category: "Actions & Controls",
+      description: "Common action and interactive control icons",
+      icon: /* @__PURE__ */ e(U, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+      color: "from-purple-500 via-pink-500 to-rose-500",
+      icons: [
+        { name: "Plus", component: /* @__PURE__ */ e(L, { className: "w-6 h-6" }) },
+        { name: "Minus", component: /* @__PURE__ */ e(A, { className: "w-6 h-6" }) },
+        { name: "X", component: /* @__PURE__ */ e(T, { className: "w-6 h-6" }) },
+        { name: "Check", component: /* @__PURE__ */ e(S, { className: "w-6 h-6" }) },
+        { name: "Edit", component: /* @__PURE__ */ e(E, { className: "w-6 h-6" }) },
+        {
+          name: "Trash2",
+          component: /* @__PURE__ */ e(D, { className: "w-6 h-6" })
+        },
+        {
+          name: "Download",
+          component: /* @__PURE__ */ e(H, { className: "w-6 h-6" })
+        },
+        {
+          name: "Upload",
+          component: /* @__PURE__ */ e(M, { className: "w-6 h-6" })
+        }
+      ]
+    },
+    {
+      category: "Status & Feedback",
+      description: "Icons for status indicators and user feedback",
+      icon: /* @__PURE__ */ e(q, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+      color: "from-green-500 via-emerald-500 to-teal-500",
+      icons: [
+        {
+          name: "CheckCircle",
+          component: /* @__PURE__ */ e(X, { className: "w-6 h-6" })
+        },
+        {
+          name: "AlertCircle",
+          component: /* @__PURE__ */ e(j, { className: "w-6 h-6" })
+        },
+        {
+          name: "AlertTriangle",
+          component: /* @__PURE__ */ e(P, { className: "w-6 h-6" })
+        },
+        { name: "Info", component: /* @__PURE__ */ e(R, { className: "w-6 h-6" }) },
+        {
+          name: "Loader2",
+          component: /* @__PURE__ */ e($, { className: "w-6 h-6" })
+        },
+        { name: "Clock", component: /* @__PURE__ */ e(F, { className: "w-6 h-6" }) },
+        { name: "Eye", component: /* @__PURE__ */ e(G, { className: "w-6 h-6" }) },
+        {
+          name: "EyeOff",
+          component: /* @__PURE__ */ e(O, { className: "w-6 h-6" })
+        }
+      ]
+    }
+  ], i = (a) => {
+    const t = `<LucideIcons.${a} className="w-6 h-6" />`;
+    navigator.clipboard.writeText(t), c(a), setTimeout(() => c(null), 2e3);
+  };
+  return /* @__PURE__ */ o(d, { children: [
+    /* @__PURE__ */ e(
+      p,
+      {
+        title: "Lucide React Icons",
+        description: "Access to 1500+ high-quality open-source icons through the LucideIcons namespace. Stroke-based, consistent, and fully compatible with Tailwind CSS.",
+        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-blue-500 via-cyan-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(N, { 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__ */ e(s, { tag: "h2", className: "mb-2", children: "Popular Icons" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "A sample of commonly used Lucide icons — click to copy usage code"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e("div", { className: "space-y-6", children: l.map((a, t) => /* @__PURE__ */ e(w, { className: "overflow-hidden", children: /* @__PURE__ */ e(g, { title: a.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__ */ e(
+            "div",
+            {
+              className: `p-2 rounded-lg bg-linear-to-br ${a.color} shadow-lg`,
+              children: a.icon
+            }
+          ),
+          /* @__PURE__ */ o("div", { children: [
+            /* @__PURE__ */ e(s, { tag: "h3", className: "text-base font-semibold", children: a.category }),
+            /* @__PURE__ */ e(
+              s,
+              {
+                tag: "p",
+                className: "text-gray-600 dark:text-gray-400",
+                children: a.description
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-4", children: a.icons.map((n, m) => /* @__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: () => i(n.name),
+            title: `Click to copy: LucideIcons.${n.name}`,
+            children: [
+              /* @__PURE__ */ e("div", { className: "text-gray-700 dark:text-gray-300 group-hover:text-brand transition-colors", children: n.component }),
+              /* @__PURE__ */ e(
+                s,
+                {
+                  tag: "span",
+                  className: "text-xs text-center text-gray-500 dark:text-gray-400",
+                  children: n.name
+                }
+              ),
+              r === n.name && /* @__PURE__ */ e("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!" })
+            ]
+          },
+          m
+        )) })
+      ] }) }) }, t)) })
+    ] })
+  ] });
+};
+export {
+  V as default
+};

package/documentation/LucideIconsSection-CXfT5lQb.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("react"),o=require("../index-DMs_SmPq.js"),s=require("lucide-react");require("react-router-dom");require("react-dom");const h=()=>{const[r,t]=d.useState(null),l=[{category:"Navigation & Layout",description:"Essential navigation and layout icons",icon:e.jsx(s.Navigation,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),color:"from-blue-500 via-indigo-500 to-purple-500",icons:[{name:"Home",component:e.jsx(s.Home,{className:"w-6 h-6"})},{name:"Menu",component:e.jsx(s.Menu,{className:"w-6 h-6"})},{name:"ArrowLeft",component:e.jsx(s.ArrowLeft,{className:"w-6 h-6"})},{name:"ArrowRight",component:e.jsx(s.ArrowRight,{className:"w-6 h-6"})},{name:"ChevronUp",component:e.jsx(s.ChevronUp,{className:"w-6 h-6"})},{name:"ChevronDown",component:e.jsx(s.ChevronDown,{className:"w-6 h-6"})},{name:"Grid3X3",component:e.jsx(s.Grid3X3,{className:"w-6 h-6"})},{name:"List",component:e.jsx(s.List,{className:"w-6 h-6"})}]},{category:"Actions & Controls",description:"Common action and interactive control icons",icon:e.jsx(s.Zap,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),color:"from-purple-500 via-pink-500 to-rose-500",icons:[{name:"Plus",component:e.jsx(s.Plus,{className:"w-6 h-6"})},{name:"Minus",component:e.jsx(s.Minus,{className:"w-6 h-6"})},{name:"X",component:e.jsx(s.X,{className:"w-6 h-6"})},{name:"Check",component:e.jsx(s.Check,{className:"w-6 h-6"})},{name:"Edit",component:e.jsx(s.Edit,{className:"w-6 h-6"})},{name:"Trash2",component:e.jsx(s.Trash2,{className:"w-6 h-6"})},{name:"Download",component:e.jsx(s.Download,{className:"w-6 h-6"})},{name:"Upload",component:e.jsx(s.Upload,{className:"w-6 h-6"})}]},{category:"Status & Feedback",description:"Icons for status indicators and user feedback",icon:e.jsx(s.Bell,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),color:"from-green-500 via-emerald-500 to-teal-500",icons:[{name:"CheckCircle",component:e.jsx(s.CheckCircle,{className:"w-6 h-6"})},{name:"AlertCircle",component:e.jsx(s.AlertCircle,{className:"w-6 h-6"})},{name:"AlertTriangle",component:e.jsx(s.AlertTriangle,{className:"w-6 h-6"})},{name:"Info",component:e.jsx(s.Info,{className:"w-6 h-6"})},{name:"Loader2",component:e.jsx(s.Loader2,{className:"w-6 h-6"})},{name:"Clock",component:e.jsx(s.Clock,{className:"w-6 h-6"})},{name:"Eye",component:e.jsx(s.Eye,{className:"w-6 h-6"})},{name:"EyeOff",component:e.jsx(s.EyeOff,{className:"w-6 h-6"})}]}],i=a=>{const c=`<LucideIcons.${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:"Lucide React Icons",description:"Access to 1500+ high-quality open-source icons through the LucideIcons namespace. Stroke-based, consistent, and fully compatible with Tailwind CSS.",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-blue-500 via-cyan-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(s.Sparkles,{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:"Popular Icons"}),e.jsx(o.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"A sample of commonly used Lucide icons — click to copy usage code"})]}),e.jsx("div",{className:"space-y-6",children:l.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((n,m)=>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:()=>i(n.name),title:`Click to copy: LucideIcons.${n.name}`,children:[e.jsx("div",{className:"text-gray-700 dark:text-gray-300 group-hover:text-brand transition-colors",children:n.component}),e.jsx(o.Typography,{tag:"span",className:"text-xs text-center text-gray-500 dark:text-gray-400",children:n.name}),r===n.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!"})]},m))})]})})},c))})]})]})};exports.default=h;