@e-burgos/tucu-ui 2.5.0 → 2.7.0

package/documentation/TopupButtonSection-BkbtkCl1.js

@@ -1,98 +0,0 @@
-import { jsxs as l, Fragment as n, jsx as e } from "react/jsx-runtime";
-import { H as t, C as o, a as s, T as c, D as a, P as r, A as d, c as p } from "../index-DYDFy1df.js";
-import { ArrowUpCircle as m, Plus as u, CreditCard as h, Wallet as N } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const C = () => /* @__PURE__ */ l(n, { children: [
-  /* @__PURE__ */ e(
-    t,
-    {
-      title: "TopupButton",
-      description: `A specialized button component for top-up or recharge actions, with
-          support for icons and links.`,
-      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-blue-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(m, { 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(o, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ l("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
-    /* @__PURE__ */ l(o, { className: "p-4", children: [
-      /* @__PURE__ */ e(c, { tag: "h5", className: "mb-3", children: "Basic Topup Button" }),
-      /* @__PURE__ */ e(a, { label: "Add Funds" })
-    ] }),
-    /* @__PURE__ */ l(o, { className: "p-4", children: [
-      /* @__PURE__ */ e(c, { tag: "h5", className: "mb-3", children: "With Icon" }),
-      /* @__PURE__ */ e(
-        a,
-        {
-          label: "Top Up Account",
-          icon: /* @__PURE__ */ e(u, { className: "w-4 h-4" })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ l(o, { className: "p-4", children: [
-      /* @__PURE__ */ e(c, { tag: "h5", className: "mb-3", children: "With Link" }),
-      /* @__PURE__ */ e(
-        a,
-        {
-          label: "Recharge Now",
-          href: "/topup",
-          icon: /* @__PURE__ */ e(h, { className: "w-4 h-4" })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ l(o, { className: "p-4", children: [
-      /* @__PURE__ */ e(c, { tag: "h5", className: "mb-3", children: "With onClick Handler" }),
-      /* @__PURE__ */ e(
-        a,
-        {
-          label: "Add Balance",
-          icon: /* @__PURE__ */ e(N, { className: "w-4 h-4" }),
-          onClick: () => console.log("Topup clicked")
-        }
-      )
-    ] })
-  ] }) }) }) }),
-  /* @__PURE__ */ e(
-    r,
-    {
-      componentName: "TopupButton",
-      defaultValues: { label: "Top Up" },
-      excludeProps: ["onClick", "icon"],
-      children: (i) => /* @__PURE__ */ e(a, { ...i })
-    }
-  ),
-  /* @__PURE__ */ e(d, { componentName: "TopupButton" }),
-  /* @__PURE__ */ e(o, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { 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 { TopupButton, LucideIcons } from '@e-burgos/tucu-ui';
-
-// Basic usage
-<TopupButton label="Add Funds" />
-
-// With icon
-<TopupButton
-  label="Top Up Account"
-  icon={<LucideIcons.Plus className="w-4 h-4" />}
-/>
-
-// With link
-<TopupButton
-  label="Recharge Now"
-  href="/topup"
-  icon={<LucideIcons.CreditCard className="w-4 h-4" />}
-/>
-
-// With onClick handler
-<TopupButton
-  label="Add Balance"
-  icon={<LucideIcons.Wallet className="w-4 h-4" />}
-  onClick={() => handleTopup()}
-/>`
-    }
-  ) }) }) })
-] });
-export {
-  C as default
-};

package/documentation/TopupButtonSection-CcxFcarn.js

@@ -1,25 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-COp_AWCS.js"),o=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"TopupButton",description:`A specialized button component for top-up or recharge actions, with
-          support for icons and links.`,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-blue-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(o.ArrowUpCircle,{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:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Basic Topup Button"}),e.jsx(s.TopupButton,{label:"Add Funds"})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"With Icon"}),e.jsx(s.TopupButton,{label:"Top Up Account",icon:e.jsx(o.Plus,{className:"w-4 h-4"})})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"With Link"}),e.jsx(s.TopupButton,{label:"Recharge Now",href:"/topup",icon:e.jsx(o.CreditCard,{className:"w-4 h-4"})})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"With onClick Handler"}),e.jsx(s.TopupButton,{label:"Add Balance",icon:e.jsx(o.Wallet,{className:"w-4 h-4"}),onClick:()=>console.log("Topup clicked")})]})]})})})}),e.jsx(s.PropPlayground,{componentName:"TopupButton",defaultValues:{label:"Top Up"},excludeProps:["onClick","icon"],children:a=>e.jsx(s.TopupButton,{...a})}),e.jsx(s.AutoPropsTable,{componentName:"TopupButton"}),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 { TopupButton, LucideIcons } from '@e-burgos/tucu-ui';
-
-// Basic usage
-<TopupButton label="Add Funds" />
-
-// With icon
-<TopupButton
-  label="Top Up Account"
-  icon={<LucideIcons.Plus className="w-4 h-4" />}
-/>
-
-// With link
-<TopupButton
-  label="Recharge Now"
-  href="/topup"
-  icon={<LucideIcons.CreditCard className="w-4 h-4" />}
-/>
-
-// With onClick handler
-<TopupButton
-  label="Add Balance"
-  icon={<LucideIcons.Wallet className="w-4 h-4" />}
-  onClick={() => handleTopup()}
-/>`})})})})]});exports.default=l;

package/documentation/TransactionInfoSection-Bol_mikk.js

@@ -1,86 +0,0 @@
-import { jsxs as e, Fragment as i, jsx as a } from "react/jsx-runtime";
-import { H as t, C as l, a as r, T as n, j as s, P as c, A as m, c as d } from "../index-DYDFy1df.js";
-import { Receipt as h } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const g = () => /* @__PURE__ */ e(i, { children: [
-  /* @__PURE__ */ a(
-    t,
-    {
-      title: "TransactionInfo",
-      description: "Simple component for displaying transaction information with label and value. Perfect for showing blockchain transaction details.",
-      icon: /* @__PURE__ */ a("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-slate-500 via-gray-500 to-zinc-500 rounded-full flex items-center justify-center shadow-lg border border-slate-500/50", children: /* @__PURE__ */ a(h, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
-    }
-  ),
-  /* @__PURE__ */ a(l, { className: "overflow-hidden", children: /* @__PURE__ */ a(r, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
-    /* @__PURE__ */ e(l, { className: "p-4", children: [
-      /* @__PURE__ */ a(n, { tag: "h5", className: "mb-3", children: "With Value" }),
-      /* @__PURE__ */ a(
-        s,
-        {
-          label: "Transaction Hash",
-          value: "0x1234...5678"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e(l, { className: "p-4", children: [
-      /* @__PURE__ */ a(n, { tag: "h5", className: "mb-3", children: "Without Value" }),
-      /* @__PURE__ */ a(s, { label: "Gas Fee" })
-    ] }),
-    /* @__PURE__ */ e(l, { className: "p-4", children: [
-      /* @__PURE__ */ a(n, { tag: "h5", className: "mb-3", children: "Number Value" }),
-      /* @__PURE__ */ a(s, { label: "Block Number", value: 12345678 })
-    ] })
-  ] }) }) }) }),
-  /* @__PURE__ */ a(
-    c,
-    {
-      componentName: "TransactionInfo",
-      defaultValues: {
-        label: "Transaction Hash",
-        value: "0x1234...5678"
-      },
-      controlOverrides: [
-        {
-          name: "label",
-          type: "text",
-          description: "Label text for the transaction field"
-        },
-        {
-          name: "value",
-          type: "text",
-          description: "Value to display (string or number)"
-        }
-      ],
-      includeProps: ["label", "value"],
-      children: (o) => /* @__PURE__ */ a("div", { className: "w-full max-w-md", children: /* @__PURE__ */ a(s, { label: o.label, value: o.value }) })
-    }
-  ),
-  /* @__PURE__ */ a(m, { componentName: "TransactionInfo" }),
-  /* @__PURE__ */ a(l, { className: "overflow-hidden", children: /* @__PURE__ */ a(r, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
-    d,
-    {
-      language: "tsx",
-      code: `import { TransactionInfo } from '@e-burgos/tucu-ui';
-
-<TransactionInfo
-  label="Transaction Hash"
-  value="0x1234...5678"
-/>
-
-<TransactionInfo
-  label="Gas Fee"
-  // value is optional, shows "_ _" if not provided
-/>
-
-<TransactionInfo
-  label="Block Number"
-  value={12345678}
-/>`
-    }
-  ) }) }) })
-] });
-export {
-  g as default
-};

