@e-burgos/tucu-ui 1.1.1 → 2.0.0

package/TypographySection-fYLxICoM.mjs

@@ -0,0 +1,214 @@
+import { jsxs as l, Fragment as g, jsx as a } from "react/jsx-runtime";
+import { T as r, C as t, a as d, D as i } from "./index-Hq6IUBmn.mjs";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const u = () => {
+  const o = [
+    { 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" }
+  ], c = [
+    { 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" }
+  ], s = [
+    { 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" }),
+      /* @__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"
+        }
+      )
+    ] }),
+    /* @__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",
+        {
+          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: [
+            /* @__PURE__ */ l("div", { className: "flex-1 space-y-2", children: [
+              /* @__PURE__ */ l("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ a(
+                  r,
+                  {
+                    tag: e.tag,
+                    children: e.label
+                  }
+                ),
+                /* @__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",
+                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"
+              ] })
+            ] }),
+            /* @__PURE__ */ a("div", { className: "md:w-1/2", children: /* @__PURE__ */ l(
+              r,
+              {
+                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
+      )) }) })
+    ] }) }) }),
+    /* @__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("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",
+        {
+          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: [
+                '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" },
+                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
+      )) })
+    ] }) }) }),
+    /* @__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(
+        "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__ */ 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" }) })
+          ]
+        },
+        e.value
+      )) })
+    ] }) }) }),
+    /* @__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(
+        "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__ */ 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" }) })
+          ]
+        },
+        e.value
+      )) })
+    ] }) }) }),
+    /* @__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__ */ 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" }),
+          /* @__PURE__ */ a(r, { tag: "headline", color: "primary", fontFamily: "mono", children: "The quick brown fox" })
+        ] }),
+        /* @__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: "Body + Success" }),
+          /* @__PURE__ */ a(r, { tag: "body", color: "success", children: "The quick brown fox jumps over the lazy dog" })
+        ] }),
+        /* @__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: "Label 1 + Warning" }),
+          /* @__PURE__ */ a(r, { tag: "label-1", color: "warning", children: "The quick brown fox" })
+        ] }),
+        /* @__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: "Code + Error + Mono" }),
+          /* @__PURE__ */ a(r, { tag: "code", color: "error", fontFamily: "mono", children: 'const example = "Hello World";' })
+        ] }),
+        /* @__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: "Caption + Muted" }),
+          /* @__PURE__ */ a(r, { tag: "caption", color: "muted", children: "The quick brown fox jumps over the lazy dog" })
+        ] }),
+        /* @__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: "H2 + Secondary" }),
+          /* @__PURE__ */ a(r, { tag: "h2", color: "secondary", children: "The quick brown fox" })
+        ] })
+      ] })
+    ] }) }) })
+  ] });
+};
+export {
+  u as default
+};

package/UsageExamplesSection-Bs8jQesE.mjs

