@e-burgos/tucu-ui 1.1.1 → 2.0.0

package/ThemeConfigurationSection-dExOlKvV.mjs

@@ -0,0 +1,132 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { C as c, a as d, T as r } from "./index-Hq6IUBmn.mjs";
+import { Settings as s, Palette as n } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const A = () => /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(d, { title: "Theme Configuration", className: "mt-2 mb-6", children: /* @__PURE__ */ e("div", { className: "space-y-8", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 gap-6", children: [
+  /* @__PURE__ */ a("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ e("div", { className: "p-2 bg-gradient-to-br from-emerald-500 to-teal-500 rounded-lg shadow-lg", children: /* @__PURE__ */ e(s, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
+      /* @__PURE__ */ e(r, { tag: "h4", className: "font-semibold", children: "Available Options" })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "space-y-3", children: [
+      { label: "Mode", value: "'light' | 'dark'" },
+      { label: "Direction", value: "'ltr' | 'rtl'" },
+      {
+        label: "Layout",
+        value: "'clean' | 'admin' | 'horizontal'"
+      },
+      {
+        label: "Primary Color",
+        value: "34+ predefined colors"
+      },
+      {
+        label: "Dark Primary Color",
+        value: "34+ predefined colors"
+      },
+      {
+        label: "Secondary Color",
+        value: "34+ predefined colors"
+      },
+      {
+        label: "Dark Secondary Color",
+        value: "34+ predefined colors"
+      },
+      { label: "Accent Color", value: "34+ predefined colors" },
+      {
+        label: "Dark Accent Color",
+        value: "34+ predefined colors"
+      },
+      { label: "Muted Color", value: "34+ predefined colors" },
+      {
+        label: "Dark Muted Color",
+        value: "34+ predefined colors"
+      },
+      { label: "Dark Background", value: "Theme base colors" },
+      { label: "Light Background", value: "Theme base colors" },
+      { label: "Light Dark", value: "Theme base colors" },
+      { label: "Dark Light Dark", value: "Theme base colors" },
+      { label: "Language", value: "'en' | 'es' | 'fr'" }
+    ].map((l, o) => /* @__PURE__ */ a(
+      "div",
+      {
+        className: "flex justify-between items-center py-2 px-3 bg-gray-200 dark:bg-gray-800 rounded-lg",
+        children: [
+          /* @__PURE__ */ e("span", { className: "font-medium", children: l.label }),
+          /* @__PURE__ */ e("code", { className: "text-sm text-gray-600 dark:text-gray-400", children: l.value })
+        ]
+      },
+      o
+    )) })
+  ] }),
+  /* @__PURE__ */ a("div", { className: "space-y-4 mt-4", children: [
+    /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ e("div", { className: "p-2 bg-gradient-to-br from-pink-500 to-rose-500 rounded-lg shadow-lg", children: /* @__PURE__ */ e(n, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
+      /* @__PURE__ */ e(r, { tag: "h4", className: "font-semibold", children: "Color Presets" })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 overflow-y-auto", children: [
+      { name: "DEFAULT_PRIMARY", color: "#0052ff" },
+      { name: "DEFAULT_DARK_PRIMARY", color: "#578bfa" },
+      { name: "DEFAULT_SECONDARY", color: "#eef0f3" },
+      { name: "DEFAULT_DARK_SECONDARY", color: "#282b31" },
+      { name: "DEFAULT_ACCENT", color: "#f7d21a" },
+      { name: "DEFAULT_DARK_ACCENT", color: "#936000" },
+      { name: "DEFAULT_MUTED", color: "#5b616e" },
+      { name: "DEFAULT_DARK_MUTED", color: "#8a919e" },
+      { name: "DEFAULT_LIGHT_BG", color: "#ffffff" },
+      { name: "DEFAULT_DARK_BG", color: "#0a0b0d" },
+      { name: "DEFAULT_LIGHT_DARK", color: "#f7f8f9" },
+      { name: "DEFAULT_DARK_LIGHT_DARK", color: "#141519" },
+      { name: "BLUE", color: "#105eff" },
+      { name: "DARK_BLUE", color: "#2162ee" },
+      { name: "GREEN", color: "#129961" },
+      { name: "DARK_GREEN", color: "#159962" },
+      { name: "ORANGE", color: "#e1591b" },
+      { name: "DARK_ORANGE", color: "#e66020" },
+      { name: "GRAY", color: "#717886" },
+      { name: "DARK_GRAY", color: "#727886" },
+      { name: "INDIGO", color: "#596ff2" },
+      { name: "DARK_INDIGO", color: "#5c71ee" },
+      { name: "PINK", color: "#cb51bb" },
+      { name: "DARK_PINK", color: "#d058c1" },
+      { name: "PURPLE", color: "#9d6bf2" },
+      { name: "DARK_PURPLE", color: "#bc7bfb" },
+      { name: "RED", color: "#e13947" },
+      { name: "DARK_RED", color: "#e6404e" },
+      { name: "TEAL", color: "#0093cb" },
+      { name: "DARK_TEAL", color: "#0095cd" },
+      { name: "YELLOW", color: "#cf9700" },
+      { name: "DARK_YELLOW", color: "#c79e00" },
+      { name: "CHARTREUSE", color: "#56b340" },
+      { name: "DARK_CHARTREUSE", color: "#7bc869" }
+    ].map((l, o) => /* @__PURE__ */ a(
+      "div",
+      {
+        className: "flex items-center gap-2 p-2 bg-gray-200 dark:bg-gray-800 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors",
+        children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "w-4 h-4 rounded-full border border-gray-300 dark:border-gray-600 shadow-sm",
+              style: { backgroundColor: l.color }
+            }
+          ),
+          /* @__PURE__ */ e("span", { className: "text-xs font-medium truncate", children: l.name })
+        ]
+      },
+      o
+    )) }),
+    /* @__PURE__ */ e(
+      r,
+      {
+        tag: "p",
+        className: "text-xs text-gray-500 dark:text-gray-400 mt-2",
+        children: "34 total color presets available (12 default + 22 spectrum colors)"
+      }
+    )
+  ] })
+] }) }) }) });
+export {
+  A as default
+};

