@e-burgos/tucu-ui 1.1.1 → 2.0.0

package/TopupButtonSection-DFl6wlGA.mjs

@@ -0,0 +1,145 @@
+import { jsxs as a, Fragment as n, jsx as e } from "react/jsx-runtime";
+import { T as t, C as l, a as o, t as c, B as r, c as d } from "./index-Hq6IUBmn.mjs";
+import { Plus as p, CreditCard as m, Wallet as u } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const B = () => /* @__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: "TopupButton" }),
+    /* @__PURE__ */ e(
+      t,
+      {
+        tag: "p",
+        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        children: "A specialized button component for top-up or recharge actions, with support for icons and links."
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+    /* @__PURE__ */ a(l, { className: "p-4", children: [
+      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Basic Topup Button" }),
+      /* @__PURE__ */ e(c, { label: "Add Funds" })
+    ] }),
+    /* @__PURE__ */ a(l, { className: "p-4", children: [
+      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "With Icon" }),
+      /* @__PURE__ */ e(
+        c,
+        {
+          label: "Top Up Account",
+          icon: /* @__PURE__ */ e(p, { className: "w-4 h-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a(l, { className: "p-4", children: [
+      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "With Link" }),
+      /* @__PURE__ */ e(
+        c,
+        {
+          label: "Recharge Now",
+          href: "/topup",
+          icon: /* @__PURE__ */ e(m, { className: "w-4 h-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a(l, { className: "p-4", children: [
+      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "With onClick Handler" }),
+      /* @__PURE__ */ e(
+        c,
+        {
+          label: "Add Balance",
+          icon: /* @__PURE__ */ e(u, { className: "w-4 h-4" }),
+          onClick: () => console.log("Topup clicked")
+        }
+      )
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(r, { columns: [
+    {
+      key: "prop",
+      label: "Prop",
+      render: (s) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(s) })
+    },
+    {
+      key: "type",
+      label: "Type",
+      render: (s) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(s) })
+    },
+    {
+      key: "default",
+      label: "Default",
+      render: (s) => {
+        const i = String(s);
+        return i === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: i });
+      }
+    },
+    {
+      key: "description",
+      label: "Description"
+    }
+  ], data: [
+    {
+      prop: "label",
+      type: "string",
+      default: "required",
+      description: "Button label text"
+    },
+    {
+      prop: "icon",
+      type: "React.ReactNode",
+      default: "-",
+      description: "Optional icon to display before the label"
+    },
+    {
+      prop: "href",
+      type: "string",
+      default: "-",
+      description: "Optional link URL"
+    },
+    {
+      prop: "className",
+      type: "string",
+      default: "-",
+      description: "Additional CSS classes"
+    },
+    {
+      prop: "onClick",
+      type: "() => void",
+      default: "-",
+      description: "Click handler function"
+    }
+  ] }) }) }) }),
+  /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    d,
+    {
+      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 {
+  B as default
+};

package/TransactionInfoSection-2IX3m2mI.js

@@ -0,0 +1,16 @@
+"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 n=()=>{const l=[{key:"prop",label:"Prop",render:s=>e.jsx("code",{className:"text-xs text-brand",children:String(s)})},{key:"type",label:"Type",render:s=>e.jsx("code",{className:"text-xs",children:String(s)})},{key:"default",label:"Default",render:s=>{const r=String(s);return r==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:r})}},{key:"description",label:"Description"}],t=[{prop:"label",type:"string",default:"required",description:"Label text for the transaction field"},{prop:"value",type:"string | number",default:"-",description:"Transaction value to display"},{prop:"className",type:"string",default:"''",description:"Custom 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:"TransactionInfo"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Simple component for displaying transaction information with label and value."})]}),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.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:t})})})}),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/TransactionInfoSection-DQfuXrqZ.mjs

@@ -0,0 +1,113 @@
+import { jsxs as a, Fragment as o, jsx as e } from "react/jsx-runtime";
+import { T as t, C as l, a as r, j as n, B as c, c as d } from "./index-Hq6IUBmn.mjs";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const g = () => /* @__PURE__ */ a(o, { 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: "TransactionInfo" }),
+    /* @__PURE__ */ e(
+      t,
+      {
+        tag: "p",
+        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        children: "Simple component for displaying transaction information with label and value."
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e(l, { 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: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+    /* @__PURE__ */ a(l, { className: "p-4", children: [
+      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "With Value" }),
+      /* @__PURE__ */ e(
+        n,
+        {
+          label: "Transaction Hash",
+          value: "0x1234...5678"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a(l, { className: "p-4", children: [
+      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Without Value" }),
+      /* @__PURE__ */ e(n, { label: "Gas Fee" })
+    ] }),
+    /* @__PURE__ */ a(l, { className: "p-4", children: [
+      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Number Value" }),
+      /* @__PURE__ */ e(n, { label: "Block Number", value: 12345678 })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(r, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    c,
+    {
+      columns: [
+        {
+          key: "prop",
+          label: "Prop",
+          render: (s) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(s) })
+        },
+        {
+          key: "type",
+          label: "Type",
+          render: (s) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(s) })
+        },
+        {
+          key: "default",
+          label: "Default",
+          render: (s) => {
+            const i = String(s);
+            return i === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: i });
+          }
+        },
+        {
+          key: "description",
+          label: "Description"
+        }
+      ],
+      data: [
+        {
+          prop: "label",
+          type: "string",
+          default: "required",
+          description: "Label text for the transaction field"
+        },
+        {
+          prop: "value",
+          type: "string | number",
+          default: "-",
+          description: "Transaction value to display"
+        },
+        {
+          prop: "className",
+          type: "string",
+          default: "''",
+          description: "Custom CSS classes"
+        }
+      ]
+    }
+  ) }) }) }),
+  /* @__PURE__ */ e(l, { 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(
+    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/TucuUiLogoSection-BHibuIVc.js

@@ -0,0 +1,26 @@
+"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 o=()=>{const a=[{key:"prop",label:"Prop",render:t=>e.jsx("code",{className:"text-xs text-brand",children:String(t)})},{key:"type",label:"Type",render:t=>e.jsx("code",{className:"text-xs",children:String(t)})},{key:"default",label:"Default",render:t=>{const i=String(t);return i==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:i})}},{key:"description",label:"Description"}],r=[{prop:"size",type:"number | string",default:"120",description:"Size of the logo icon"},{prop:"className",type:"string",default:"''",description:"Additional CSS classes"},{prop:"props",type:"React.SVGAttributes<SVGElement>",default:"-",description:"Additional SVG attributes"}];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:"TucuUiLogo"}),e.jsx(s.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:'The core logo icon component featuring the distinctive double T design with "ui" text, representing the Tucu UI design system.'})]}),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.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.BasicTable,{columns:a,data:r})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.CodeBlock,{language:"tsx",code:`import { 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=o;

package/TucuUiLogoSection-D5VLGORL.mjs

@@ -0,0 +1,121 @@
+import { jsxs as s, Fragment as r, jsx as e } from "react/jsx-runtime";
+import { T as i, C as t, a as o, a2 as l, B as n, c as d } from "./index-Hq6IUBmn.mjs";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const y = () => /* @__PURE__ */ s(r, { children: [
+  /* @__PURE__ */ s("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ e(i, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "TucuUiLogo" }),
+    /* @__PURE__ */ e(
+      i,
+      {
+        tag: "p",
+        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        children: 'The core logo icon component featuring the distinctive double T design with "ui" text, representing the Tucu UI design system.'
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ s("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ s(t, { className: "p-4", children: [
+      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Default Size" }),
+      /* @__PURE__ */ e(l, {})
+    ] }),
+    /* @__PURE__ */ s(t, { className: "p-4", children: [
+      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Different Sizes" }),
+      /* @__PURE__ */ s("div", { className: "flex items-center gap-4 flex-wrap", children: [
+        /* @__PURE__ */ e(l, { size: 60 }),
+        /* @__PURE__ */ e(l, { size: 120 }),
+        /* @__PURE__ */ e(l, { size: 180 })
+      ] })
+    ] }),
+    /* @__PURE__ */ s(t, { className: "p-4", children: [
+      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "With Custom Classes" }),
+      /* @__PURE__ */ e(
+        l,
+        {
+          size: 100,
+          className: "opacity-80 hover:opacity-100 transition-opacity"
+        }
+      )
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(n, { 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 c = String(a);
+        return c === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: c });
+      }
+    },
+    {
+      key: "description",
+      label: "Description"
+    }
+  ], data: [
+    {
+      prop: "size",
+      type: "number | string",
+      default: "120",
+      description: "Size of the logo icon"
+    },
+    {
+      prop: "className",
+      type: "string",
+      default: "''",
+      description: "Additional CSS classes"
+    },
+    {
+      prop: "props",
+      type: "React.SVGAttributes<SVGElement>",
+      default: "-",
+      description: "Additional SVG attributes"
+    }
+  ] }) }) }) }),
+  /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    d,
+    {
+      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 {
+  y as default
+};

package/TypographySection-CkBNo8uk.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("./index-CjRk4ezu.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>{const l=[{tag:"headline",label:"Headline",category:"Tucu UI Tokens"},{tag:"body",label:"Body",category:"Tucu UI Tokens"},{tag:"label-1",label:"Label 1",category:"Tucu UI Tokens"},{tag:"label-2",label:"Label 2",category:"Tucu UI Tokens"},{tag:"caption",label:"Caption",category:"Tucu UI Tokens"},{tag:"legal",label:"Legal",category:"Tucu UI Tokens"},{tag:"h1",label:"Heading 1 (h1)",category:"HTML Tags"},{tag:"h2",label:"Heading 2 (h2)",category:"HTML Tags"},{tag:"h3",label:"Heading 3 (h3)",category:"HTML Tags"},{tag:"h4",label:"Heading 4 (h4)",category:"HTML Tags"},{tag:"h5",label:"Heading 5 (h5)",category:"HTML Tags"},{tag:"h6",label:"Heading 6 (h6)",category:"HTML Tags"},{tag:"p",label:"Paragraph (p)",category:"HTML Tags"},{tag:"i",label:"Italic (i)",category:"HTML Tags"},{tag:"b",label:"Bold (b)",category:"HTML Tags"},{tag:"strong",label:"Strong",category:"HTML Tags"},{tag:"em",label:"Emphasis (em)",category:"HTML Tags"},{tag:"small",label:"Small",category:"HTML Tags"},{tag:"q",label:"Quote (q)",category:"HTML Tags"},{tag:"blockquote",label:"Blockquote",category:"HTML Tags"},{tag:"code",label:"Code",category:"HTML Tags"},{tag:"pre",label:"Preformatted (pre)",category:"HTML Tags"},{tag:"kbd",label:"Keyboard (kbd)",category:"HTML Tags"},{tag:"mark",label:"Mark",category:"HTML Tags"},{tag:"del",label:"Deleted (del)",category:"HTML Tags"},{tag:"sub",label:"Subscript (sub)",category:"HTML Tags"},{tag:"sup",label:"Superscript (sup)",category:"HTML Tags"},{tag:"abbr",label:"Abbreviation (abbr)",category:"HTML Tags"},{tag:"span",label:"Span",category:"HTML Tags"}],s=[{value:"default",label:"Default"},{value:"primary",label:"Primary"},{value:"secondary",label:"Secondary"},{value:"dark",label:"Dark"},{value:"light",label:"Light"},{value:"muted",label:"Muted"},{value:"success",label:"Success"},{value:"warning",label:"Warning"},{value:"error",label:"Error"}],t=[{value:"default",label:"Default (Sans)"},{value:"mono",label:"Mono"}];return a.jsxs(a.Fragment,{children:[a.jsxs("div",{className:"text-center space-y-4",children:[a.jsx(e.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Typography"}),a.jsx(e.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Typography component with all available tags, colors, and font families"})]}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Tucu UI Tokens - Type Scale",className:"mt-2 mb-2",children:a.jsxs("div",{className:"w-full space-y-8 p-4 sm:p-6",children:[a.jsx(e.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-6",children:"Hierarchical typography tokens designed for consistent text styling across the design system."}),a.jsx("div",{className:"border border-gray-200 dark:border-gray-700 rounded-lg p-6 bg-light-dark",children:a.jsx("div",{className:"space-y-6",children:l.filter(r=>r.category==="Tucu UI Tokens").map(r=>a.jsxs("div",{className:"flex flex-col md:flex-row md:items-center md:justify-between gap-4 pb-6 border-b border-gray-200 dark:border-gray-700 last:border-0 last:pb-0",children:[a.jsxs("div",{className:"flex-1 space-y-2",children:[a.jsxs("div",{className:"flex items-center gap-3",children:[a.jsx(e.Typography,{tag:r.tag,children:r.label}),a.jsx(e.Badge,{variant:"outline",className:"text-xs font-mono",children:r.tag})]}),a.jsxs(e.Typography,{tag:"caption",className:"text-muted",children:[r.tag==="headline"&&"Main headlines and hero text",r.tag==="body"&&"Primary body text and paragraphs",r.tag==="label-1"&&"Primary labels and form fields",r.tag==="label-2"&&"Secondary labels and smaller text",r.tag==="caption"&&"Image captions and metadata",r.tag==="legal"&&"Legal text, disclaimers, and fine print"]})]}),a.jsx("div",{className:"md:w-1/2",children:a.jsxs(e.Typography,{tag:r.tag,children:[r.tag==="headline"&&"The quick brown fox jumps over the lazy dog",r.tag==="body"&&"The quick brown fox jumps over the lazy dog. This is body text used for paragraphs and main content.",r.tag==="label-1"&&"Label Text",r.tag==="label-2"&&"Small Label",r.tag==="caption"&&"Image caption or supporting text",r.tag==="legal"&&"Legal disclaimer text"]})})]},r.tag))})})]})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"HTML Tags",className:"mt-2 mb-2",children:a.jsxs("div",{className:"w-full space-y-8 p-4 sm:p-6",children:[a.jsx(e.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-6",children:"Standard HTML semantic tags with Tucu UI styling."}),a.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",children:l.filter(r=>r.category==="HTML Tags").map(r=>a.jsxs("div",{className:"border border-gray-200 dark:border-gray-700 rounded-lg p-4 space-y-3",children:[a.jsxs("div",{className:"space-y-1",children:[a.jsx(e.Typography,{tag:"h4",children:r.label}),a.jsxs(e.Typography,{tag:"h4",className:"text-muted break-all text-xs",children:['tag="',r.tag,'"']})]}),a.jsx("div",{className:"min-h-[60px] flex items-start overflow-hidden",children:a.jsx(e.Typography,{className:r.tag==="pre"||r.tag==="code"?"overflow-wrap-anywhere whitespace-pre-wrap w-full":"overflow-wrap-anywhere",tag:r.tag,...r.tag==="abbr"&&{title:"Abbreviation example"},children:r.tag==="pre"||r.tag==="code"?'const example = "The quick brown fox jumps over the lazy dog";':"The quick brown fox jumps over the lazy dog"})})]},r.tag))})]})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Typography Colors",className:"mt-2 mb-2",children:a.jsxs("div",{className:"w-full space-y-8 p-4 sm:p-6",children:[a.jsx(e.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-6",children:"Available color props for the Typography component."}),a.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",children:s.map(r=>a.jsxs("div",{className:"border border-gray-200 dark:border-gray-700 rounded-lg p-4 space-y-3",children:[a.jsxs("div",{className:"space-y-1",children:[a.jsx(e.Typography,{tag:"h4",children:r.label}),a.jsxs(e.Typography,{tag:"h4",className:"text-muted break-all text-xs",children:['color="',r.value,'"']})]}),a.jsx("div",{className:"min-h-[40px] flex items-center",children:a.jsx(e.Typography,{tag:"p",color:r.value,children:"The quick brown fox jumps over the lazy dog"})})]},r.value))})]})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Typography Font Families",className:"mt-2 mb-2",children:a.jsxs("div",{className:"w-full space-y-8 p-4 sm:p-6",children:[a.jsx(e.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-6",children:"Available fontFamily props for the Typography component."}),a.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:t.map(r=>a.jsxs("div",{className:"border border-gray-200 dark:border-gray-700 rounded-lg p-4 space-y-3",children:[a.jsxs("div",{className:"space-y-1",children:[a.jsx(e.Typography,{tag:"h4",children:r.label}),a.jsxs(e.Typography,{tag:"h4",className:"text-muted break-all text-xs",children:['fontFamily="',r.value,'"']})]}),a.jsx("div",{className:"min-h-[40px] flex items-center",children:a.jsx(e.Typography,{tag:"p",fontFamily:r.value,children:"The quick brown fox jumps over the lazy dog"})})]},r.value))})]})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Combined Examples",className:"mt-2 mb-2",children:a.jsxs("div",{className:"w-full space-y-8 p-4 sm:p-6",children:[a.jsx(e.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-6",children:"Examples combining tags, colors, and font families."}),a.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",children:[a.jsxs("div",{className:"border border-gray-200 dark:border-gray-700 rounded-lg p-4 space-y-3",children:[a.jsx(e.Typography,{tag:"h4",className:"text-xs text-muted",children:"Headline + Primary + Mono"}),a.jsx(e.Typography,{tag:"headline",color:"primary",fontFamily:"mono",children:"The quick brown fox"})]}),a.jsxs("div",{className:"border border-gray-200 dark:border-gray-700 rounded-lg p-4 space-y-3",children:[a.jsx(e.Typography,{tag:"h4",className:"text-xs text-muted",children:"Body + Success"}),a.jsx(e.Typography,{tag:"body",color:"success",children:"The quick brown fox jumps over the lazy dog"})]}),a.jsxs("div",{className:"border border-gray-200 dark:border-gray-700 rounded-lg p-4 space-y-3",children:[a.jsx(e.Typography,{tag:"h4",className:"text-xs text-muted",children:"Label 1 + Warning"}),a.jsx(e.Typography,{tag:"label-1",color:"warning",children:"The quick brown fox"})]}),a.jsxs("div",{className:"border border-gray-200 dark:border-gray-700 rounded-lg p-4 space-y-3",children:[a.jsx(e.Typography,{tag:"h4",className:"text-xs text-muted",children:"Code + Error + Mono"}),a.jsx(e.Typography,{tag:"code",color:"error",fontFamily:"mono",children:'const example = "Hello World";'})]}),a.jsxs("div",{className:"border border-gray-200 dark:border-gray-700 rounded-lg p-4 space-y-3",children:[a.jsx(e.Typography,{tag:"h4",className:"text-xs text-muted",children:"Caption + Muted"}),a.jsx(e.Typography,{tag:"caption",color:"muted",children:"The quick brown fox jumps over the lazy dog"})]}),a.jsxs("div",{className:"border border-gray-200 dark:border-gray-700 rounded-lg p-4 space-y-3",children:[a.jsx(e.Typography,{tag:"h4",className:"text-xs text-muted",children:"H2 + Secondary"}),a.jsx(e.Typography,{tag:"h2",color:"secondary",children:"The quick brown fox"})]})]})]})})})]})};exports.default=o;