@@ -0,0 +1,147 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { C as s, a as t, T as c, c as o } from "./index-Hq6IUBmn.mjs";
+import { Code as i } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const b = () => /* @__PURE__ */ e("div", { className: "space-y-8", children: /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Usage Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full space-y-8 p-4 sm:p-6", children: [
+  /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-blue-500 via-indigo-500 to-purple-500 shadow-lg", children: /* @__PURE__ */ e(i, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
+    /* @__PURE__ */ e(c, { tag: "h3", className: "text-xl font-semibold", children: "How to Use Icons" })
+  ] }),
+  /* @__PURE__ */ a("div", { className: "space-y-8", children: [
+    /* @__PURE__ */ a("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ e(c, { tag: "h4", className: "font-semibold", children: "Lucide React Integration" }),
+      /* @__PURE__ */ e(
+        c,
+        {
+          tag: "p",
+          className: "text-gray-600 dark:text-gray-400",
+          children: "Import the LucideIcons namespace and access any icon with dot notation. All 5000+ Lucide icons are available."
+        }
+      ),
+      /* @__PURE__ */ e(o, { code: `import { LucideIcons } from '@e-burgos/tucu-ui';
+
+function MyComponent() {
+  return (
+    <div>
+      <LucideIcons.Home className="w-6 h-6 text-gray-600" />
+      <LucideIcons.User size={24} color="currentColor" />
+      <LucideIcons.Settings className="w-5 h-5" />
+      <LucideIcons.ChevronDown strokeWidth={1.5} />
+      <LucideIcons.Search className="w-4 h-4 text-blue-500" />
+    </div>
+  );
+}`, language: "tsx" })
+    ] }),
+    /* @__PURE__ */ a("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ e(c, { tag: "h4", className: "font-semibold", children: "Custom Tucu Icons" }),
+      /* @__PURE__ */ e(
+        c,
+        {
+          tag: "p",
+          className: "text-gray-600 dark:text-gray-400",
+          children: "Access 98+ custom-designed icons specific to Tucu UI through direct named imports."
+        }
+      ),
+      /* @__PURE__ */ e(o, { code: `import {
+  Tucu,
+  HomeIcon,
+  SearchIcon,
+  Bitcoin,
+  Ethereum,
+  Github,
+  Twitter,
+  ClassicLayoutIcon,
+  Sun,
+  Moon,
+  Check,
+  Star,
+} from '@e-burgos/tucu-ui';
+
+function MyApp() {
+  return (
+    <div>
+      {/* Brand icon */}
+      <Tucu className="w-8 h-8 text-brand" />
+      
+      {/* UI icons */}
+      <HomeIcon className="w-6 h-6" />
+      <SearchIcon className="w-5 h-5 text-gray-500" />
+      
+      {/* Theme 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>
+  );
+}`, language: "tsx" })
+    ] }),
+    /* @__PURE__ */ a("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ e(c, { tag: "h4", className: "font-semibold", children: "Creating Icon Components" }),
+      /* @__PURE__ */ e(
+        c,
+        {
+          tag: "p",
+          className: "text-gray-600 dark:text-gray-400",
+          children: "Create reusable icon components with proper TypeScript support."
+        }
+      ),
+      /* @__PURE__ */ e(o, { code: `import { LucideIcons } from '@e-burgos/tucu-ui';
+import { Button } from '@e-burgos/tucu-ui';
+
+function IconButton({ iconName, label, onClick }) {
+  const IconComponent = LucideIcons[iconName];
+
+  return (
+    <button
+      onClick={onClick}
+      className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800"
+      aria-label={label}
+    >
+      <IconComponent className="w-5 h-5" />
+    </button>
+  );
+}`, language: "tsx" })
+    ] }),
+    /* @__PURE__ */ a("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ e(c, { tag: "h4", className: "font-semibold", children: "Accessibility Best Practices" }),
+      /* @__PURE__ */ e(
+        c,
+        {
+          tag: "p",
+          className: "text-gray-600 dark:text-gray-400",
+          children: "Always provide proper accessibility attributes for icons."
+        }
+      ),
+      /* @__PURE__ */ e(o, { code: `import { LucideIcons } from '@e-burgos/tucu-ui';
+
+// Decorative icons
+<LucideIcons.Home className="w-6 h-6" aria-hidden="true" />
+
+// Interactive icons
+<LucideIcons.Settings
+  className="w-6 h-6 cursor-pointer"
+  aria-label="Open settings"
+  role="button"
+  tabIndex={0}
+/>
+
+// Icons with text labels
+<button>
+  <LucideIcons.Home className="w-4 h-4 mr-2" aria-hidden="true" />
+  Home
+</button>`, language: "tsx" })
+    ] })
+  ] })
+] }) }) }) });
+export {
+  b as default
+};

package/UsageExamplesSection-DlCIZC7Y.js