package/ThemeHooksSection-00QYTX0m.js

@@ -0,0 +1 @@
+"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 t=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center",children:[e.jsx(s.Typography,{tag:"h2",className:"mb-4 text-2xl sm:text-3xl md:text-4xl font-bold",children:"Theme Hooks"}),e.jsx(s.Typography,{tag:"p",className:"text-base sm:text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto",children:"Powerful hooks for theme management and customization"})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[e.jsx(s.CardContainer,{children:e.jsx(s.CardTitle,{title:"useTheme Hook",className:"mt-2 mb-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 text-sm",children:["The"," ",e.jsx("code",{className:"px-2 py-1 bg-light-dark rounded text-sm",children:"useTheme"})," ","hook provides access to all theme state and setters. It uses Zustand for state management with localStorage persistence."]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(s.Typography,{tag:"h5",className:"font-semibold text-sm",children:"Available State:"}),e.jsxs("ul",{className:"text-xs text-gray-600 dark:text-gray-400 space-y-1 ml-4 list-disc",children:[e.jsx("li",{children:"mode, layout, direction, logo, lang"}),e.jsx("li",{children:"primaryPreset, darkPrimaryPreset"}),e.jsx("li",{children:"secondaryPreset, darkSecondaryPreset"}),e.jsx("li",{children:"accentPreset, darkAccentPreset"}),e.jsx("li",{children:"mutedPreset, darkMutedPreset"}),e.jsx("li",{children:"darkBgPreset, lightBgPreset"}),e.jsx("li",{children:"lightDarkPreset, darkLightDarkPreset"}),e.jsx("li",{children:"isSettingsOpen, showSettings"})]})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(s.Typography,{tag:"h5",className:"font-semibold text-sm",children:"Available Setters:"}),e.jsxs("ul",{className:"text-xs text-gray-600 dark:text-gray-400 space-y-1 ml-4 list-disc",children:[e.jsx("li",{children:"setMode, setLayout, setDirection"}),e.jsx("li",{children:"setPrimaryPreset, setDarkPrimaryPreset"}),e.jsx("li",{children:"setSecondaryPreset, setDarkSecondaryPreset"}),e.jsx("li",{children:"setAccentPreset, setDarkAccentPreset"}),e.jsx("li",{children:"setMutedPreset, setDarkMutedPreset"}),e.jsx("li",{children:"setDarkBgPreset, setLightBgPreset"}),e.jsx("li",{children:"setLightDarkPreset, setDarkLightDarkPreset"}),e.jsx("li",{children:"setLogo, setLang, setIsSettingsOpen"}),e.jsx("li",{children:"setShowSettings, restoreDefaultColors"})]})]})]})})}),e.jsx(s.CardContainer,{children:e.jsx(s.CardTitle,{title:"useThemeColor & useDirection",className:"mt-2 mb-6",children:e.jsx("div",{className:"space-y-4",children:e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-semibold text-sm mb-2",children:"useThemeColor"}),e.jsx(s.Typography,{tag:"p",className:"text-xs text-gray-600 dark:text-gray-400 mb-2",children:"Automatically used by ThemeWrapper to inject CSS variables into the document root:"}),e.jsxs("ul",{className:"text-xs text-gray-600 dark:text-gray-400 space-y-1 ml-4 list-disc",children:[e.jsx("li",{children:"--color-semantic-bg-primary"}),e.jsx("li",{children:"--color-semantic-dark-bg-primary"}),e.jsx("li",{children:"--color-semantic-bg-secondary"}),e.jsx("li",{children:"--color-semantic-accent-bold-yellow"}),e.jsx("li",{children:"--color-semantic-fg-muted"}),e.jsx("li",{children:"--color-semantic-bg"}),e.jsx("li",{children:"--color-semantic-bg-secondary-wash"})]})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-semibold text-sm mb-2",children:"useDirection"}),e.jsxs(s.Typography,{tag:"p",className:"text-xs text-gray-600 dark:text-gray-400",children:["Sets the document direction for RTL/LTR support. Sets"," ",e.jsx("code",{className:"px-1 py-0.5 bg-light-dark rounded text-xs",children:"document.documentElement.dir"}),"."]})]})]})})})})]})]});exports.default=t;