package/TypographySection-DszlzyIX.mjs

@@ -0,0 +1,129 @@
+import { jsxs as t, Fragment as s, jsx as e } from "react/jsx-runtime";
+import { T as a, C as r, a as p, B as d, c as n } from "./index-Hq6IUBmn.mjs";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const N = () => /* @__PURE__ */ t(s, { children: [
+  /* @__PURE__ */ t("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ e(a, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Typography" }),
+    /* @__PURE__ */ e(
+      a,
+      {
+        tag: "p",
+        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        children: "A comprehensive typography component system with semantic HTML tags and predefined text styles."
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(p, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ t(r, { className: "p-4", children: [
+      /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Headings" }),
+      /* @__PURE__ */ t("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ e(a, { tag: "h1", children: "Heading 1" }),
+        /* @__PURE__ */ e(a, { tag: "h2", children: "Heading 2" }),
+        /* @__PURE__ */ e(a, { tag: "h3", children: "Heading 3" }),
+        /* @__PURE__ */ e(a, { tag: "h4", children: "Heading 4" }),
+        /* @__PURE__ */ e(a, { tag: "h5", children: "Heading 5" }),
+        /* @__PURE__ */ e(a, { tag: "h6", children: "Heading 6" })
+      ] })
+    ] }),
+    /* @__PURE__ */ t(r, { className: "p-4", children: [
+      /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Text Variants" }),
+      /* @__PURE__ */ t("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ e(a, { tag: "headline", children: "Headline Text" }),
+        /* @__PURE__ */ e(a, { tag: "body", children: "Body Text" }),
+        /* @__PURE__ */ e(a, { tag: "label-1", children: "Label 1" }),
+        /* @__PURE__ */ e(a, { tag: "h5", children: "Label 2" }),
+        /* @__PURE__ */ e(a, { tag: "caption", children: "Caption Text" }),
+        /* @__PURE__ */ e(a, { tag: "legal", children: "Legal Text" })
+      ] })
+    ] }),
+    /* @__PURE__ */ t(r, { className: "p-4", children: [
+      /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Semantic Elements" }),
+      /* @__PURE__ */ t("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ e(a, { tag: "p", children: "Paragraph text" }),
+        /* @__PURE__ */ e(a, { tag: "strong", children: "Strong text" }),
+        /* @__PURE__ */ e(a, { tag: "em", children: "Emphasized text" }),
+        /* @__PURE__ */ e(a, { tag: "code", children: "Code text" }),
+        /* @__PURE__ */ e(a, { tag: "pre", children: "Preformatted text" })
+      ] })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(p, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(d, { columns: [
+    {
+      key: "prop",
+      label: "Prop",
+      render: (l) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(l) })
+    },
+    {
+      key: "type",
+      label: "Type",
+      render: (l) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(l) })
+    },
+    {
+      key: "default",
+      label: "Default",
+      render: (l) => {
+        const i = String(l);
+        return i === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: i });
+      }
+    },
+    {
+      key: "description",
+      label: "Description"
+    }
+  ], data: [
+    {
+      prop: "tag",
+      type: "string",
+      default: "required",
+      description: "HTML tag or typography variant to render"
+    },
+    {
+      prop: "children",
+      type: "React.ReactNode",
+      default: "required",
+      description: "Content to display"
+    },
+    {
+      prop: "className",
+      type: "string",
+      default: "-",
+      description: "Additional CSS classes"
+    }
+  ] }) }) }) }),
+  /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(p, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    n,
+    {
+      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="h5">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>`
+    }
+  ) }) }) })
+] });
+export {
+  N as default
+};

package/TypographySection-Dv7RJSzI.js

@@ -0,0 +1,24 @@
+"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 l=()=>{const s=[{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 t=String(r);return t==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:t})}},{key:"description",label:"Description"}],p=[{prop:"tag",type:"string",default:"required",description:"HTML tag or typography variant to render"},{prop:"children",type:"React.ReactNode",default:"required",description:"Content to display"},{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:"Typography"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A comprehensive typography component system with semantic HTML tags and predefined text styles."})]}),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:"h5",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.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:s,data:p})})})}),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="h5">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>`})})})})]})};exports.default=l;