@@ -0,0 +1,83 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("./index-CjRk4ezu.js"),c=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>e.jsx("div",{className:"space-y-8",children:e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Usage Examples",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-8 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-blue-500 via-indigo-500 to-purple-500 shadow-lg",children:e.jsx(c.Code,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-xl font-semibold",children:"How to Use Icons"})]}),e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{className:"space-y-4",children:[e.jsx(s.Typography,{tag:"h4",className:"font-semibold",children:"Lucide React Integration"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Import the LucideIcons namespace and access any icon with dot notation. All 5000+ Lucide icons are available."}),e.jsx(s.CodeBlock,{code:`import { LucideIcons } from '@e-burgos/tucu-ui';
+
+function MyComponent() {
+  return (
+    <div>
+      <LucideIcons.Home className="w-6 h-6 text-gray-600" />
+      <LucideIcons.User size={24} color="currentColor" />
+      <LucideIcons.Settings className="w-5 h-5" />
+      <LucideIcons.ChevronDown strokeWidth={1.5} />
+      <LucideIcons.Search className="w-4 h-4 text-blue-500" />
+    </div>
+  );
+}`,language:"tsx"})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsx(s.Typography,{tag:"h4",className:"font-semibold",children:"Custom Tucu Icons"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Access 98+ custom-designed icons specific to Tucu UI through direct named imports."}),e.jsx(s.CodeBlock,{code:`import {
+  Tucu,
+  HomeIcon,
+  SearchIcon,
+  Bitcoin,
+  Ethereum,
+  Github,
+  Twitter,
+  ClassicLayoutIcon,
+  Sun,
+  Moon,
+  Check,
+  Star,
+} from '@e-burgos/tucu-ui';
+
+function MyApp() {
+  return (
+    <div>
+      {/* Brand icon */}
+      <Tucu className="w-8 h-8 text-brand" />
+      
+      {/* UI icons */}
+      <HomeIcon className="w-6 h-6" />
+      <SearchIcon className="w-5 h-5 text-gray-500" />
+      
+      {/* Theme 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>
+  );
+}`,language:"tsx"})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsx(s.Typography,{tag:"h4",className:"font-semibold",children:"Creating Icon Components"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Create reusable icon components with proper TypeScript support."}),e.jsx(s.CodeBlock,{code:`import { LucideIcons } from '@e-burgos/tucu-ui';
+import { Button } from '@e-burgos/tucu-ui';
+
+function IconButton({ iconName, label, onClick }) {
+  const IconComponent = LucideIcons[iconName];
+
+  return (
+    <button
+      onClick={onClick}
+      className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800"
+      aria-label={label}
+    >
+      <IconComponent className="w-5 h-5" />
+    </button>
+  );
+}`,language:"tsx"})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsx(s.Typography,{tag:"h4",className:"font-semibold",children:"Accessibility Best Practices"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Always provide proper accessibility attributes for icons."}),e.jsx(s.CodeBlock,{code:`import { LucideIcons } from '@e-burgos/tucu-ui';
+
+// Decorative icons
+<LucideIcons.Home className="w-6 h-6" aria-hidden="true" />
+
+// Interactive icons
+<LucideIcons.Settings
+  className="w-6 h-6 cursor-pointer"
+  aria-label="Open settings"
+  role="button"
+  tabIndex={0}
+/>
+
+// Icons with text labels
+<button>
+  <LucideIcons.Home className="w-4 h-4 mr-2" aria-hidden="true" />
+  Home
+</button>`,language:"tsx"})]})]})]})})})});exports.default=o;

package/UsingThemeSystemSection-BKh8A4-r.mjs

@@ -0,0 +1,176 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { C as a, a as s, T as o, c as r } from "./index-Hq6IUBmn.mjs";
+import { Code as n, Zap as i } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const h = () => /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(s, { title: "Using the Theme System", className: "mt-2 mb-6", children: /* @__PURE__ */ t("div", { className: "space-y-8", children: [
+  /* @__PURE__ */ t("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ e("div", { className: "p-2 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-lg shadow-lg", children: /* @__PURE__ */ e(n, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
+      /* @__PURE__ */ e(o, { tag: "h4", className: "font-semibold", children: "ThemeProvider Setup" })
+    ] }),
+    /* @__PURE__ */ e(
+      r,
+      {
+        language: "tsx",
+        code: `import { ThemeProvider, LAYOUT_OPTIONS } from '@ui/tucu-ui';
+
+function App() {
+  const menuItems = [
+    { label: 'Home', path: '/', icon: HomeIcon },
+    { label: 'Dashboard', path: '/dashboard', icon: DashboardIcon },
+  ];
+
+  return (
+    <ThemeProvider
+      // Layout Configuration
+      layout={LAYOUT_OPTIONS.HORIZONTAL} // CLEAN | ADMIN | HORIZONTAL
+      menuItems={menuItems}
+      logo={{ path: '/', name: 'MyApp' }}
+
+      // Color Configuration
+      brandColor="Blue"              // Primary brand color preset
+      customPaletteColor={{
+        primary: '#0052ff',          // Hex color or preset name
+        darkPrimary: '#578bfa',
+        secondary: '#eef0f3',
+        darkSecondary: '#282b31',
+        accent: '#f7d21a',
+        darkAccent: '#936000',
+        muted: '#5b616e',
+        darkMuted: '#8a919e',
+        darkBg: '#0a0b0d',
+        lightBg: '#ffffff',
+        lightDark: '#f7f8f9',
+        darkLightDark: '#141519',
+      }}
+
+      // Theme Settings
+      mode="light"                   // 'light' | 'dark'
+      showSettings={true}
+      
+      // Additional Features
+      headerClassName="custom-header"
+      contentClassName="custom-content"
+      fullWidth={false}
+      rightButton={<UserMenu />}
+      className="custom-layout"
+    >
+      {/* Routes are automatically handled by ThemeProvider */}
+      {/* Or provide customRoutes prop for custom routing */}
+    </ThemeProvider>
+  );
+}`
+      }
+    )
+  ] }),
+  /* @__PURE__ */ t("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ e("div", { className: "p-2 bg-gradient-to-br from-purple-500 to-violet-500 rounded-lg shadow-lg", children: /* @__PURE__ */ e(i, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
+      /* @__PURE__ */ e(o, { tag: "h4", className: "font-semibold", children: "useTheme Hook" })
+    ] }),
+    /* @__PURE__ */ e(
+      r,
+      {
+        language: "tsx",
+        code: `import { useTheme, LAYOUT_OPTIONS } from '@ui/tucu-ui';
+
+function ThemeControls() {
+  const {
+    // State
+    mode,
+    layout,
+    primaryPreset,
+    darkPrimaryPreset,
+    secondaryPreset,
+    darkSecondaryPreset,
+    accentPreset,
+    darkAccentPreset,
+    mutedPreset,
+    darkMutedPreset,
+    darkBgPreset,
+    lightBgPreset,
+    lightDarkPreset,
+    darkLightDarkPreset,
+    direction,
+    logo,
+    lang,
+    isSettingsOpen,
+    showSettings,
+
+    // Setters
+    setMode,
+    setLayout,
+    setPrimaryPreset,
+    setDarkPrimaryPreset,
+    setSecondaryPreset,
+    setDarkSecondaryPreset,
+    setAccentPreset,
+    setDarkAccentPreset,
+    setMutedPreset,
+    setDarkMutedPreset,
+    setDarkBgPreset,
+    setLightBgPreset,
+    setLightDarkPreset,
+    setDarkLightDarkPreset,
+    setDirection,
+    setLogo,
+    setLang,
+    setIsSettingsOpen,
+    setShowSettings,
+    restoreDefaultColors,
+  } = useTheme();
+
+  return (
+    <div>
+      {/* Basic Controls */}
+      <button onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}>
+        Toggle {mode === 'light' ? 'Dark' : 'Light'} Mode
+      </button>
+
+      <select
+        value={layout}
+        onChange={(e) => setLayout(e.target.value as LAYOUT_OPTIONS)}
+      >
+        <option value={LAYOUT_OPTIONS.CLEAN}>Clean</option>
+        <option value={LAYOUT_OPTIONS.ADMIN}>Admin</option>
+        <option value={LAYOUT_OPTIONS.HORIZONTAL}>Horizontal</option>
+      </select>
+
+      <select
+        value={direction}
+        onChange={(e) => setDirection(e.target.value as 'ltr' | 'rtl')}
+      >
+        <option value="ltr">LTR</option>
+        <option value="rtl">RTL</option>
+      </select>
+
+      {/* Advanced Color Controls */}
+      <button onClick={() => setPrimaryPreset({ label: 'Blue', value: '#105eff' })}>
+        Set Primary Color
+      </button>
+
+      <button onClick={() => setSecondaryPreset({ label: 'DEFAULT_SECONDARY', value: '#eef0f3' })}>
+        Set Secondary Color
+      </button>
+
+      {/* Settings Panel Control */}
+      <button onClick={() => setIsSettingsOpen(!isSettingsOpen)}>
+        {isSettingsOpen ? 'Close' : 'Open'} Settings
+      </button>
+
+      {/* Restore Defaults */}
+      <button onClick={restoreDefaultColors}>
+        Restore Default Colors
+      </button>
+    </div>
+  );
+}`
+      }
+    )
+  ] })
+] }) }) });
+export {
+  h as default
+};