@e-burgos/tucu-ui 2.0.8 → 2.0.10

package/documentation/ThemeArchitectureSection-BOTLbXFq.js

@@ -0,0 +1,143 @@
+import { jsxs as t, Fragment as r, jsx as e } from "react/jsx-runtime";
+import { H as l, T as o, ax as c, aC as n, c as m } from "../index-19KsCnyX.js";
+import { Layers as d, Zap as h, Palette as p, Moon as u, Layout as g, Monitor as y, Sparkles as A } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const x = () => {
+  const s = [
+    {
+      icon: /* @__PURE__ */ e(h, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+      title: "Zustand State Management",
+      description: "Centralized theme state with minimal boilerplate, localStorage persistence, and excellent TypeScript support.",
+      iconBgClassName: "from-yellow-500 via-amber-500 to-orange-500"
+    },
+    {
+      icon: /* @__PURE__ */ e(p, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+      title: "CSS Custom Properties",
+      description: "Dynamic brand colors using 12 CSS variables (6 light/dark pairs) for real-time theme updates without rebuilds.",
+      iconBgClassName: "from-blue-500 via-cyan-500 to-teal-500"
+    },
+    {
+      icon: /* @__PURE__ */ e(u, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+      title: "Dark Mode Support",
+      description: "Automatic dark/light mode switching with smooth transitions and system preference detection.",
+      iconBgClassName: "from-purple-500 via-violet-500 to-indigo-500"
+    }
+  ], i = [
+    {
+      icon: /* @__PURE__ */ e(g, { className: "w-5 h-5" }),
+      title: "Default",
+      description: "Standard theme with Clean, Admin, and Horizontal layouts.",
+      color: "blue"
+    },
+    {
+      icon: /* @__PURE__ */ e(y, { className: "w-5 h-5" }),
+      title: "macOS (Sonoma)",
+      description: "macOS-inspired dock layout with Sonoma visual style.",
+      color: "purple"
+    },
+    {
+      icon: /* @__PURE__ */ e(A, { className: "w-5 h-5" }),
+      title: "macOS Tahoe",
+      description: "Latest macOS Tahoe style with Tahoe and Tahoe Dock layouts.",
+      color: "teal"
+    }
+  ];
+  return /* @__PURE__ */ t(r, { children: [
+    /* @__PURE__ */ e(
+      l,
+      {
+        title: "Theme Architecture",
+        description: "Built on Zustand, CSS custom properties, and Tailwind CSS v4 for a flexible, performant, and type-safe theming system.",
+        icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-purple-500 via-violet-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(d, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+      /* @__PURE__ */ t("div", { className: "text-center", children: [
+        /* @__PURE__ */ e(o, { tag: "h2", className: "mb-2", children: "Core Technologies" }),
+        /* @__PURE__ */ e(
+          o,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "Three pillars that power the theming system"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6", children: s.map((a) => /* @__PURE__ */ e(c, { layout: "horizontal", ...a }, a.title)) })
+    ] }),
+    /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+      /* @__PURE__ */ t("div", { className: "text-center", children: [
+        /* @__PURE__ */ e(o, { tag: "h2", className: "mb-2", children: "Theme Variants" }),
+        /* @__PURE__ */ e(
+          o,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "Three visual styles with their own layout constraints"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6", children: i.map((a) => /* @__PURE__ */ e(
+        n,
+        {
+          icon: a.icon,
+          title: a.title,
+          description: a.description,
+          color: a.color
+        },
+        a.title
+      )) })
+    ] }),
+    /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+      /* @__PURE__ */ t("div", { className: "text-center", children: [
+        /* @__PURE__ */ e(o, { tag: "h2", className: "mb-2", children: "Layout Constraint Map" }),
+        /* @__PURE__ */ e(
+          o,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "Each theme variant restricts which layouts are available"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(
+        m,
+        {
+          language: "typescript",
+          code: `// THEME_STYLE_LAYOUTS mapping
+const THEME_STYLE_LAYOUTS: Record<THEME_VARIANT, ThemeStyleConfig> = {
+  default: {
+    validLayouts: [CLEAN, ADMIN, HORIZONTAL],
+    defaultLayout: HORIZONTAL,
+  },
+  macos: {
+    validLayouts: [MACOS, MACOS_CLEAN],
+    defaultLayout: MACOS,
+  },
+  'macos-tahoe': {
+    validLayouts: [MACOS_TAHOE, MACOS_TAHOE_DOCK, MACOS_TAHOE_CLEAN],
+    defaultLayout: MACOS_TAHOE,
+  },
+};
+
+// LAYOUT_OPTIONS enum (8 values)
+enum LAYOUT_OPTIONS {
+  CLEAN = 'clean',
+  ADMIN = 'admin',
+  HORIZONTAL = 'horizontal',
+  MACOS = 'macos',
+  MACOS_CLEAN = 'macos-clean',
+  MACOS_TAHOE = 'macos-tahoe',
+  MACOS_TAHOE_DOCK = 'macos-tahoe-dock',
+  MACOS_TAHOE_CLEAN = 'macos-tahoe-clean',
+}`
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  x as default
+};

package/documentation/ThemeConfigurationSection-CGRi9uGX.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DMs_SmPq.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const c=()=>{const o=[{label:"Mode",value:"'light' | 'dark'"},{label:"Theme Style",value:"'default' | 'macos' | 'macos-tahoe'"},{label:"Direction",value:"'ltr' | 'rtl'"},{label:"Layout",value:"6 options (constrained by theme style)"},{label:"Primary Color",value:"34+ predefined presets"},{label:"Dark Primary Color",value:"34+ predefined presets"},{label:"Secondary Color",value:"34+ predefined presets"},{label:"Dark Secondary Color",value:"34+ predefined presets"},{label:"Accent Color",value:"34+ predefined presets"},{label:"Dark Accent Color",value:"34+ predefined presets"},{label:"Muted Color",value:"34+ predefined presets"},{label:"Dark Muted Color",value:"34+ predefined presets"},{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'"}],s=[{name:"DEFAULT_PRIMARY",color:"#0052ff"},{name:"DEFAULT_DARK_PRIMARY",color:"#578bfa"},{name:"DEFAULT_SECONDARY",color:"#f3f4f6"},{name:"DEFAULT_DARK_SECONDARY",color:"#172131"},{name:"DEFAULT_ACCENT",color:"#f7d21a"},{name:"DEFAULT_DARK_ACCENT",color:"#936000"},{name:"DEFAULT_MUTED",color:"#4a5565"},{name:"DEFAULT_DARK_MUTED",color:"#828a99"},{name:"DEFAULT_LIGHT_BG",color:"#ffffff"},{name:"DEFAULT_DARK_BG",color:"#030712"},{name:"DEFAULT_LIGHT_DARK",color:"#f9fafb"},{name:"DEFAULT_DARK_LIGHT_DARK",color:"#0a101d"},{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:"#6a7282"},{name:"DARK_GRAY",color:"#6a7282"},{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"}];return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Theme Configuration",description:"All available configuration options and the 34 color presets that power the theming system.",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-emerald-500 via-teal-500 to-cyan-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(t.Settings,{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(a.Typography,{tag:"h2",className:"mb-2",children:"Available Options"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"All configurable properties managed by the theme store"})]}),e.jsx(a.CardContainer,{children:e.jsx(a.CardTitle,{title:"Configuration Options",children:e.jsx("div",{className:"space-y-3",children:o.map((r,l)=>e.jsxs("div",{className:"flex justify-between items-center py-2 px-3 bg-gray-200 dark:bg-gray-800 rounded-lg",children:[e.jsx("span",{className:"font-medium text-sm",children:r.label}),e.jsx("code",{className:"text-xs text-gray-600 dark:text-gray-400",children:r.value})]},l))})})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(a.Typography,{tag:"h2",className:"mb-2",children:"Color Presets"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"34 predefined colors (12 default + 22 spectrum)"})]}),e.jsx(a.CardContainer,{children:e.jsx(a.CardTitle,{title:"Preset Palette",children:e.jsxs("div",{className:"space-y-4",children:[e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3",children:s.map((r,l)=>e.jsxs("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:[e.jsx("div",{className:"w-4 h-4 rounded-full border border-border shadow-sm",style:{backgroundColor:r.color}}),e.jsx("span",{className:"text-xs font-medium truncate",children:r.name})]},l))}),e.jsx(a.Typography,{tag:"p",className:"text-xs text-gray-500 dark:text-gray-400 mt-2",children:"Spectrum colors use the -50 value from Tucu UI Design Tokens. Default colors use semantic mappings (e.g., blue-60 for primary)."})]})})})]})]})};exports.default=c;

package/documentation/ThemeConfigurationSection-sgJA0wX0.js

@@ -0,0 +1,139 @@
+import { jsxs as a, Fragment as m, jsx as e } from "react/jsx-runtime";
+import { H as d, T as l, C as t, a as c } from "../index-19KsCnyX.js";
+import { Settings as i } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const A = () => {
+  const s = [
+    { label: "Mode", value: "'light' | 'dark'" },
+    { label: "Theme Style", value: "'default' | 'macos' | 'macos-tahoe'" },
+    { label: "Direction", value: "'ltr' | 'rtl'" },
+    { label: "Layout", value: "6 options (constrained by theme style)" },
+    { label: "Primary Color", value: "34+ predefined presets" },
+    { label: "Dark Primary Color", value: "34+ predefined presets" },
+    { label: "Secondary Color", value: "34+ predefined presets" },
+    { label: "Dark Secondary Color", value: "34+ predefined presets" },
+    { label: "Accent Color", value: "34+ predefined presets" },
+    { label: "Dark Accent Color", value: "34+ predefined presets" },
+    { label: "Muted Color", value: "34+ predefined presets" },
+    { label: "Dark Muted Color", value: "34+ predefined presets" },
+    { 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'" }
+  ], n = [
+    { name: "DEFAULT_PRIMARY", color: "#0052ff" },
+    { name: "DEFAULT_DARK_PRIMARY", color: "#578bfa" },
+    { name: "DEFAULT_SECONDARY", color: "#f3f4f6" },
+    { name: "DEFAULT_DARK_SECONDARY", color: "#172131" },
+    { name: "DEFAULT_ACCENT", color: "#f7d21a" },
+    { name: "DEFAULT_DARK_ACCENT", color: "#936000" },
+    { name: "DEFAULT_MUTED", color: "#4a5565" },
+    { name: "DEFAULT_DARK_MUTED", color: "#828a99" },
+    { name: "DEFAULT_LIGHT_BG", color: "#ffffff" },
+    { name: "DEFAULT_DARK_BG", color: "#030712" },
+    { name: "DEFAULT_LIGHT_DARK", color: "#f9fafb" },
+    { name: "DEFAULT_DARK_LIGHT_DARK", color: "#0a101d" },
+    { 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: "#6a7282" },
+    { name: "DARK_GRAY", color: "#6a7282" },
+    { 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" }
+  ];
+  return /* @__PURE__ */ a(m, { children: [
+    /* @__PURE__ */ e(
+      d,
+      {
+        title: "Theme Configuration",
+        description: "All available configuration options and the 34 color presets that power the theming system.",
+        icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-emerald-500 via-teal-500 to-cyan-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(i, { 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("section", { className: "space-y-8", children: [
+      /* @__PURE__ */ a("div", { className: "text-center", children: [
+        /* @__PURE__ */ e(l, { tag: "h2", className: "mb-2", children: "Available Options" }),
+        /* @__PURE__ */ e(
+          l,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "All configurable properties managed by the theme store"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e(c, { title: "Configuration Options", children: /* @__PURE__ */ e("div", { className: "space-y-3", children: s.map((r, 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 text-sm", children: r.label }),
+            /* @__PURE__ */ e("code", { className: "text-xs text-gray-600 dark:text-gray-400", children: r.value })
+          ]
+        },
+        o
+      )) }) }) })
+    ] }),
+    /* @__PURE__ */ a("section", { className: "space-y-8", children: [
+      /* @__PURE__ */ a("div", { className: "text-center", children: [
+        /* @__PURE__ */ e(l, { tag: "h2", className: "mb-2", children: "Color Presets" }),
+        /* @__PURE__ */ e(
+          l,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "34 predefined colors (12 default + 22 spectrum)"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e(c, { title: "Preset Palette", children: /* @__PURE__ */ a("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3", children: n.map((r, 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-border shadow-sm",
+                  style: { backgroundColor: r.color }
+                }
+              ),
+              /* @__PURE__ */ e("span", { className: "text-xs font-medium truncate", children: r.name })
+            ]
+          },
+          o
+        )) }),
+        /* @__PURE__ */ e(
+          l,
+          {
+            tag: "p",
+            className: "text-xs text-gray-500 dark:text-gray-400 mt-2",
+            children: "Spectrum colors use the -50 value from Tucu UI Design Tokens. Default colors use semantic mappings (e.g., blue-60 for primary)."
+          }
+        )
+      ] }) }) })
+    ] })
+  ] });
+};
+export {
+  A as default
+};

package/documentation/ThemeHooksSection-BU9VAEIQ.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../index-DMs_SmPq.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>{const a=[{icon:e.jsx(s.Zap,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"useTheme",description:"Main hook — all state, setters, and actions. Zustand-based with localStorage persistence.",iconBgClassName:"from-yellow-500 via-amber-500 to-orange-500"},{icon:e.jsx(s.Palette,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"useThemeColor",description:"Injects 24 CSS variables (12 light/dark pairs) into document root for real-time theming.",iconBgClassName:"from-blue-500 via-cyan-500 to-teal-500"},{icon:e.jsx(s.Globe,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"useDirection",description:"Sets document.documentElement.dir for RTL/LTR layout support.",iconBgClassName:"from-purple-500 via-violet-500 to-indigo-500"}];return e.jsxs(e.Fragment,{children:[e.jsx(r.HeroCard,{title:"Theme Hooks",description:"Powerful hooks for accessing, modifying, and reacting to theme state throughout your application.",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-yellow-500 via-amber-500 to-orange-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(s.Anchor,{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(r.Typography,{tag:"h2",className:"mb-2",children:"Available Hooks"}),e.jsx(r.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Three hooks that power the theming system"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6",children:a.map(t=>e.jsx(r.FeatureCard,{layout:"horizontal",...t},t.title))})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(r.Typography,{tag:"h2",className:"mb-2",children:"useTheme Hook API"}),e.jsx(r.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Complete state, setters, and actions reference"})]}),e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-6",children:[e.jsx(r.CardContainer,{children:e.jsx(r.CardTitle,{title:"State Properties",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(r.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 text-sm",children:["Accessed via"," ",e.jsx("code",{className:"px-1 py-0.5 border border-border rounded text-xs",children:"useTheme()"})," ","— persisted to localStorage automatically."]}),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:"colorScheme (theme variant: default | macos | macos-tahoe)"}),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:"successPreset, darkSuccessPreset"}),e.jsx("li",{children:"warningPreset, darkWarningPreset"}),e.jsx("li",{children:"errorPreset, darkErrorPreset"}),e.jsx("li",{children:"infoPreset, darkInfoPreset"}),e.jsx("li",{children:"fgPreset, darkFgPreset"}),e.jsx("li",{children:"borderPreset, darkBorderPreset"}),e.jsx("li",{children:"backgroundVariant"}),e.jsx("li",{children:"isSettingsOpen, showSettings"})]})]})})}),e.jsx(r.CardContainer,{children:e.jsx(r.CardTitle,{title:"Setters",children:e.jsxs("div",{className:"space-y-4",children:[e.jsx(r.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 text-sm",children:"Each setter updates the store and persists to localStorage."}),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:"setSuccessPreset, setDarkSuccessPreset"}),e.jsx("li",{children:"setWarningPreset, setDarkWarningPreset"}),e.jsx("li",{children:"setErrorPreset, setDarkErrorPreset"}),e.jsx("li",{children:"setInfoPreset, setDarkInfoPreset"}),e.jsx("li",{children:"setFgPreset, setDarkFgPreset"}),e.jsx("li",{children:"setBorderPreset, setDarkBorderPreset"}),e.jsx("li",{children:"setBackgroundVariant"}),e.jsx("li",{children:"setLogo, setLang, setIsSettingsOpen, setShowSettings"})]})]})})}),e.jsx(r.CardContainer,{children:e.jsx(r.CardTitle,{title:"Actions",children:e.jsxs("div",{className:"space-y-4",children:[e.jsx(r.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 text-sm",children:"Compound actions that apply multiple state changes at once."}),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:"restoreDefaultColors — resets all color presets to defaults"}),e.jsx("li",{children:"applyMacOSTheme — sets layout to MACOS + Sonoma style"}),e.jsx("li",{children:"applyMacOSTahoeTheme — sets layout to MACOS_TAHOE + Tahoe style"}),e.jsx("li",{children:"applyThemeStyle(style: THEME_VARIANT) — generic applicator for any variant"})]})]})})}),e.jsx(r.CardContainer,{children:e.jsx(r.CardTitle,{title:"useThemeColor Variables",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(r.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 text-sm",children:["24 CSS variables injected into"," ",e.jsx("code",{className:"px-1 py-0.5 border border-border rounded text-xs",children:"document.documentElement"}),":"]}),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 / dark variant"}),e.jsx("li",{children:"--color-semantic-bg-secondary / dark variant"}),e.jsx("li",{children:"--color-semantic-accent-bold-yellow / dark variant"}),e.jsx("li",{children:"--color-semantic-fg-muted / dark variant"}),e.jsx("li",{children:"--color-semantic-bg / dark variant"}),e.jsx("li",{children:"--color-semantic-bg-secondary-wash / dark variant"}),e.jsx("li",{children:"--color-semantic-bg-positive / dark variant (success)"}),e.jsx("li",{children:"--color-semantic-bg-warning / dark variant (warning)"}),e.jsx("li",{children:"--color-semantic-bg-negative / dark variant (error)"}),e.jsx("li",{children:"--color-semantic-bg-info / dark variant (info)"}),e.jsx("li",{children:"--color-semantic-fg / dark variant (text foreground)"}),e.jsx("li",{children:"--color-semantic-line-primary-subtle / dark variant (border)"})]})]})})})]})]})]})};exports.default=i;

package/documentation/ThemeHooksSection-DN-dSaho.js

@@ -0,0 +1,173 @@
+import { jsxs as r, Fragment as l, jsx as e } from "react/jsx-runtime";
+import { H as c, T as t, ax as o, C as a, a as s } from "../index-19KsCnyX.js";
+import { Anchor as n, Zap as d, Palette as h, Globe as m } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const v = () => /* @__PURE__ */ r(l, { children: [
+  /* @__PURE__ */ e(
+    c,
+    {
+      title: "Theme Hooks",
+      description: "Powerful hooks for accessing, modifying, and reacting to theme state throughout your application.",
+      icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-yellow-500 via-amber-500 to-orange-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(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__ */ r("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ r("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(t, { tag: "h2", className: "mb-2", children: "Available Hooks" }),
+      /* @__PURE__ */ e(
+        t,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Three hooks that power the theming system"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6", children: [
+      {
+        icon: /* @__PURE__ */ e(d, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "useTheme",
+        description: "Main hook — all state, setters, and actions. Zustand-based with localStorage persistence.",
+        iconBgClassName: "from-yellow-500 via-amber-500 to-orange-500"
+      },
+      {
+        icon: /* @__PURE__ */ e(h, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "useThemeColor",
+        description: "Injects 24 CSS variables (12 light/dark pairs) into document root for real-time theming.",
+        iconBgClassName: "from-blue-500 via-cyan-500 to-teal-500"
+      },
+      {
+        icon: /* @__PURE__ */ e(m, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "useDirection",
+        description: "Sets document.documentElement.dir for RTL/LTR layout support.",
+        iconBgClassName: "from-purple-500 via-violet-500 to-indigo-500"
+      }
+    ].map((i) => /* @__PURE__ */ e(o, { layout: "horizontal", ...i }, i.title)) })
+  ] }),
+  /* @__PURE__ */ r("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ r("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(t, { tag: "h2", className: "mb-2", children: "useTheme Hook API" }),
+      /* @__PURE__ */ e(
+        t,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Complete state, setters, and actions reference"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ r("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
+      /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(s, { title: "State Properties", children: /* @__PURE__ */ r("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ r(
+          t,
+          {
+            tag: "p",
+            className: "text-gray-600 dark:text-gray-400 text-sm",
+            children: [
+              "Accessed via",
+              " ",
+              /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "useTheme()" }),
+              " ",
+              "— persisted to localStorage automatically."
+            ]
+          }
+        ),
+        /* @__PURE__ */ r("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: "colorScheme (theme variant: default | macos | macos-tahoe)" }),
+          /* @__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: "successPreset, darkSuccessPreset" }),
+          /* @__PURE__ */ e("li", { children: "warningPreset, darkWarningPreset" }),
+          /* @__PURE__ */ e("li", { children: "errorPreset, darkErrorPreset" }),
+          /* @__PURE__ */ e("li", { children: "infoPreset, darkInfoPreset" }),
+          /* @__PURE__ */ e("li", { children: "fgPreset, darkFgPreset" }),
+          /* @__PURE__ */ e("li", { children: "borderPreset, darkBorderPreset" }),
+          /* @__PURE__ */ e("li", { children: "backgroundVariant" }),
+          /* @__PURE__ */ e("li", { children: "isSettingsOpen, showSettings" })
+        ] })
+      ] }) }) }),
+      /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(s, { title: "Setters", children: /* @__PURE__ */ r("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ e(
+          t,
+          {
+            tag: "p",
+            className: "text-gray-600 dark:text-gray-400 text-sm",
+            children: "Each setter updates the store and persists to localStorage."
+          }
+        ),
+        /* @__PURE__ */ r("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: "setSuccessPreset, setDarkSuccessPreset" }),
+          /* @__PURE__ */ e("li", { children: "setWarningPreset, setDarkWarningPreset" }),
+          /* @__PURE__ */ e("li", { children: "setErrorPreset, setDarkErrorPreset" }),
+          /* @__PURE__ */ e("li", { children: "setInfoPreset, setDarkInfoPreset" }),
+          /* @__PURE__ */ e("li", { children: "setFgPreset, setDarkFgPreset" }),
+          /* @__PURE__ */ e("li", { children: "setBorderPreset, setDarkBorderPreset" }),
+          /* @__PURE__ */ e("li", { children: "setBackgroundVariant" }),
+          /* @__PURE__ */ e("li", { children: "setLogo, setLang, setIsSettingsOpen, setShowSettings" })
+        ] })
+      ] }) }) }),
+      /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(s, { title: "Actions", children: /* @__PURE__ */ r("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ e(
+          t,
+          {
+            tag: "p",
+            className: "text-gray-600 dark:text-gray-400 text-sm",
+            children: "Compound actions that apply multiple state changes at once."
+          }
+        ),
+        /* @__PURE__ */ r("ul", { className: "text-xs text-gray-600 dark:text-gray-400 space-y-1 ml-4 list-disc", children: [
+          /* @__PURE__ */ e("li", { children: "restoreDefaultColors — resets all color presets to defaults" }),
+          /* @__PURE__ */ e("li", { children: "applyMacOSTheme — sets layout to MACOS + Sonoma style" }),
+          /* @__PURE__ */ e("li", { children: "applyMacOSTahoeTheme — sets layout to MACOS_TAHOE + Tahoe style" }),
+          /* @__PURE__ */ e("li", { children: "applyThemeStyle(style: THEME_VARIANT) — generic applicator for any variant" })
+        ] })
+      ] }) }) }),
+      /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(s, { title: "useThemeColor Variables", children: /* @__PURE__ */ r("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ r(
+          t,
+          {
+            tag: "p",
+            className: "text-gray-600 dark:text-gray-400 text-sm",
+            children: [
+              "24 CSS variables injected into",
+              " ",
+              /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "document.documentElement" }),
+              ":"
+            ]
+          }
+        ),
+        /* @__PURE__ */ r("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 / dark variant" }),
+          /* @__PURE__ */ e("li", { children: "--color-semantic-bg-secondary / dark variant" }),
+          /* @__PURE__ */ e("li", { children: "--color-semantic-accent-bold-yellow / dark variant" }),
+          /* @__PURE__ */ e("li", { children: "--color-semantic-fg-muted / dark variant" }),
+          /* @__PURE__ */ e("li", { children: "--color-semantic-bg / dark variant" }),
+          /* @__PURE__ */ e("li", { children: "--color-semantic-bg-secondary-wash / dark variant" }),
+          /* @__PURE__ */ e("li", { children: "--color-semantic-bg-positive / dark variant (success)" }),
+          /* @__PURE__ */ e("li", { children: "--color-semantic-bg-warning / dark variant (warning)" }),
+          /* @__PURE__ */ e("li", { children: "--color-semantic-bg-negative / dark variant (error)" }),
+          /* @__PURE__ */ e("li", { children: "--color-semantic-bg-info / dark variant (info)" }),
+          /* @__PURE__ */ e("li", { children: "--color-semantic-fg / dark variant (text foreground)" }),
+          /* @__PURE__ */ e("li", { children: "--color-semantic-line-primary-subtle / dark variant (border)" })
+        ] })
+      ] }) }) })
+    ] })
+  ] })
+] });
+export {
+  v as default
+};