package/documentation/TransactionInfoSection-CL6fAjRQ.js

@@ -1,16 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-COp_AWCS.js"),l=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"TransactionInfo",description:"Simple component for displaying transaction information with label and value. Perfect for showing blockchain transaction details.",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-slate-500 via-gray-500 to-zinc-500 rounded-full flex items-center justify-center shadow-lg border border-slate-500/50",children:e.jsx(l.Receipt,{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:"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:"With Value"}),e.jsx(a.TransactionInfo,{label:"Transaction Hash",value:"0x1234...5678"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Without Value"}),e.jsx(a.TransactionInfo,{label:"Gas Fee"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Number Value"}),e.jsx(a.TransactionInfo,{label:"Block Number",value:12345678})]})]})})})}),e.jsx(a.PropPlayground,{componentName:"TransactionInfo",defaultValues:{label:"Transaction Hash",value:"0x1234...5678"},controlOverrides:[{name:"label",type:"text",description:"Label text for the transaction field"},{name:"value",type:"text",description:"Value to display (string or number)"}],includeProps:["label","value"],children:s=>e.jsx("div",{className:"w-full max-w-md",children:e.jsx(a.TransactionInfo,{label:s.label,value:s.value})})}),e.jsx(a.AutoPropsTable,{componentName:"TransactionInfo"}),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 { TransactionInfo } from '@e-burgos/tucu-ui';
-
-<TransactionInfo
-  label="Transaction Hash"
-  value="0x1234...5678"
-/>
-
-<TransactionInfo
-  label="Gas Fee"
-  // value is optional, shows "_ _" if not provided
-/>
-
-<TransactionInfo
-  label="Block Number"
-  value={12345678}
-/>`})})})})]});exports.default=n;

package/documentation/TucuUiLogoSection-BoczvN10.js

@@ -1,26 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-COp_AWCS.js"),o=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const a=()=>e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"TucuUiLogo",description:"The core logo icon component featuring the distinctive double T design with 'ui' text, representing the Tucu UI design system.",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-pink-500 to-rose-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(o.Hexagon,{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 Size"}),e.jsx(s.TucuUiLogo,{})]}),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.TucuUiLogo,{size:60}),e.jsx(s.TucuUiLogo,{size:120}),e.jsx(s.TucuUiLogo,{size:180})]})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"With Custom Classes"}),e.jsx(s.TucuUiLogo,{size:100,className:"opacity-80 hover:opacity-100 transition-opacity"})]})]})})})}),e.jsx(s.PropPlayground,{componentName:"TucuUiLogo",defaultValues:{size:60},excludeProps:["props"],children:i=>e.jsx(s.TucuUiLogo,{...i})}),e.jsx(s.AutoPropsTable,{componentName:"TucuUiLogo"}),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 { TucuUiLogo } from '@e-burgos/tucu-ui';
-
-// Basic usage (default 120x120)
-<TucuUiLogo />
-
-// Custom sizes
-<TucuUiLogo size={60} />
-<TucuUiLogo size={120} />
-<TucuUiLogo size={180} />
-
-// With custom classes
-<TucuUiLogo 
-  size={100} 
-  className="opacity-80 hover:opacity-100 transition-opacity" 
-/>
-
-// With SVG attributes
-<TucuUiLogo 
-  size={80} 
-  className="custom-class"
-  props={{ viewBox: '0 0 240 240' }}
-/>
-
-// The component automatically:
-// - Adapts to light/dark mode
-// - Shows the double T design with "ui" text`})})})})]});exports.default=a;