package/ThemeHooksSection-lG4XldVs.mjs

@@ -0,0 +1,119 @@
+import { jsxs as t, Fragment as l, jsx as e } from "react/jsx-runtime";
+import { T as r, C as s, a } from "./index-Hq6IUBmn.mjs";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const h = () => /* @__PURE__ */ t(l, { children: [
+  /* @__PURE__ */ t("div", { className: "text-center", children: [
+    /* @__PURE__ */ e(
+      r,
+      {
+        tag: "h2",
+        className: "mb-4 text-2xl sm:text-3xl md:text-4xl font-bold",
+        children: "Theme Hooks"
+      }
+    ),
+    /* @__PURE__ */ e(
+      r,
+      {
+        tag: "p",
+        className: "text-base sm:text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto",
+        children: "Powerful hooks for theme management and customization"
+      }
+    )
+  ] }),
+  /* @__PURE__ */ t("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
+    /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(a, { title: "useTheme Hook", className: "mt-2 mb-6", children: /* @__PURE__ */ t("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ t(
+        r,
+        {
+          tag: "p",
+          className: "text-gray-600 dark:text-gray-400 text-sm",
+          children: [
+            "The",
+            " ",
+            /* @__PURE__ */ e("code", { className: "px-2 py-1 bg-light-dark rounded text-sm", children: "useTheme" }),
+            " ",
+            "hook provides access to all theme state and setters. It uses Zustand for state management with localStorage persistence."
+          ]
+        }
+      ),
+      /* @__PURE__ */ t("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ e(r, { tag: "h5", className: "font-semibold text-sm", children: "Available State:" }),
+        /* @__PURE__ */ t("ul", { className: "text-xs text-gray-600 dark:text-gray-400 space-y-1 ml-4 list-disc", children: [
+          /* @__PURE__ */ e("li", { children: "mode, layout, direction, logo, lang" }),
+          /* @__PURE__ */ e("li", { children: "primaryPreset, darkPrimaryPreset" }),
+          /* @__PURE__ */ e("li", { children: "secondaryPreset, darkSecondaryPreset" }),
+          /* @__PURE__ */ e("li", { children: "accentPreset, darkAccentPreset" }),
+          /* @__PURE__ */ e("li", { children: "mutedPreset, darkMutedPreset" }),
+          /* @__PURE__ */ e("li", { children: "darkBgPreset, lightBgPreset" }),
+          /* @__PURE__ */ e("li", { children: "lightDarkPreset, darkLightDarkPreset" }),
+          /* @__PURE__ */ e("li", { children: "isSettingsOpen, showSettings" })
+        ] })
+      ] }),
+      /* @__PURE__ */ t("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ e(r, { tag: "h5", className: "font-semibold text-sm", children: "Available Setters:" }),
+        /* @__PURE__ */ t("ul", { className: "text-xs text-gray-600 dark:text-gray-400 space-y-1 ml-4 list-disc", children: [
+          /* @__PURE__ */ e("li", { children: "setMode, setLayout, setDirection" }),
+          /* @__PURE__ */ e("li", { children: "setPrimaryPreset, setDarkPrimaryPreset" }),
+          /* @__PURE__ */ e("li", { children: "setSecondaryPreset, setDarkSecondaryPreset" }),
+          /* @__PURE__ */ e("li", { children: "setAccentPreset, setDarkAccentPreset" }),
+          /* @__PURE__ */ e("li", { children: "setMutedPreset, setDarkMutedPreset" }),
+          /* @__PURE__ */ e("li", { children: "setDarkBgPreset, setLightBgPreset" }),
+          /* @__PURE__ */ e("li", { children: "setLightDarkPreset, setDarkLightDarkPreset" }),
+          /* @__PURE__ */ e("li", { children: "setLogo, setLang, setIsSettingsOpen" }),
+          /* @__PURE__ */ e("li", { children: "setShowSettings, restoreDefaultColors" })
+        ] })
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(
+      a,
+      {
+        title: "useThemeColor & useDirection",
+        className: "mt-2 mb-6",
+        children: /* @__PURE__ */ e("div", { className: "space-y-4", children: /* @__PURE__ */ t("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ t("div", { children: [
+            /* @__PURE__ */ e(r, { tag: "h5", className: "font-semibold text-sm mb-2", children: "useThemeColor" }),
+            /* @__PURE__ */ e(
+              r,
+              {
+                tag: "p",
+                className: "text-xs text-gray-600 dark:text-gray-400 mb-2",
+                children: "Automatically used by ThemeWrapper to inject CSS variables into the document root:"
+              }
+            ),
+            /* @__PURE__ */ t("ul", { className: "text-xs text-gray-600 dark:text-gray-400 space-y-1 ml-4 list-disc", children: [
+              /* @__PURE__ */ e("li", { children: "--color-semantic-bg-primary" }),
+              /* @__PURE__ */ e("li", { children: "--color-semantic-dark-bg-primary" }),
+              /* @__PURE__ */ e("li", { children: "--color-semantic-bg-secondary" }),
+              /* @__PURE__ */ e("li", { children: "--color-semantic-accent-bold-yellow" }),
+              /* @__PURE__ */ e("li", { children: "--color-semantic-fg-muted" }),
+              /* @__PURE__ */ e("li", { children: "--color-semantic-bg" }),
+              /* @__PURE__ */ e("li", { children: "--color-semantic-bg-secondary-wash" })
+            ] })
+          ] }),
+          /* @__PURE__ */ t("div", { children: [
+            /* @__PURE__ */ e(r, { tag: "h5", className: "font-semibold text-sm mb-2", children: "useDirection" }),
+            /* @__PURE__ */ t(
+              r,
+              {
+                tag: "p",
+                className: "text-xs text-gray-600 dark:text-gray-400",
+                children: [
+                  "Sets the document direction for RTL/LTR support. Sets",
+                  " ",
+                  /* @__PURE__ */ e("code", { className: "px-1 py-0.5 bg-light-dark rounded text-xs", children: "document.documentElement.dir" }),
+                  "."
+                ]
+              }
+            )
+          ] })
+        ] }) })
+      }
+    ) })
+  ] })
+] });
+export {
+  h as default
+};