package/documentation/ThemeProviderIntegrationSection-CtckSEZ6.js

@@ -0,0 +1,122 @@
+import { jsxs as t, Fragment as n, jsx as e } from "react/jsx-runtime";
+import { H as i, T as o, C as a, a as r, c as s } from "../index-19KsCnyX.js";
+import { Puzzle as m } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const P = () => /* @__PURE__ */ t(n, { children: [
+  /* @__PURE__ */ e(
+    i,
+    {
+      title: "ThemeProvider Integration",
+      description: "The routing system is fully integrated with ThemeProvider. It provides seamless navigation, layout management, and theming through the architecturalPatterns prop.",
+      icon: /* @__PURE__ */ e("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-indigo-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(m, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+    }
+  ),
+  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ t("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(o, { tag: "h2", className: "mb-2", children: "ThemeProvider Props" }),
+      /* @__PURE__ */ e(
+        o,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "The ThemeProvider accepts layout, theming, and routing configuration"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(r, { title: "Interface Definition", children: /* @__PURE__ */ e(s, { 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
+  themeStyle?: 'default' | 'macos' | 'macos-tahoe';
+  layout?: LAYOUT_OPTIONS; // Values depend on themeStyle
+
+  // Layout values per themeStyle:
+  // default → 'clean' | 'admin' | 'horizontal'
+  // macos → 'macos'
+  // macos-tahoe → 'macos-tahoe' | 'macos-tahoe-dock'
+
+  // Branding
+  logo?: { name: string; secondName?: string };
+  rightButton?: React.ReactNode;
+
+  // Theming
+  brandColor?: PresetColorType;
+  mode?: 'light' | 'dark';
+  customPaletteColor?: { ... };
+
+  // Settings Panel
+  showSettings?: boolean;
+
+  // Layout customization
+  className?: string;
+  headerClassName?: string;
+  contentClassName?: string;
+  fullWidth?: boolean;
+}` }) }) })
+  ] }),
+  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ t("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(o, { tag: "h2", className: "mb-2", children: "Usage Examples" }),
+      /* @__PURE__ */ e(
+        o,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Custom layout and routing override patterns"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
+      /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(r, { title: "Custom Layout", children: /* @__PURE__ */ e(s, { language: "tsx", code: `import { ThemeProvider } from '@e-burgos/tucu-ui';
+
+function CustomLayoutApp() {
+  return (
+    <ThemeProvider
+      themeStyle="default"
+      layout="admin"
+      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__ */ e(a, { children: /* @__PURE__ */ e(r, { title: "Custom Routes Override", children: /* @__PURE__ */ e(s, { language: "tsx", code: `import { ThemeProvider } from '@e-burgos/tucu-ui';
+
+function App() {
+  return (
+    <ThemeProvider
+      menuItems={menuItems}
+      customRoutes={
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/custom" element={<CustomPage />} />
+          <Route path="*" element={<NotFoundPage />} />
+        </Routes>
+      }
+    />
+  );
+}` }) }) })
+    ] })
+  ] })
+] });
+export {
+  P as default
+};