package/documentation/TucuUiLogoSection-CuIdpQE7.js

@@ -1,85 +0,0 @@
-import { jsxs as s, Fragment as l, jsx as e } from "react/jsx-runtime";
-import { H as r, C as o, a as t, T as a, ah as i, P as m, A as n, c as u } from "../index-DYDFy1df.js";
-import { Hexagon as d } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const w = () => /* @__PURE__ */ s(l, { children: [
-  /* @__PURE__ */ e(
-    r,
-    {
-      title: "TucuUiLogo",
-      description: "The core logo icon component featuring the distinctive double T design with 'ui' text, representing the Tucu UI design system.",
-      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-pink-500 to-rose-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(d, { 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(o, { 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__ */ s("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ s(o, { className: "p-4", children: [
-      /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Default Size" }),
-      /* @__PURE__ */ e(i, {})
-    ] }),
-    /* @__PURE__ */ s(o, { className: "p-4", children: [
-      /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Different Sizes" }),
-      /* @__PURE__ */ s("div", { className: "flex items-center gap-4 flex-wrap", children: [
-        /* @__PURE__ */ e(i, { size: 60 }),
-        /* @__PURE__ */ e(i, { size: 120 }),
-        /* @__PURE__ */ e(i, { size: 180 })
-      ] })
-    ] }),
-    /* @__PURE__ */ s(o, { className: "p-4", children: [
-      /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "With Custom Classes" }),
-      /* @__PURE__ */ e(
-        i,
-        {
-          size: 100,
-          className: "opacity-80 hover:opacity-100 transition-opacity"
-        }
-      )
-    ] })
-  ] }) }) }) }),
-  /* @__PURE__ */ e(
-    m,
-    {
-      componentName: "TucuUiLogo",
-      defaultValues: { size: 60 },
-      excludeProps: ["props"],
-      children: (c) => /* @__PURE__ */ e(i, { ...c })
-    }
-  ),
-  /* @__PURE__ */ e(n, { componentName: "TucuUiLogo" }),
-  /* @__PURE__ */ e(o, { 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(
-    u,
-    {
-      language: "tsx",
-      code: `import { TucuUiLogo } from '@e-burgos/tucu-ui';
-
-// Basic usage (default 120x120)
-<TucuUiLogo />
-
-// Custom sizes
-<TucuUiLogo size={60} />
-<TucuUiLogo size={120} />
-<TucuUiLogo size={180} />
-
-// With custom classes
-<TucuUiLogo 
-  size={100} 
-  className="opacity-80 hover:opacity-100 transition-opacity" 
-/>
-
-// With SVG attributes
-<TucuUiLogo 
-  size={80} 
-  className="custom-class"
-  props={{ viewBox: '0 0 240 240' }}
-/>
-
-// The component automatically:
-// - Adapts to light/dark mode
-// - Shows the double T design with "ui" text`
-    }
-  ) }) }) })
-] });
-export {
-  w as default
-};