package/ThemeProviderIntegrationSection-ByuwG8qJ.mjs

@@ -0,0 +1,108 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { C as r, a as s, T as o, c as a } from "./index-Hq6IUBmn.mjs";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const h = () => /* @__PURE__ */ e("div", { className: "space-y-8", children: /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(s, { title: "ThemeProvider Integration", className: "mt-2 mb-6", children: /* @__PURE__ */ t("div", { className: "space-y-6", children: [
+  /* @__PURE__ */ t(o, { tag: "p", className: "text-gray-600 dark:text-gray-400", children: [
+    "The routing system is fully integrated with the ThemeProvider, providing seamless navigation, layout management, and theming support. The ThemeProvider supports two architectural patterns:",
+    /* @__PURE__ */ e("strong", { children: " Standalone" }),
+    " (default) for traditional SPAs and",
+    /* @__PURE__ */ e("strong", { children: " Micro Frontends (MFE)" }),
+    " for distributed architectures."
+  ] }),
+  /* @__PURE__ */ t("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ t("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ e(o, { tag: "h4", className: "font-semibold", children: "StandaloneAppThemeProvider Props" }),
+      /* @__PURE__ */ e(a, { language: "typescript", code: `interface StandaloneAppProviderProps
+  extends Omit<ThemeWrapperProps, 'menuItems' | 'children'> {
+  menuItems: StandaloneAppRoutesMenuItem[];  // Required: Array of route items
+  customRoutes?: React.ReactElement<typeof Routes>; // Override default routing
+}
+
+interface ThemeWrapperProps {
+  // Layout Configuration
+  layout?: 'classic' | 'minimal' | 'none';
+  
+  // Branding
+  logo?: { name: string; secondName?: string };
+  rightButton?: React.ReactNode;
+  
+  // Theming
+  brandColor?: PresetColorType;
+  mode?: 'light' | 'dark';
+  customPaletteColor?: { ... };
+  
+  // Settings Panel
+  showSettings?: boolean;
+}` })
+    ] }),
+    /* @__PURE__ */ t("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
+      /* @__PURE__ */ t("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ e(o, { tag: "h4", className: "font-semibold", children: "Custom Layout Example" }),
+        /* @__PURE__ */ e(a, { language: "tsx", code: `import { StandaloneAppThemeProvider } from '@e-burgos/tucu-ui';
+
+function CustomLayoutApp() {
+  return (
+    <StandaloneAppThemeProvider
+      layout="minimal"
+      menuItems={menuItems}
+      logo={{ name: 'My', secondName: 'App' }}
+      rightButton={
+        <div className="flex gap-2">
+          <Button variant="ghost" size="small">
+            Profile
+          </Button>
+          <Button variant="ghost" size="small">
+            Logout
+          </Button>
+        </div>
+      }
+      headerClassName="bg-brand/5 border-b border-brand/20"
+      contentClassName="max-w-7xl mx-auto"
+      fullWidth={false}
+    />
+  );
+}` })
+      ] }),
+      /* @__PURE__ */ t("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ e(o, { tag: "h4", className: "font-semibold", children: "Custom Routes Override" }),
+        /* @__PURE__ */ t(
+          o,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400",
+            children: [
+              "You can completely override the default routing by providing your own",
+              " ",
+              /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: "customRoutes" }),
+              " ",
+              "prop."
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(a, { language: "tsx", code: `import { Routes, Route } from 'react-router-dom';
+import { StandaloneAppThemeProvider } from '@e-burgos/tucu-ui';
+
+function App() {
+  return (
+    <StandaloneAppThemeProvider
+      menuItems={menuItems}
+      customRoutes={
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/custom" element={<CustomPage />} />
+          <Route path="*" element={<NotFoundPage />} />
+        </Routes>
+      }
+    />
+  );
+}` })
+      ] })
+    ] })
+  ] })
+] }) }) }) });
+export {
+  h as default
+};

