@e-burgos/tucu-ui 2.0.7 → 2.0.9

package/documentation/{TypographySection-CS29TD-z.js → TypographySection-BPidPkKl.js}

@@ -1,59 +1,57 @@
-import { jsxs as t, Fragment as r, jsx as a } from "react/jsx-runtime";
-import { T as e, C as o, a as l, P as i, A as h, c as n } from "../index-B919yoKU.js";
-import "lucide-react";
+import { jsxs as t, Fragment as i, jsx as e } from "react/jsx-runtime";
+import { H as p, C as o, a as l, T as a, P as h, A as n, c as d } from "../index-lfg6LZ1p.js";
+import { Type as g } from "lucide-react";
 import "react-router-dom";
 import "react";
 import "react-dom";
-const T = () => /* @__PURE__ */ t(r, { children: [
-  /* @__PURE__ */ t("div", { className: "text-center space-y-4", children: [
-    /* @__PURE__ */ a(e, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Typography" }),
-    /* @__PURE__ */ a(
-      e,
-      {
-        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__ */ a(o, { className: "overflow-hidden", children: /* @__PURE__ */ a(l, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "space-y-4", children: [
+const N = () => /* @__PURE__ */ t(i, { children: [
+  /* @__PURE__ */ e(
+    p,
+    {
+      title: "Typography",
+      description: `A comprehensive typography component system with semantic HTML tags
+          and predefined text styles.`,
+      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-slate-600 to-gray-700 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(g, { 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(l, { 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(o, { className: "p-4", children: [
-      /* @__PURE__ */ a(e, { tag: "h5", className: "mb-3", children: "Headings" }),
+      /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Headings" }),
       /* @__PURE__ */ t("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ a(e, { tag: "h1", children: "Heading 1" }),
-        /* @__PURE__ */ a(e, { tag: "h2", children: "Heading 2" }),
-        /* @__PURE__ */ a(e, { tag: "h3", children: "Heading 3" }),
-        /* @__PURE__ */ a(e, { tag: "h4", children: "Heading 4" }),
-        /* @__PURE__ */ a(e, { tag: "h5", children: "Heading 5" }),
-        /* @__PURE__ */ a(e, { tag: "h6", children: "Heading 6" })
+        /* @__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(o, { className: "p-4", children: [
-      /* @__PURE__ */ a(e, { tag: "h5", className: "mb-3", children: "Text Variants" }),
+      /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Text Variants" }),
       /* @__PURE__ */ t("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ a(e, { tag: "headline", children: "Headline Text" }),
-        /* @__PURE__ */ a(e, { tag: "body", children: "Body Text" }),
-        /* @__PURE__ */ a(e, { tag: "label-1", children: "Label 1" }),
-        /* @__PURE__ */ a(e, { tag: "h5", children: "Label 2" }),
-        /* @__PURE__ */ a(e, { tag: "caption", children: "Caption Text" }),
-        /* @__PURE__ */ a(e, { tag: "legal", children: "Legal Text" })
+        /* @__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: "label-2", children: "Label 2" }),
+        /* @__PURE__ */ e(a, { tag: "caption", children: "Caption Text" }),
+        /* @__PURE__ */ e(a, { tag: "legal", children: "Legal Text" })
       ] })
     ] }),
     /* @__PURE__ */ t(o, { className: "p-4", children: [
-      /* @__PURE__ */ a(e, { tag: "h5", className: "mb-3", children: "Semantic Elements" }),
+      /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Semantic Elements" }),
       /* @__PURE__ */ t("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ a(e, { tag: "p", children: "Paragraph text" }),
-        /* @__PURE__ */ a(e, { tag: "strong", children: "Strong text" }),
-        /* @__PURE__ */ a(e, { tag: "em", children: "Emphasized text" }),
-        /* @__PURE__ */ a(e, { tag: "code", children: "Code text" }),
-        /* @__PURE__ */ a(e, { tag: "pre", children: "Preformatted text" })
+        /* @__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__ */ t(o, { className: "p-4", children: [
-      /* @__PURE__ */ a(e, { tag: "h5", className: "mb-3", children: "With Tooltip" }),
+      /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "With Tooltip" }),
       /* @__PURE__ */ t("div", { className: "flex flex-wrap gap-4 items-center", children: [
-        /* @__PURE__ */ a(
-          e,
+        /* @__PURE__ */ e(
+          a,
           {
             tag: "span",
             tooltip: "This is an abbreviation",
@@ -62,8 +60,8 @@ const T = () => /* @__PURE__ */ t(r, { children: [
             children: "Hover this text"
           }
         ),
-        /* @__PURE__ */ a(
-          e,
+        /* @__PURE__ */ e(
+          a,
           {
             tag: "strong",
             tooltip: "Important information",
@@ -72,8 +70,8 @@ const T = () => /* @__PURE__ */ t(r, { children: [
             children: "Bold with tooltip"
           }
         ),
-        /* @__PURE__ */ a(
-          e,
+        /* @__PURE__ */ e(
+          a,
           {
             tag: "code",
             tooltip: "Copied!",
@@ -84,8 +82,8 @@ const T = () => /* @__PURE__ */ t(r, { children: [
       ] })
     ] })
   ] }) }) }) }),
-  /* @__PURE__ */ a(
-    i,
+  /* @__PURE__ */ e(
+    h,
     {
       componentName: "Typography",
       defaultValues: { tag: "p", color: "default" },
@@ -96,12 +94,12 @@ const T = () => /* @__PURE__ */ t(r, { children: [
         "tooltipPlacement",
         "title"
       ],
-      children: (p) => /* @__PURE__ */ a(e, { ...p, children: "The quick brown fox jumps over the lazy dog." })
+      children: (r) => /* @__PURE__ */ e(a, { ...r, children: "The quick brown fox jumps over the lazy dog." })
     }
   ),
-  /* @__PURE__ */ a(h, { componentName: "Typography" }),
-  /* @__PURE__ */ a(o, { className: "overflow-hidden", children: /* @__PURE__ */ a(l, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
-    n,
+  /* @__PURE__ */ e(n, { componentName: "Typography" }),
+  /* @__PURE__ */ e(o, { 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,
     {
       language: "tsx",
       code: `import { Typography } from '@e-burgos/tucu-ui';
@@ -115,7 +113,7 @@ const T = () => /* @__PURE__ */ t(r, { children: [
 <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="label-2">Label 2</Typography>
 <Typography tag="caption">Caption Text</Typography>
 
 // Semantic elements
@@ -140,5 +138,5 @@ const T = () => /* @__PURE__ */ t(r, { children: [
   ) }) }) })
 ] });
 export {
-  T as default
+  N as default
 };

package/documentation/TypographySection-BVa4hd_u.js

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

package/documentation/TypographySection-Co79YcZL.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),r=require("../index-BaGqriuz.js"),o=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const d=()=>{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("div",{className:"space-y-8 max-w-6xl sm:space-y-12 w-full mx-auto px-4 sm:px-6 lg:px-8 relative pt-8 lg:pt-12",children:[a.jsx(r.HeroCard,{title:"Typography",description:"Typography component with all available tags, colors, and font families.",icon:a.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-sky-500 rounded-full flex items-center justify-center shadow-lg",children:a.jsx(o.Type,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),a.jsx(r.CardContainer,{className:"overflow-hidden",children:a.jsx(r.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(r.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(e=>e.category==="Tucu UI Tokens").map(e=>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(r.Typography,{tag:e.tag,children:e.label}),a.jsx(r.Badge,{variant:"outline",className:"text-xs font-mono",children:e.tag})]}),a.jsxs(r.Typography,{tag:"caption",className:"text-muted",children:[e.tag==="headline"&&"Main headlines and hero text",e.tag==="body"&&"Primary body text and paragraphs",e.tag==="label-1"&&"Primary labels and form fields",e.tag==="label-2"&&"Secondary labels and smaller text",e.tag==="caption"&&"Image captions and metadata",e.tag==="legal"&&"Legal text, disclaimers, and fine print"]})]}),a.jsx("div",{className:"md:w-1/2",children:a.jsxs(r.Typography,{tag:e.tag,children:[e.tag==="headline"&&"The quick brown fox jumps over the lazy dog",e.tag==="body"&&"The quick brown fox jumps over the lazy dog. This is body text used for paragraphs and main content.",e.tag==="label-1"&&"Label Text",e.tag==="label-2"&&"Small Label",e.tag==="caption"&&"Image caption or supporting text",e.tag==="legal"&&"Legal disclaimer text"]})})]},e.tag))})})]})})}),a.jsx(r.CardContainer,{className:"overflow-hidden",children:a.jsx(r.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(r.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(e=>e.category==="HTML Tags").map(e=>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(r.Typography,{tag:"h4",children:e.label}),a.jsxs(r.Typography,{tag:"h4",className:"text-muted break-all text-xs",children:['tag="',e.tag,'"']})]}),a.jsx("div",{className:"min-h-[60px] flex items-start overflow-hidden",children:a.jsx(r.Typography,{className:e.tag==="pre"||e.tag==="code"?"overflow-wrap-anywhere whitespace-pre-wrap w-full":"overflow-wrap-anywhere",tag:e.tag,...e.tag==="abbr"&&{title:"Abbreviation example"},children:e.tag==="pre"||e.tag==="code"?'const example = "The quick brown fox jumps over the lazy dog";':"The quick brown fox jumps over the lazy dog"})})]},e.tag))})]})})}),a.jsx(r.CardContainer,{className:"overflow-hidden",children:a.jsx(r.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(r.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(e=>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(r.Typography,{tag:"h4",children:e.label}),a.jsxs(r.Typography,{tag:"h4",className:"text-muted break-all text-xs",children:['color="',e.value,'"']})]}),a.jsx("div",{className:"min-h-[40px] flex items-center",children:a.jsx(r.Typography,{tag:"p",color:e.value,children:"The quick brown fox jumps over the lazy dog"})})]},e.value))})]})})}),a.jsx(r.CardContainer,{className:"overflow-hidden",children:a.jsx(r.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(r.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(e=>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(r.Typography,{tag:"h4",children:e.label}),a.jsxs(r.Typography,{tag:"h4",className:"text-muted break-all text-xs",children:['fontFamily="',e.value,'"']})]}),a.jsx("div",{className:"min-h-[40px] flex items-center",children:a.jsx(r.Typography,{tag:"p",fontFamily:e.value,children:"The quick brown fox jumps over the lazy dog"})})]},e.value))})]})})}),a.jsx(r.CardContainer,{className:"overflow-hidden",children:a.jsx(r.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(r.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(r.Typography,{tag:"h4",className:"text-xs text-muted",children:"Headline + Primary + Mono"}),a.jsx(r.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(r.Typography,{tag:"h4",className:"text-xs text-muted",children:"Body + Success"}),a.jsx(r.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(r.Typography,{tag:"h4",className:"text-xs text-muted",children:"Label 1 + Warning"}),a.jsx(r.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(r.Typography,{tag:"h4",className:"text-xs text-muted",children:"Code + Error + Mono"}),a.jsx(r.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(r.Typography,{tag:"h4",className:"text-xs text-muted",children:"Caption + Muted"}),a.jsx(r.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(r.Typography,{tag:"h4",className:"text-xs text-muted",children:"H2 + Secondary"}),a.jsx(r.Typography,{tag:"h2",color:"secondary",children:"The quick brown fox"})]})]})]})})})]})};exports.default=d;

package/documentation/{TypographySection-BYKjiWVg.js → TypographySection-Ct3zNnpW.js}

@@ -1,10 +1,10 @@
-import { jsxs as l, Fragment as g, jsx as a } from "react/jsx-runtime";
-import { T as r, C as t, a as d, J as i } from "../index-B919yoKU.js";
-import "lucide-react";
+import { jsxs as l, jsx as a } from "react/jsx-runtime";
+import { H as g, C as t, a as d, T as r, K as i } from "../index-lfg6LZ1p.js";
+import { Type as n } from "lucide-react";
 import "react-router-dom";
 import "react";
 import "react-dom";
-const u = () => {
+const T = () => {
   const o = [
     { tag: "headline", label: "Headline", category: "Tucu UI Tokens" },
     { tag: "body", label: "Body", category: "Tucu UI Tokens" },
@@ -35,7 +35,7 @@ const u = () => {
     { tag: "sup", label: "Superscript (sup)", category: "HTML Tags" },
     { tag: "abbr", label: "Abbreviation (abbr)", category: "HTML Tags" },
     { tag: "span", label: "Span", category: "HTML Tags" }
-  ], c = [
+  ], s = [
     { value: "default", label: "Default" },
     { value: "primary", label: "Primary" },
     { value: "secondary", label: "Secondary" },
@@ -45,24 +45,28 @@ const u = () => {
     { value: "success", label: "Success" },
     { value: "warning", label: "Warning" },
     { value: "error", label: "Error" }
-  ], s = [
+  ], c = [
     { value: "default", label: "Default (Sans)" },
     { value: "mono", label: "Mono" }
   ];
-  return /* @__PURE__ */ l(g, { children: [
-    /* @__PURE__ */ l("div", { className: "text-center space-y-4", children: [
-      /* @__PURE__ */ a(r, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Typography" }),
+  return /* @__PURE__ */ l("div", { className: "space-y-8 max-w-6xl sm:space-y-12 w-full mx-auto px-4 sm:px-6 lg:px-8 relative pt-8 lg:pt-12", children: [
+    /* @__PURE__ */ a(
+      g,
+      {
+        title: "Typography",
+        description: "Typography component with all available tags, colors, and font families.",
+        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-blue-500 via-cyan-500 to-sky-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ a(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__ */ a(t, { className: "overflow-hidden", children: /* @__PURE__ */ a(d, { title: "Tucu UI Tokens - Type Scale", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full space-y-8 p-4 sm:p-6", children: [
       /* @__PURE__ */ a(
         r,
         {
           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"
+          className: "text-gray-600 dark:text-gray-400 mb-6",
+          children: "Hierarchical typography tokens designed for consistent text styling across the design system."
         }
-      )
-    ] }),
-    /* @__PURE__ */ a(t, { className: "overflow-hidden", children: /* @__PURE__ */ a(d, { title: "Tucu UI Tokens - Type Scale", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full space-y-8 p-4 sm:p-6", children: [
-      /* @__PURE__ */ a(r, { 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." }),
+      ),
       /* @__PURE__ */ a("div", { className: "border border-gray-200 dark:border-gray-700 rounded-lg p-6 bg-light-dark", children: /* @__PURE__ */ a("div", { className: "space-y-6", children: o.filter((e) => e.category === "Tucu UI Tokens").map((e) => /* @__PURE__ */ l(
         "div",
         {
@@ -77,7 +81,14 @@ const u = () => {
                     children: e.label
                   }
                 ),
-                /* @__PURE__ */ a(i, { variant: "outline", className: "text-xs font-mono", children: e.tag })
+                /* @__PURE__ */ a(
+                  i,
+                  {
+                    variant: "outline",
+                    className: "text-xs font-mono",
+                    children: e.tag
+                  }
+                )
               ] }),
               /* @__PURE__ */ l(r, { tag: "caption", className: "text-muted", children: [
                 e.tag === "headline" && "Main headlines and hero text",
@@ -108,7 +119,14 @@ const u = () => {
       )) }) })
     ] }) }) }),
     /* @__PURE__ */ a(t, { className: "overflow-hidden", children: /* @__PURE__ */ a(d, { title: "HTML Tags", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full space-y-8 p-4 sm:p-6", children: [
-      /* @__PURE__ */ a(r, { tag: "p", className: "text-gray-600 dark:text-gray-400 mb-6", children: "Standard HTML semantic tags with Tucu UI styling." }),
+      /* @__PURE__ */ a(
+        r,
+        {
+          tag: "p",
+          className: "text-gray-600 dark:text-gray-400 mb-6",
+          children: "Standard HTML semantic tags with Tucu UI styling."
+        }
+      ),
       /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: o.filter((e) => e.category === "HTML Tags").map((e) => /* @__PURE__ */ l(
         "div",
         {
@@ -116,18 +134,27 @@ const u = () => {
           children: [
             /* @__PURE__ */ l("div", { className: "space-y-1", children: [
               /* @__PURE__ */ a(r, { tag: "h4", children: e.label }),
-              /* @__PURE__ */ l(r, { tag: "h4", className: "text-muted break-all text-xs", children: [
-                'tag="',
-                e.tag,
-                '"'
-              ] })
+              /* @__PURE__ */ l(
+                r,
+                {
+                  tag: "h4",
+                  className: "text-muted break-all text-xs",
+                  children: [
+                    'tag="',
+                    e.tag,
+                    '"'
+                  ]
+                }
+              )
             ] }),
             /* @__PURE__ */ a("div", { className: "min-h-[60px] flex items-start overflow-hidden", children: /* @__PURE__ */ a(
               r,
               {
                 className: e.tag === "pre" || e.tag === "code" ? "overflow-wrap-anywhere whitespace-pre-wrap w-full" : "overflow-wrap-anywhere",
                 tag: e.tag,
-                ...e.tag === "abbr" && { title: "Abbreviation example" },
+                ...e.tag === "abbr" && {
+                  title: "Abbreviation example"
+                },
                 children: e.tag === "pre" || e.tag === "code" ? 'const example = "The quick brown fox jumps over the lazy dog";' : "The quick brown fox jumps over the lazy dog"
               }
             ) })
@@ -137,19 +164,33 @@ const u = () => {
       )) })
     ] }) }) }),
     /* @__PURE__ */ a(t, { className: "overflow-hidden", children: /* @__PURE__ */ a(d, { title: "Typography Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full space-y-8 p-4 sm:p-6", children: [
-      /* @__PURE__ */ a(r, { tag: "p", className: "text-gray-600 dark:text-gray-400 mb-6", children: "Available color props for the Typography component." }),
-      /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: c.map((e) => /* @__PURE__ */ l(
+      /* @__PURE__ */ a(
+        r,
+        {
+          tag: "p",
+          className: "text-gray-600 dark:text-gray-400 mb-6",
+          children: "Available color props for the Typography component."
+        }
+      ),
+      /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: s.map((e) => /* @__PURE__ */ l(
         "div",
         {
           className: "border border-gray-200 dark:border-gray-700 rounded-lg p-4 space-y-3",
           children: [
             /* @__PURE__ */ l("div", { className: "space-y-1", children: [
               /* @__PURE__ */ a(r, { tag: "h4", children: e.label }),
-              /* @__PURE__ */ l(r, { tag: "h4", className: "text-muted break-all text-xs", children: [
-                'color="',
-                e.value,
-                '"'
-              ] })
+              /* @__PURE__ */ l(
+                r,
+                {
+                  tag: "h4",
+                  className: "text-muted break-all text-xs",
+                  children: [
+                    'color="',
+                    e.value,
+                    '"'
+                  ]
+                }
+              )
             ] }),
             /* @__PURE__ */ a("div", { className: "min-h-[40px] flex items-center", children: /* @__PURE__ */ a(r, { tag: "p", color: e.value, children: "The quick brown fox jumps over the lazy dog" }) })
           ]
@@ -158,19 +199,33 @@ const u = () => {
       )) })
     ] }) }) }),
     /* @__PURE__ */ a(t, { className: "overflow-hidden", children: /* @__PURE__ */ a(d, { title: "Typography Font Families", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full space-y-8 p-4 sm:p-6", children: [
-      /* @__PURE__ */ a(r, { tag: "p", className: "text-gray-600 dark:text-gray-400 mb-6", children: "Available fontFamily props for the Typography component." }),
-      /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: s.map((e) => /* @__PURE__ */ l(
+      /* @__PURE__ */ a(
+        r,
+        {
+          tag: "p",
+          className: "text-gray-600 dark:text-gray-400 mb-6",
+          children: "Available fontFamily props for the Typography component."
+        }
+      ),
+      /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: c.map((e) => /* @__PURE__ */ l(
         "div",
         {
           className: "border border-gray-200 dark:border-gray-700 rounded-lg p-4 space-y-3",
           children: [
             /* @__PURE__ */ l("div", { className: "space-y-1", children: [
               /* @__PURE__ */ a(r, { tag: "h4", children: e.label }),
-              /* @__PURE__ */ l(r, { tag: "h4", className: "text-muted break-all text-xs", children: [
-                'fontFamily="',
-                e.value,
-                '"'
-              ] })
+              /* @__PURE__ */ l(
+                r,
+                {
+                  tag: "h4",
+                  className: "text-muted break-all text-xs",
+                  children: [
+                    'fontFamily="',
+                    e.value,
+                    '"'
+                  ]
+                }
+              )
             ] }),
             /* @__PURE__ */ a("div", { className: "min-h-[40px] flex items-center", children: /* @__PURE__ */ a(r, { tag: "p", fontFamily: e.value, children: "The quick brown fox jumps over the lazy dog" }) })
           ]
@@ -179,7 +234,14 @@ const u = () => {
       )) })
     ] }) }) }),
     /* @__PURE__ */ a(t, { className: "overflow-hidden", children: /* @__PURE__ */ a(d, { title: "Combined Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full space-y-8 p-4 sm:p-6", children: [
-      /* @__PURE__ */ a(r, { tag: "p", className: "text-gray-600 dark:text-gray-400 mb-6", children: "Examples combining tags, colors, and font families." }),
+      /* @__PURE__ */ a(
+        r,
+        {
+          tag: "p",
+          className: "text-gray-600 dark:text-gray-400 mb-6",
+          children: "Examples combining tags, colors, and font families."
+        }
+      ),
       /* @__PURE__ */ l("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: [
         /* @__PURE__ */ l("div", { className: "border border-gray-200 dark:border-gray-700 rounded-lg p-4 space-y-3", children: [
           /* @__PURE__ */ a(r, { tag: "h4", className: "text-xs text-muted", children: "Headline + Primary + Mono" }),
@@ -210,5 +272,5 @@ const u = () => {
   ] });
 };
 export {
-  u as default
+  T as default
 };

package/documentation/UsageExamplesSection-BWDg6OSi.js

@@ -0,0 +1,84 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-BaGqriuz.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>{const o=[{title:"Lucide Icons (Namespace)",description:"Access 1500+ icons via LucideIcons.* dot notation. Supports className, size, color, and strokeWidth props.",code:`import { LucideIcons } from '@e-burgos/tucu-ui';
+
+function MyComponent() {
+  return (
+    <div className="flex gap-4">
+      {/* Sizing via className (Tailwind) */}
+      <LucideIcons.Home className="w-6 h-6 text-gray-600" />
+
+      {/* Sizing via size prop (Lucide-specific) */}
+      <LucideIcons.User size={24} color="currentColor" />
+
+      {/* Custom stroke width */}
+      <LucideIcons.ChevronDown strokeWidth={1.5} />
+
+      {/* Color via Tailwind class */}
+      <LucideIcons.Search className="w-4 h-4 text-blue-500" />
+    </div>
+  );
+}`},{title:"Custom Tucu Icons (Named Exports)",description:"Import 96 custom icons as named exports. Use className with Tailwind utilities for sizing and color.",code:`import {
+  Tucu,
+  HomeIcon,
+  SearchIcon,
+  Bitcoin,
+  Ethereum,
+  Github,
+  Twitter,
+  ClassicLayoutIcon,
+  Sun,
+  Moon,
+} from '@e-burgos/tucu-ui';
+
+function MyApp() {
+  return (
+    <div className="flex gap-4">
+      {/* Brand icon */}
+      <Tucu className="w-8 h-8 text-brand" />
+
+      {/* UI icons — sized via className */}
+      <HomeIcon className="w-6 h-6" />
+      <SearchIcon className="w-5 h-5 text-gray-500" />
+
+      {/* Theme toggle icons */}
+      <Sun className="w-6 h-6" />
+      <Moon className="w-6 h-6" />
+
+      {/* Blockchain icons */}
+      <Bitcoin className="w-6 h-6" />
+      <Ethereum className="w-6 h-6" />
+
+      {/* Social icons */}
+      <Github className="w-5 h-5" />
+      <Twitter className="w-5 h-5" />
+    </div>
+  );
+}`},{title:"Dynamic Icon Rendering",description:"Render icons dynamically from string names using the LucideIcons namespace as a lookup object.",code:`import { LucideIcons } from '@e-burgos/tucu-ui';
+
+// Dynamic icon rendering from string name
+function DynamicIcon({ name, className }: { name: string; className?: string }) {
+  const IconComponent = LucideIcons[name as keyof typeof LucideIcons];
+  
+  if (!IconComponent || typeof IconComponent !== 'function') {
+    return null;
+  }
+
+  return <IconComponent className={className || "w-5 h-5"} />;
+}
+
+// Usage
+<DynamicIcon name="Home" className="w-6 h-6 text-brand" />
+<DynamicIcon name="Settings" className="w-5 h-5" />`},{title:"Accessibility Patterns",description:"Always use aria-hidden for decorative icons and aria-label for interactive standalone icons.",code:`import { LucideIcons } from '@e-burgos/tucu-ui';
+
+// Decorative icons (hidden from screen readers)
+<LucideIcons.Home className="w-6 h-6" aria-hidden="true" />
+
+// Standalone interactive icons (need aria-label)
+<button aria-label="Open settings">
+  <LucideIcons.Settings className="w-5 h-5" />
+</button>
+
+// Icons with visible text (icon is decorative)
+<button>
+  <LucideIcons.Download className="w-4 h-4 mr-2" aria-hidden="true" />
+  Download
+</button>`}];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Usage Examples",description:"Practical code examples for using both icon systems. Covers imports, sizing, dynamic rendering, and accessibility patterns.",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-orange-500 via-amber-500 to-yellow-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(a.Code,{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(s.Typography,{tag:"h2",className:"mb-2",children:"Code Patterns"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Common icon usage patterns with full code examples"})]}),e.jsx("div",{className:"space-y-6",children:o.map((c,i)=>e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-4",children:[e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h3",className:"font-semibold text-lg mb-1",children:c.title}),e.jsx(s.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400",children:c.description})]}),e.jsx(s.CodeBlock,{language:"tsx",code:c.code})]})},i))})]})]})};exports.default=n;