package/documentation/TypographySection--uRpR5g0.js

@@ -1,33 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-COp_AWCS.js"),o=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Typography",description:`A comprehensive typography component system with semantic HTML tags
-          and predefined text styles.`,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-slate-600 to-gray-700 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(o.Type,{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:"space-y-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Headings"}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(a.Typography,{tag:"h1",children:"Heading 1"}),e.jsx(a.Typography,{tag:"h2",children:"Heading 2"}),e.jsx(a.Typography,{tag:"h3",children:"Heading 3"}),e.jsx(a.Typography,{tag:"h4",children:"Heading 4"}),e.jsx(a.Typography,{tag:"h5",children:"Heading 5"}),e.jsx(a.Typography,{tag:"h6",children:"Heading 6"})]})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Text Variants"}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(a.Typography,{tag:"headline",children:"Headline Text"}),e.jsx(a.Typography,{tag:"body",children:"Body Text"}),e.jsx(a.Typography,{tag:"label-1",children:"Label 1"}),e.jsx(a.Typography,{tag:"label-2",children:"Label 2"}),e.jsx(a.Typography,{tag:"caption",children:"Caption Text"}),e.jsx(a.Typography,{tag:"legal",children:"Legal Text"})]})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Semantic Elements"}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(a.Typography,{tag:"p",children:"Paragraph text"}),e.jsx(a.Typography,{tag:"strong",children:"Strong text"}),e.jsx(a.Typography,{tag:"em",children:"Emphasized text"}),e.jsx(a.Typography,{tag:"code",children:"Code text"}),e.jsx(a.Typography,{tag:"pre",children:"Preformatted text"})]})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Tooltip"}),e.jsxs("div",{className:"flex flex-wrap gap-4 items-center",children:[e.jsx(a.Typography,{tag:"span",tooltip:"This is an abbreviation",tooltipPlacement:"top",className:"underline decoration-dotted cursor-help",children:"Hover this text"}),e.jsx(a.Typography,{tag:"strong",tooltip:"Important information",tooltipPlacement:"right",tooltipColor:"light",children:"Bold with tooltip"}),e.jsx(a.Typography,{tag:"code",tooltip:"Copied!",tooltipPlacement:"bottom",children:"Code with tooltip"})]})]})]})})})}),e.jsx(a.PropPlayground,{componentName:"Typography",defaultValues:{tag:"p",color:"default"},excludeProps:["tooltip","tooltipArrow","tooltipColor","tooltipPlacement","title"],children:t=>e.jsx(a.Typography,{...t,children:"The quick brown fox jumps over the lazy dog."})}),e.jsx(a.AutoPropsTable,{componentName:"Typography"}),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 { Typography } from '@e-burgos/tucu-ui';
-
-// Headings
-<Typography tag="h1">Heading 1</Typography>
-<Typography tag="h2">Heading 2</Typography>
-<Typography tag="h3">Heading 3</Typography>
-
-// Text variants
-<Typography tag="headline">Headline Text</Typography>
-<Typography tag="body">Body Text</Typography>
-<Typography tag="label-1">Label 1</Typography>
-<Typography tag="label-2">Label 2</Typography>
-<Typography tag="caption">Caption Text</Typography>
-
-// Semantic elements
-<Typography tag="p">Paragraph text</Typography>
-<Typography tag="strong">Strong text</Typography>
-<Typography tag="em">Emphasized text</Typography>
-<Typography tag="code">Code text</Typography>
-
-// With custom className
-<Typography tag="h1" className="text-blue-500">
-  Custom Styled Heading
-</Typography>
-
-// With tooltip
-<Typography tag="span" tooltip="Extra info" tooltipPlacement="top">
-  Hover me
-</Typography>
-<Typography tag="strong" tooltip="Details" tooltipPlacement="right" tooltipColor="light">
-  Bold with tooltip
-</Typography>`})})})})]});exports.default=r;