package/ThemeProviderIntegrationSection-rB1ZigMz.js

@@ -0,0 +1,61 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("./index-CjRk4ezu.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>e.jsx("div",{className:"space-y-8",children:e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"ThemeProvider Integration",className:"mt-2 mb-6",children:e.jsxs("div",{className:"space-y-6",children:[e.jsxs(t.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:["The routing system is fully integrated with the ThemeProvider, providing seamless navigation, layout management, and theming support. The ThemeProvider supports two architectural patterns:",e.jsx("strong",{children:" Standalone"})," (default) for traditional SPAs and",e.jsx("strong",{children:" Micro Frontends (MFE)"})," for distributed architectures."]}),e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"space-y-4",children:[e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"StandaloneAppThemeProvider Props"}),e.jsx(t.CodeBlock,{language:"typescript",code:`interface StandaloneAppProviderProps
+  extends Omit<ThemeWrapperProps, 'menuItems' | 'children'> {
+  menuItems: StandaloneAppRoutesMenuItem[];  // Required: Array of route items
+  customRoutes?: React.ReactElement<typeof Routes>; // Override default routing
+}
+
+interface ThemeWrapperProps {
+  // Layout Configuration
+  layout?: 'classic' | 'minimal' | 'none';
+  
+  // Branding
+  logo?: { name: string; secondName?: string };
+  rightButton?: React.ReactNode;
+  
+  // Theming
+  brandColor?: PresetColorType;
+  mode?: 'light' | 'dark';
+  customPaletteColor?: { ... };
+  
+  // Settings Panel
+  showSettings?: boolean;
+}`})]}),e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-6",children:[e.jsxs("div",{className:"space-y-4",children:[e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"Custom Layout Example"}),e.jsx(t.CodeBlock,{language:"tsx",code:`import { StandaloneAppThemeProvider } from '@e-burgos/tucu-ui';
+
+function CustomLayoutApp() {
+  return (
+    <StandaloneAppThemeProvider
+      layout="minimal"
+      menuItems={menuItems}
+      logo={{ name: 'My', secondName: 'App' }}
+      rightButton={
+        <div className="flex gap-2">
+          <Button variant="ghost" size="small">
+            Profile
+          </Button>
+          <Button variant="ghost" size="small">
+            Logout
+          </Button>
+        </div>
+      }
+      headerClassName="bg-brand/5 border-b border-brand/20"
+      contentClassName="max-w-7xl mx-auto"
+      fullWidth={false}
+    />
+  );
+}`})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"Custom Routes Override"}),e.jsxs(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["You can completely override the default routing by providing your own"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"customRoutes"})," ","prop."]}),e.jsx(t.CodeBlock,{language:"tsx",code:`import { Routes, Route } from 'react-router-dom';
+import { StandaloneAppThemeProvider } from '@e-burgos/tucu-ui';
+
+function App() {
+  return (
+    <StandaloneAppThemeProvider
+      menuItems={menuItems}
+      customRoutes={
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/custom" element={<CustomPage />} />
+          <Route path="*" element={<NotFoundPage />} />
+        </Routes>
+      }
+    />
+  );
+}`})]})]})]})]})})})});exports.default=o;

package/ThemeProviderRequiredSection-B1-gtNbe.mjs

@@ -0,0 +1,95 @@
+import { jsxs as r, Fragment as t, jsx as e } from "react/jsx-runtime";
+import { a4 as a, C as d, a as n, T as o } from "./index-Hq6IUBmn.mjs";
+import { AlertTriangle as i } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const g = () => /* @__PURE__ */ r(t, { children: [
+  /* @__PURE__ */ e(a, { variant: "warning", children: /* @__PURE__ */ r("div", { children: [
+    /* @__PURE__ */ r("div", { className: "flex items-center gap-2 font-semibold", children: [
+      /* @__PURE__ */ e(i, { className: "h-4 w-4" }),
+      "ThemeProvider Required"
+    ] }),
+    /* @__PURE__ */ r("div", { children: [
+      "Before using any layout components or theme hooks, you MUST wrap your application with ThemeProvider. All layout components and theme hooks depend on the theme context provided by ThemeProvider. Located in",
+      " ",
+      /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-700 rounded text-xs", children: "ui/tucu-ui/src/themes/components/theme-provider" }),
+      "."
+    ] })
+  ] }) }),
+  /* @__PURE__ */ e(d, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Routing System", className: "mt-2 mb-2", children: /* @__PURE__ */ r("div", { className: "w-full space-y-6 p-4 sm:p-6", children: [
+    /* @__PURE__ */ r(o, { tag: "p", className: "text-gray-600 dark:text-gray-400", children: [
+      /* @__PURE__ */ e("strong", { children: "ThemeProvider" }),
+      " includes",
+      " ",
+      /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-700 rounded text-xs", children: "BrowserRouter" }),
+      " ",
+      "from React Router and handles routing automatically. You have two options:"
+    ] }),
+    /* @__PURE__ */ r("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ r("div", { className: "p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800", children: [
+        /* @__PURE__ */ e(o, { tag: "h4", className: "font-semibold mb-2", children: "1. Automatic Routing (Default)" }),
+        /* @__PURE__ */ r(
+          o,
+          {
+            tag: "p",
+            className: "text-sm text-gray-700 dark:text-gray-300 mb-2",
+            children: [
+              "Provide ",
+              /* @__PURE__ */ e("code", { children: "menuItems" }),
+              " with ",
+              /* @__PURE__ */ e("code", { children: "component" }),
+              " ",
+              "prop. ThemeProvider will automatically generate routes from your menu items."
+            ]
+          }
+        ),
+        /* @__PURE__ */ r(
+          o,
+          {
+            tag: "p",
+            className: "text-xs text-gray-600 dark:text-gray-400",
+            children: [
+              /* @__PURE__ */ e("strong", { children: "Use when:" }),
+              " You want routing based on menu items. Each menu item with a ",
+              /* @__PURE__ */ e("code", { children: "component" }),
+              " prop becomes a route."
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ r("div", { className: "p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800", children: [
+        /* @__PURE__ */ e(o, { tag: "h4", className: "font-semibold mb-2", children: "2. Custom Routing" }),
+        /* @__PURE__ */ r(
+          o,
+          {
+            tag: "p",
+            className: "text-sm text-gray-700 dark:text-gray-300 mb-2",
+            children: [
+              "Provide ",
+              /* @__PURE__ */ e("code", { children: "customRoutes" }),
+              " prop with your own",
+              " ",
+              /* @__PURE__ */ e("code", { children: "<Routes>" }),
+              " component. This gives you full control over routing."
+            ]
+          }
+        ),
+        /* @__PURE__ */ r(
+          o,
+          {
+            tag: "p",
+            className: "text-xs text-gray-600 dark:text-gray-400",
+            children: [
+              /* @__PURE__ */ e("strong", { children: "Use when:" }),
+              " You need custom routing logic, landing pages without navigation, or complex routing scenarios."
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] }) }) })
+] });
+export {
+  g as default
+};

package/ThemeProviderRequiredSection-v10DfTl0.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("./index-CjRk4ezu.js"),o=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=()=>e.jsxs(e.Fragment,{children:[e.jsx(r.Alert,{variant:"warning",children:e.jsxs("div",{children:[e.jsxs("div",{className:"flex items-center gap-2 font-semibold",children:[e.jsx(o.AlertTriangle,{className:"h-4 w-4"}),"ThemeProvider Required"]}),e.jsxs("div",{children:["Before using any layout components or theme hooks, you MUST wrap your application with ThemeProvider. All layout components and theme hooks depend on the theme context provided by ThemeProvider. Located in"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-700 rounded text-xs",children:"ui/tucu-ui/src/themes/components/theme-provider"}),"."]})]})}),e.jsx(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.CardTitle,{title:"Routing System",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-6 p-4 sm:p-6",children:[e.jsxs(r.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:[e.jsx("strong",{children:"ThemeProvider"})," includes"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-700 rounded text-xs",children:"BrowserRouter"})," ","from React Router and handles routing automatically. You have two options:"]}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800",children:[e.jsx(r.Typography,{tag:"h4",className:"font-semibold mb-2",children:"1. Automatic Routing (Default)"}),e.jsxs(r.Typography,{tag:"p",className:"text-sm text-gray-700 dark:text-gray-300 mb-2",children:["Provide ",e.jsx("code",{children:"menuItems"})," with ",e.jsx("code",{children:"component"})," ","prop. ThemeProvider will automatically generate routes from your menu items."]}),e.jsxs(r.Typography,{tag:"p",className:"text-xs text-gray-600 dark:text-gray-400",children:[e.jsx("strong",{children:"Use when:"})," You want routing based on menu items. Each menu item with a ",e.jsx("code",{children:"component"})," prop becomes a route."]})]}),e.jsxs("div",{className:"p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800",children:[e.jsx(r.Typography,{tag:"h4",className:"font-semibold mb-2",children:"2. Custom Routing"}),e.jsxs(r.Typography,{tag:"p",className:"text-sm text-gray-700 dark:text-gray-300 mb-2",children:["Provide ",e.jsx("code",{children:"customRoutes"})," prop with your own"," ",e.jsx("code",{children:"<Routes>"})," component. This gives you full control over routing."]}),e.jsxs(r.Typography,{tag:"p",className:"text-xs text-gray-600 dark:text-gray-400",children:[e.jsx("strong",{children:"Use when:"})," You need custom routing logic, landing pages without navigation, or complex routing scenarios."]})]})]})]})})})]});exports.default=t;