@e-burgos/tucu-ui 2.0.8 → 2.0.10

package/documentation/ColorCustomizationSection-DAyuywgq.js

@@ -0,0 +1,141 @@
+import { jsxs as r, Fragment as c, jsx as e } from "react/jsx-runtime";
+import { ay as n, H as m, T as t, C as s, a as i, aj as g } from "../index-19KsCnyX.js";
+import { Brush as b } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const w = () => {
+  const { primaryPreset: d } = n(), o = [
+    "bg-brand",
+    "text-brand",
+    "border-brand",
+    "bg-primary",
+    "text-primary",
+    "border-primary",
+    "bg-secondary",
+    "text-secondary",
+    "border-secondary",
+    "bg-accent",
+    "text-accent",
+    "border-accent",
+    "bg-foreground",
+    "text-foreground",
+    "border-foreground",
+    "bg-muted",
+    "text-muted",
+    "border-muted",
+    "bg-border",
+    "border-border",
+    "bg-success",
+    "text-success",
+    "bg-warning",
+    "text-warning",
+    "bg-error",
+    "text-error",
+    "bg-info",
+    "text-info",
+    "bg-body",
+    "bg-dark",
+    "text-dark",
+    "bg-light",
+    "text-light",
+    "text-foreground/60",
+    "bg-brand/50",
+    "border-brand/30"
+  ];
+  return /* @__PURE__ */ r(c, { children: [
+    /* @__PURE__ */ e(
+      m,
+      {
+        title: "Color Customization",
+        description: "Dynamic brand colors using CSS custom properties and seamless Tailwind CSS utility integration.",
+        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-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(b, { 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: "Dynamic Brand Colors" }),
+        /* @__PURE__ */ e(
+          t,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "Real-time theme updates via CSS custom properties"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(i, { title: "Active CSS Variable", children: /* @__PURE__ */ r("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ r(t, { tag: "p", className: "text-gray-600 dark:text-gray-400", children: [
+          "Brand colors are dynamically applied using CSS custom properties, allowing real-time theme updates without rebuilding. Colors are defined in",
+          " ",
+          /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "ui/tucu-ui/src/themes/config/index.ts" })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "p-3 flex justify-center items-center bg-gray-200 dark:bg-gray-800 rounded-lg w-full", children: /* @__PURE__ */ r(
+          t,
+          {
+            tag: "code",
+            className: "w-full text-sm text-gray-600 dark:text-gray-400",
+            children: [
+              "--color-semantic-bg-primary:",
+              " ",
+              d?.value || "#0052ff"
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ e(g, { variant: "info", children: /* @__PURE__ */ r(t, { tag: "p", className: "text-xs", children: [
+          /* @__PURE__ */ e("strong", { children: "Color Presets:" }),
+          " Spectrum colors use the",
+          " ",
+          /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "-50" }),
+          " ",
+          "value from Tucu UI Design Tokens. Default colors use semantic mappings (e.g., blue-60 for primary)."
+        ] }) })
+      ] }) }) })
+    ] }),
+    /* @__PURE__ */ r("section", { className: "space-y-8", children: [
+      /* @__PURE__ */ r("div", { className: "text-center", children: [
+        /* @__PURE__ */ e(t, { tag: "h2", className: "mb-2", children: "Tailwind Integration" }),
+        /* @__PURE__ */ e(
+          t,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "Available utility classes that consume theme colors"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(i, { title: "Utility Classes", children: /* @__PURE__ */ r("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ e("div", { className: "grid grid-cols-2 sm:grid-cols-3 gap-2", children: o.map((a, l) => /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: `w-3 h-3 rounded border border-border ${a.includes("bg-") ? a : "bg-brand"}`
+            }
+          ),
+          /* @__PURE__ */ r(
+            t,
+            {
+              tag: "code",
+              className: "text-xs text-gray-600 dark:text-gray-400",
+              children: [
+                ".",
+                a
+              ]
+            }
+          )
+        ] }, l)) }),
+        /* @__PURE__ */ e(
+          t,
+          {
+            tag: "p",
+            className: "text-xs text-gray-500 dark:text-gray-400 mt-2",
+            children: "All colors support opacity modifiers (/10, /20, /30, /50, /80, etc.)"
+          }
+        )
+      ] }) }) })
+    ] })
+  ] });
+};
+export {
+  w as default
+};

package/documentation/ColorCustomizationSection-Dq8eABfF.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"),d=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>{const{primaryPreset:s}=r.useTheme(),a=["bg-brand","text-brand","border-brand","bg-primary","text-primary","border-primary","bg-secondary","text-secondary","border-secondary","bg-accent","text-accent","border-accent","bg-foreground","text-foreground","border-foreground","bg-muted","text-muted","border-muted","bg-border","border-border","bg-success","text-success","bg-warning","text-warning","bg-error","text-error","bg-info","text-info","bg-body","bg-dark","text-dark","bg-light","text-light","text-foreground/60","bg-brand/50","border-brand/30"];return e.jsxs(e.Fragment,{children:[e.jsx(r.HeroCard,{title:"Color Customization",description:"Dynamic brand colors using CSS custom properties and seamless Tailwind CSS utility integration.",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-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(d.Brush,{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:"Dynamic Brand Colors"}),e.jsx(r.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Real-time theme updates via CSS custom properties"})]}),e.jsx(r.CardContainer,{children:e.jsx(r.CardTitle,{title:"Active CSS Variable",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(r.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:["Brand colors are dynamically applied using CSS custom properties, allowing real-time theme updates without rebuilding. Colors are defined in"," ",e.jsx("code",{className:"px-1 py-0.5 border border-border rounded text-xs",children:"ui/tucu-ui/src/themes/config/index.ts"})]}),e.jsx("div",{className:"p-3 flex justify-center items-center bg-gray-200 dark:bg-gray-800 rounded-lg w-full",children:e.jsxs(r.Typography,{tag:"code",className:"w-full text-sm text-gray-600 dark:text-gray-400",children:["--color-semantic-bg-primary:"," ",s?.value||"#0052ff"]})}),e.jsx(r.Alert,{variant:"info",children:e.jsxs(r.Typography,{tag:"p",className:"text-xs",children:[e.jsx("strong",{children:"Color Presets:"})," Spectrum colors use the"," ",e.jsx("code",{className:"px-1 py-0.5 border border-border rounded text-xs",children:"-50"})," ","value from Tucu UI Design Tokens. Default colors use semantic mappings (e.g., blue-60 for primary)."]})})]})})})]}),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:"Tailwind Integration"}),e.jsx(r.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Available utility classes that consume theme colors"})]}),e.jsx(r.CardContainer,{children:e.jsx(r.CardTitle,{title:"Utility Classes",children:e.jsxs("div",{className:"space-y-4",children:[e.jsx("div",{className:"grid grid-cols-2 sm:grid-cols-3 gap-2",children:a.map((t,i)=>e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("div",{className:`w-3 h-3 rounded border border-border ${t.includes("bg-")?t:"bg-brand"}`}),e.jsxs(r.Typography,{tag:"code",className:"text-xs text-gray-600 dark:text-gray-400",children:[".",t]})]},i))}),e.jsx(r.Typography,{tag:"p",className:"text-xs text-gray-500 dark:text-gray-400 mt-2",children:"All colors support opacity modifiers (/10, /20, /30, /50, /80, etc.)"})]})})})]})]})};exports.default=o;

package/documentation/ColorSystemSection-B3tm49L7.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),s=require("../index-DMs_SmPq.js"),x=require("lucide-react");require("react-router-dom");require("react-dom");const l=d=>{if(typeof window>"u")return"";const t=document.documentElement;return getComputedStyle(t).getPropertyValue(d).trim()||""},v=()=>{const{mode:d}=s.useTheme(),[t,c]=o.useState(0);o.useEffect(()=>{const a=setTimeout(()=>{c(r=>r+1)},100);return()=>clearTimeout(a)},[d]),o.useEffect(()=>{const a=new MutationObserver(()=>{c(r=>r+1)});return a.observe(document.documentElement,{attributes:!0,attributeFilter:["class","style"]}),()=>a.disconnect()},[]);const h=[{name:"Primary",class:"bg-primary",varName:"--color-primary"},{name:"Accent",class:"bg-accent",varName:"--color-accent"}],g=[{name:"Secondary",class:"bg-secondary",varName:"--color-secondary"},{name:"Background",class:"bg-body",varName:"--color-body"},{name:"Dark",class:"bg-dark",varName:"--color-dark"}],u=[{name:"Muted",class:"bg-muted",varName:"--color-muted"},{name:"Primary",class:"bg-foreground",varName:"--color-foreground"},{name:"Border",class:"bg-border",varName:"--color-border"}],p=[{name:"Success",class:"bg-success",varName:"--color-success"},{name:"Warning",class:"bg-warning",varName:"--color-warning"},{name:"Error",class:"bg-error",varName:"--color-error"},{name:"Info",class:"bg-info",varName:"--color-info"}],N=[{name:"blue",shades:[0,5,10,15,20,30,40,50,60,70,80,90,100]},{name:"green",shades:[0,5,10,15,20,30,40,50,60,70,80,90,100]},{name:"orange",shades:[0,5,10,15,20,30,40,50,60,70,80,90,100]},{name:"gray",shades:[0,5,10,15,20,30,40,50,60,70,80,90,100]},{name:"indigo",shades:[0,5,10,15,20,30,40,50,60,70,80,90,100]},{name:"pink",shades:[0,5,10,15,20,30,40,50,60,70,80,90,100]},{name:"purple",shades:[0,5,10,15,20,30,40,50,60,70,80,90,100]},{name:"red",shades:[0,5,10,15,20,30,40,50,60,70,80,90,100]},{name:"teal",shades:[0,5,10,15,20,30,40,50,60,70,80,90,100]},{name:"yellow",shades:[0,5,10,15,20,30,40,50,60,70,80,90,100]},{name:"chartreuse",shades:[0,5,10,15,20,30,40,50,60,70,80,90,100]}],b=[{name:"brand",varName:"--color-brand",class:"bg-brand"},{name:"primary",varName:"--color-primary",class:"bg-primary"},{name:"secondary",varName:"--color-secondary",class:"bg-secondary"},{name:"accent",varName:"--color-accent",class:"bg-accent"},{name:"foreground",varName:"--color-foreground",class:"bg-foreground"},{name:"muted",varName:"--color-muted",class:"bg-muted"},{name:"border",varName:"--color-border",class:"bg-border"},{name:"success",varName:"--color-success",class:"bg-success"},{name:"warning",varName:"--color-warning",class:"bg-warning"},{name:"error",varName:"--color-error",class:"bg-error"},{name:"info",varName:"--color-info",class:"bg-info"},{name:"body",varName:"--color-body",class:"bg-body"},{name:"dark",varName:"--color-dark",class:"bg-dark"},{name:"light",varName:"--color-light",class:"bg-light"},{name:"light-dark",varName:"--color-light-dark",class:"bg-light-dark"}];return e.jsxs("div",{className:"space-y-8 max-w-6xl sm:space-y-12 w-full mx-auto px-4 sm:px-6 lg:px-8 relative pt-8 lg:pt-12",children:[e.jsx(s.HeroCard,{title:"Color System",description:"Carefully crafted color palettes that work across all themes and contexts.",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-pink-500 via-rose-500 to-red-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(x.Palette,{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("div",{className:"space-y-8",children:[e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Brand Colors",className:"mt-2 mb-2",children:e.jsx("div",{className:"grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6",children:h.map(a=>{const r=l(a.varName);return e.jsxs("div",{className:"text-center space-y-2",children:[e.jsx("div",{className:`w-16 h-16 rounded-lg ${a.class} mx-auto border border-border`}),e.jsxs("div",{className:"text-sm",children:[e.jsx("div",{className:"font-semibold",children:a.name}),e.jsx("div",{className:"text-muted text-xs",children:r||a.varName})]})]},`${a.name}-${t}`)})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Surfaces",className:"mt-2 mb-2",children:e.jsx("div",{className:"grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6",children:g.map(a=>{const r=l(a.varName);return e.jsxs("div",{className:"text-center space-y-2",children:[e.jsx("div",{className:`w-16 h-16 rounded-lg ${a.class} mx-auto border border-border`}),e.jsxs("div",{className:"text-sm",children:[e.jsx("div",{className:"font-semibold",children:a.name}),e.jsx("div",{className:"text-muted text-xs",children:r||a.varName})]})]},`surface-${a.name}-${t}`)})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Text",className:"mt-2 mb-2",children:e.jsx("div",{className:"grid grid-cols-2 sm:grid-cols-3 gap-4 sm:gap-6",children:u.map(a=>{const r=l(a.varName);return e.jsxs("div",{className:"text-center space-y-2",children:[e.jsx("div",{className:`w-16 h-16 rounded-lg ${a.class} mx-auto border border-border`}),e.jsxs("div",{className:"text-sm",children:[e.jsx("div",{className:"font-semibold",children:a.name}),e.jsx("div",{className:"text-muted text-xs",children:r||a.varName})]})]},`text-${a.name}-${t}`)})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Status",className:"mt-2 mb-2",children:e.jsx("div",{className:"grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6",children:p.map(a=>{const r=l(a.varName);return e.jsxs("div",{className:"text-center space-y-2",children:[e.jsx("div",{className:`w-16 h-16 rounded-lg ${a.class} mx-auto border border-border`}),e.jsxs("div",{className:"text-sm",children:[e.jsx("div",{className:"font-semibold",children:a.name}),e.jsx("div",{className:"text-muted text-xs",children:r||a.varName})]})]},`status-${a.name}-${t}`)})})})}),e.jsx(s.Alert,{variant:"info",children:e.jsxs("div",{children:[e.jsxs("div",{className:"font-semibold flex items-center gap-2",children:[e.jsx(x.Info,{className:"h-4 w-4"}),"Dynamic Theming"]}),e.jsx("div",{children:"Colors automatically adapt based on the selected theme preset and mode (light/dark)."})]})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Color Spectrum",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-8 p-4 sm:p-6",children:[e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-6",children:"Complete color palette with all shades from 0 to 100 for each color spectrum."}),e.jsx("div",{className:"space-y-8",children:N.map(a=>e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h3",className:"font-semibold text-lg mb-4 capitalize",children:a.name}),e.jsx("div",{className:"grid grid-cols-4 sm:grid-cols-7 md:grid-cols-10 lg:grid-cols-[repeat(13,minmax(0,1fr))] gap-2",children:a.shades.map(r=>{const n=`bg-${a.name}-${r}`,i=`--color-${a.name}-${r}`,m=l(i);return e.jsxs("div",{className:"space-y-1 w-full min-w-[40px]",children:[e.jsx("div",{className:`h-16 w-full rounded border border-border ${n}`,title:`${a.name}-${r}: ${m||i}`}),e.jsx(s.Typography,{tag:"h4",className:"text-center text-xs font-semibold",children:r}),m&&e.jsx(s.Typography,{tag:"h4",className:"text-center text-muted text-[10px]",children:m})]},`${a.name}-${r}-${t}`)})})]},a.name))})]})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Main Colors",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-8 p-4 sm:p-6",children:[e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-6",children:"Primary theme colors used throughout the application. These colors are mapped from semantic colors and adapt to light/dark mode."}),e.jsx("div",{className:"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4",children:b.map(a=>{const r=l(a.varName),n=a.name==="body"||a.name==="light"||a.name==="light-dark"?"text-dark dark:text-light":"text-white";return e.jsxs("div",{className:"space-y-2 border border-border rounded-lg p-2",children:[e.jsx("div",{className:`h-20 rounded flex items-center justify-center ${a.class} ${n} border border-border`,title:`${a.name}: var(${a.varName})${r?` = ${r}`:""}`,children:e.jsx(s.Typography,{tag:"h4",className:"text-center px-2 break-all text-xs",children:a.name})}),e.jsx(s.Typography,{tag:"h4",className:"text-center text-muted text-xs",children:a.name}),r&&e.jsx(s.Typography,{tag:"h4",className:"text-center text-muted text-[10px]",children:r}),e.jsx(s.Typography,{tag:"h4",className:"text-center text-muted text-[9px] mt-1 break-all px-1",children:a.class})]},`main-${a.name}-${t}`)})})]})})})]})]})};exports.default=v;

package/documentation/ColorSystemSection-yh45iiHj.js

@@ -0,0 +1,339 @@
+import { jsxs as s, jsx as a } from "react/jsx-runtime";
+import { useState as y, useEffect as u } from "react";
+import { ay as w, H as $, C as l, a as d, aj as k, T as t } from "../index-19KsCnyX.js";
+import { Palette as C, Info as S } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const c = (n) => {
+  if (typeof window > "u") return "";
+  const m = document.documentElement;
+  return getComputedStyle(m).getPropertyValue(n).trim() || "";
+}, H = () => {
+  const { mode: n } = w(), [m, o] = y(0);
+  u(() => {
+    const e = setTimeout(() => {
+      o((r) => r + 1);
+    }, 100);
+    return () => clearTimeout(e);
+  }, [n]), u(() => {
+    const e = new MutationObserver(() => {
+      o((r) => r + 1);
+    });
+    return e.observe(document.documentElement, {
+      attributes: !0,
+      attributeFilter: ["class", "style"]
+    }), () => e.disconnect();
+  }, []);
+  const N = [
+    { name: "Primary", class: "bg-primary", varName: "--color-primary" },
+    { name: "Accent", class: "bg-accent", varName: "--color-accent" }
+  ], v = [
+    { name: "Secondary", class: "bg-secondary", varName: "--color-secondary" },
+    { name: "Background", class: "bg-body", varName: "--color-body" },
+    { name: "Dark", class: "bg-dark", varName: "--color-dark" }
+  ], b = [
+    { name: "Muted", class: "bg-muted", varName: "--color-muted" },
+    { name: "Primary", class: "bg-foreground", varName: "--color-foreground" },
+    { name: "Border", class: "bg-border", varName: "--color-border" }
+  ], p = [
+    { name: "Success", class: "bg-success", varName: "--color-success" },
+    { name: "Warning", class: "bg-warning", varName: "--color-warning" },
+    { name: "Error", class: "bg-error", varName: "--color-error" },
+    { name: "Info", class: "bg-info", varName: "--color-info" }
+  ], x = [
+    {
+      name: "blue",
+      shades: [0, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100]
+    },
+    {
+      name: "green",
+      shades: [0, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100]
+    },
+    {
+      name: "orange",
+      shades: [0, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100]
+    },
+    {
+      name: "gray",
+      shades: [0, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100]
+    },
+    {
+      name: "indigo",
+      shades: [0, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100]
+    },
+    {
+      name: "pink",
+      shades: [0, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100]
+    },
+    {
+      name: "purple",
+      shades: [0, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100]
+    },
+    {
+      name: "red",
+      shades: [0, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100]
+    },
+    {
+      name: "teal",
+      shades: [0, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100]
+    },
+    {
+      name: "yellow",
+      shades: [0, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100]
+    },
+    {
+      name: "chartreuse",
+      shades: [0, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100]
+    }
+  ], f = [
+    { name: "brand", varName: "--color-brand", class: "bg-brand" },
+    { name: "primary", varName: "--color-primary", class: "bg-primary" },
+    { name: "secondary", varName: "--color-secondary", class: "bg-secondary" },
+    { name: "accent", varName: "--color-accent", class: "bg-accent" },
+    {
+      name: "foreground",
+      varName: "--color-foreground",
+      class: "bg-foreground"
+    },
+    { name: "muted", varName: "--color-muted", class: "bg-muted" },
+    { name: "border", varName: "--color-border", class: "bg-border" },
+    { name: "success", varName: "--color-success", class: "bg-success" },
+    { name: "warning", varName: "--color-warning", class: "bg-warning" },
+    { name: "error", varName: "--color-error", class: "bg-error" },
+    { name: "info", varName: "--color-info", class: "bg-info" },
+    { name: "body", varName: "--color-body", class: "bg-body" },
+    { name: "dark", varName: "--color-dark", class: "bg-dark" },
+    { name: "light", varName: "--color-light", class: "bg-light" },
+    {
+      name: "light-dark",
+      varName: "--color-light-dark",
+      class: "bg-light-dark"
+    }
+  ];
+  return /* @__PURE__ */ s("div", { className: "space-y-8 max-w-6xl sm:space-y-12 w-full mx-auto px-4 sm:px-6 lg:px-8 relative pt-8 lg:pt-12", children: [
+    /* @__PURE__ */ a(
+      $,
+      {
+        title: "Color System",
+        description: "Carefully crafted color palettes that work across all themes and contexts.",
+        icon: /* @__PURE__ */ a("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-pink-500 via-rose-500 to-red-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ a(C, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ s("div", { className: "space-y-8", children: [
+      /* @__PURE__ */ a(l, { className: "overflow-hidden", children: /* @__PURE__ */ a(d, { title: "Brand Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6", children: N.map((e) => {
+        const r = c(e.varName);
+        return /* @__PURE__ */ s(
+          "div",
+          {
+            className: "text-center space-y-2",
+            children: [
+              /* @__PURE__ */ a(
+                "div",
+                {
+                  className: `w-16 h-16 rounded-lg ${e.class} mx-auto border border-border`
+                }
+              ),
+              /* @__PURE__ */ s("div", { className: "text-sm", children: [
+                /* @__PURE__ */ a("div", { className: "font-semibold", children: e.name }),
+                /* @__PURE__ */ a("div", { className: "text-muted text-xs", children: r || e.varName })
+              ] })
+            ]
+          },
+          `${e.name}-${m}`
+        );
+      }) }) }) }),
+      /* @__PURE__ */ a(l, { className: "overflow-hidden", children: /* @__PURE__ */ a(d, { title: "Surfaces", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6", children: v.map((e) => {
+        const r = c(e.varName);
+        return /* @__PURE__ */ s(
+          "div",
+          {
+            className: "text-center space-y-2",
+            children: [
+              /* @__PURE__ */ a(
+                "div",
+                {
+                  className: `w-16 h-16 rounded-lg ${e.class} mx-auto border border-border`
+                }
+              ),
+              /* @__PURE__ */ s("div", { className: "text-sm", children: [
+                /* @__PURE__ */ a("div", { className: "font-semibold", children: e.name }),
+                /* @__PURE__ */ a("div", { className: "text-muted text-xs", children: r || e.varName })
+              ] })
+            ]
+          },
+          `surface-${e.name}-${m}`
+        );
+      }) }) }) }),
+      /* @__PURE__ */ a(l, { className: "overflow-hidden", children: /* @__PURE__ */ a(d, { title: "Text", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-2 sm:grid-cols-3 gap-4 sm:gap-6", children: b.map((e) => {
+        const r = c(e.varName);
+        return /* @__PURE__ */ s(
+          "div",
+          {
+            className: "text-center space-y-2",
+            children: [
+              /* @__PURE__ */ a(
+                "div",
+                {
+                  className: `w-16 h-16 rounded-lg ${e.class} mx-auto border border-border`
+                }
+              ),
+              /* @__PURE__ */ s("div", { className: "text-sm", children: [
+                /* @__PURE__ */ a("div", { className: "font-semibold", children: e.name }),
+                /* @__PURE__ */ a("div", { className: "text-muted text-xs", children: r || e.varName })
+              ] })
+            ]
+          },
+          `text-${e.name}-${m}`
+        );
+      }) }) }) }),
+      /* @__PURE__ */ a(l, { className: "overflow-hidden", children: /* @__PURE__ */ a(d, { title: "Status", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6", children: p.map((e) => {
+        const r = c(e.varName);
+        return /* @__PURE__ */ s(
+          "div",
+          {
+            className: "text-center space-y-2",
+            children: [
+              /* @__PURE__ */ a(
+                "div",
+                {
+                  className: `w-16 h-16 rounded-lg ${e.class} mx-auto border border-border`
+                }
+              ),
+              /* @__PURE__ */ s("div", { className: "text-sm", children: [
+                /* @__PURE__ */ a("div", { className: "font-semibold", children: e.name }),
+                /* @__PURE__ */ a("div", { className: "text-muted text-xs", children: r || e.varName })
+              ] })
+            ]
+          },
+          `status-${e.name}-${m}`
+        );
+      }) }) }) }),
+      /* @__PURE__ */ a(k, { variant: "info", children: /* @__PURE__ */ s("div", { children: [
+        /* @__PURE__ */ s("div", { className: "font-semibold flex items-center gap-2", children: [
+          /* @__PURE__ */ a(S, { className: "h-4 w-4" }),
+          "Dynamic Theming"
+        ] }),
+        /* @__PURE__ */ a("div", { children: "Colors automatically adapt based on the selected theme preset and mode (light/dark)." })
+      ] }) }),
+      /* @__PURE__ */ a(l, { className: "overflow-hidden", children: /* @__PURE__ */ a(d, { title: "Color Spectrum", className: "mt-2 mb-2", children: /* @__PURE__ */ s("div", { className: "w-full space-y-8 p-4 sm:p-6", children: [
+        /* @__PURE__ */ a(
+          t,
+          {
+            tag: "p",
+            className: "text-gray-600 dark:text-gray-400 mb-6",
+            children: "Complete color palette with all shades from 0 to 100 for each color spectrum."
+          }
+        ),
+        /* @__PURE__ */ a("div", { className: "space-y-8", children: x.map((e) => /* @__PURE__ */ s("div", { children: [
+          /* @__PURE__ */ a(
+            t,
+            {
+              tag: "h3",
+              className: "font-semibold text-lg mb-4 capitalize",
+              children: e.name
+            }
+          ),
+          /* @__PURE__ */ a("div", { className: "grid grid-cols-4 sm:grid-cols-7 md:grid-cols-10 lg:grid-cols-[repeat(13,minmax(0,1fr))] gap-2", children: e.shades.map((r) => {
+            const i = `bg-${e.name}-${r}`, g = `--color-${e.name}-${r}`, h = c(g);
+            return /* @__PURE__ */ s(
+              "div",
+              {
+                className: "space-y-1 w-full min-w-[40px]",
+                children: [
+                  /* @__PURE__ */ a(
+                    "div",
+                    {
+                      className: `h-16 w-full rounded border border-border ${i}`,
+                      title: `${e.name}-${r}: ${h || g}`
+                    }
+                  ),
+                  /* @__PURE__ */ a(
+                    t,
+                    {
+                      tag: "h4",
+                      className: "text-center text-xs font-semibold",
+                      children: r
+                    }
+                  ),
+                  h && /* @__PURE__ */ a(
+                    t,
+                    {
+                      tag: "h4",
+                      className: "text-center text-muted text-[10px]",
+                      children: h
+                    }
+                  )
+                ]
+              },
+              `${e.name}-${r}-${m}`
+            );
+          }) })
+        ] }, e.name)) })
+      ] }) }) }),
+      /* @__PURE__ */ a(l, { className: "overflow-hidden", children: /* @__PURE__ */ a(d, { title: "Main Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ s("div", { className: "w-full space-y-8 p-4 sm:p-6", children: [
+        /* @__PURE__ */ a(
+          t,
+          {
+            tag: "p",
+            className: "text-gray-600 dark:text-gray-400 mb-6",
+            children: "Primary theme colors used throughout the application. These colors are mapped from semantic colors and adapt to light/dark mode."
+          }
+        ),
+        /* @__PURE__ */ a("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", children: f.map((e) => {
+          const r = c(e.varName), i = e.name === "body" || e.name === "light" || e.name === "light-dark" ? "text-dark dark:text-light" : "text-white";
+          return /* @__PURE__ */ s(
+            "div",
+            {
+              className: "space-y-2 border border-border rounded-lg p-2",
+              children: [
+                /* @__PURE__ */ a(
+                  "div",
+                  {
+                    className: `h-20 rounded flex items-center justify-center ${e.class} ${i} border border-border`,
+                    title: `${e.name}: var(${e.varName})${r ? ` = ${r}` : ""}`,
+                    children: /* @__PURE__ */ a(
+                      t,
+                      {
+                        tag: "h4",
+                        className: "text-center px-2 break-all text-xs",
+                        children: e.name
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ a(
+                  t,
+                  {
+                    tag: "h4",
+                    className: "text-center text-muted text-xs",
+                    children: e.name
+                  }
+                ),
+                r && /* @__PURE__ */ a(
+                  t,
+                  {
+                    tag: "h4",
+                    className: "text-center text-muted text-[10px]",
+                    children: r
+                  }
+                ),
+                /* @__PURE__ */ a(
+                  t,
+                  {
+                    tag: "h4",
+                    className: "text-center text-muted text-[9px] mt-1 break-all px-1",
+                    children: e.class
+                  }
+                )
+              ]
+            },
+            `main-${e.name}-${m}`
+          );
+        }) })
+      ] }) }) })
+    ] })
+  ] });
+};
+export {
+  H as default
+};

package/documentation/CommonErrorsSection-DQrjcfPF.js

@@ -0,0 +1,77 @@
+import { jsxs as o, Fragment as i, jsx as e } from "react/jsx-runtime";
+import { H as n, T as r, C as m, a as l, aj as d } from "../index-19KsCnyX.js";
+import { Bug as c, AlertCircle as u, XCircle as h, Info as s, AlertTriangle as p } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const x = () => /* @__PURE__ */ o(i, { children: [
+  /* @__PURE__ */ e(
+    n,
+    {
+      title: "Common Errors and Solutions",
+      description: "Troubleshooting guide for the most frequent layout system issues.",
+      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-red-500 via-rose-500 to-pink-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(c, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+    }
+  ),
+  /* @__PURE__ */ o("div", { className: "text-center", children: [
+    /* @__PURE__ */ e(r, { tag: "h2", className: "mb-2", children: "Common Errors and Solutions" }),
+    /* @__PURE__ */ e(
+      r,
+      {
+        tag: "p",
+        className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+        children: "Troubleshooting guide for the most frequent layout system issues"
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e(m, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Troubleshooting Guide", className: "mt-2 mb-2", children: /* @__PURE__ */ o("div", { className: "w-full space-y-6 p-4 sm:p-6", children: [
+    /* @__PURE__ */ o("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-red-500 via-rose-500 to-pink-500 shadow-md", children: /* @__PURE__ */ e(u, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
+      /* @__PURE__ */ e(r, { tag: "h3", className: "text-base font-semibold", children: "Common Issues" })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "space-y-6", children: [
+      {
+        variant: "error",
+        icon: /* @__PURE__ */ e(h, { className: "h-4 w-4" }),
+        title: "useTheme must be used within ThemeProvider",
+        description: "This error occurs when you try to use useTheme outside of ThemeProvider context. Always wrap your application with ThemeProvider first. The ThemeProvider must be at the root level of your application."
+      },
+      {
+        variant: "info",
+        icon: /* @__PURE__ */ e(s, { className: "h-4 w-4" }),
+        title: "Layout not rendering correctly",
+        description: "Make sure you're using ThemeProvider instead of trying to use RootLayout directly. ThemeProvider handles all layout logic internally. Also ensure menuItems prop is provided for Admin and Horizontal layouts."
+      },
+      {
+        variant: "warning",
+        icon: /* @__PURE__ */ e(p, { className: "h-4 w-4" }),
+        title: "Menu items not showing",
+        description: "For Admin and Horizontal layouts, you must provide the menuItems prop. Clean layout does not require menuItems. Ensure each menu item has at least a name and path property."
+      },
+      {
+        variant: "info",
+        icon: /* @__PURE__ */ e(s, { className: "h-4 w-4" }),
+        title: "Routing not working as expected?",
+        description: /* @__PURE__ */ o(i, { children: [
+          "Remember that ThemeProvider includes BrowserRouter internally. If you use customRoutes, make sure to use ",
+          /* @__PURE__ */ e("code", { children: "path" }),
+          " instead of",
+          " ",
+          /* @__PURE__ */ e("code", { children: "href" }),
+          " in menuItems. The ",
+          /* @__PURE__ */ e("code", { children: "component" }),
+          " prop in menuItems is only used for automatic routing. If you provide customRoutes, it takes precedence."
+        ] })
+      }
+    ].map((t, a) => /* @__PURE__ */ e(d, { variant: t.variant, children: /* @__PURE__ */ o("div", { children: [
+      /* @__PURE__ */ o("div", { className: "flex items-center gap-2 font-semibold", children: [
+        t.icon,
+        t.title
+      ] }),
+      /* @__PURE__ */ e("div", { className: "text-sm mt-1", children: t.description })
+    ] }) }, a)) })
+  ] }) }) })
+] });
+export {
+  x as default
+};

package/documentation/CommonErrorsSection-Dy04oSz_.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DMs_SmPq.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>{const o=[{variant:"error",icon:e.jsx(t.XCircle,{className:"h-4 w-4"}),title:"useTheme must be used within ThemeProvider",description:"This error occurs when you try to use useTheme outside of ThemeProvider context. Always wrap your application with ThemeProvider first. The ThemeProvider must be at the root level of your application."},{variant:"info",icon:e.jsx(t.Info,{className:"h-4 w-4"}),title:"Layout not rendering correctly",description:"Make sure you're using ThemeProvider instead of trying to use RootLayout directly. ThemeProvider handles all layout logic internally. Also ensure menuItems prop is provided for Admin and Horizontal layouts."},{variant:"warning",icon:e.jsx(t.AlertTriangle,{className:"h-4 w-4"}),title:"Menu items not showing",description:"For Admin and Horizontal layouts, you must provide the menuItems prop. Clean layout does not require menuItems. Ensure each menu item has at least a name and path property."},{variant:"info",icon:e.jsx(t.Info,{className:"h-4 w-4"}),title:"Routing not working as expected?",description:e.jsxs(e.Fragment,{children:["Remember that ThemeProvider includes BrowserRouter internally. If you use customRoutes, make sure to use ",e.jsx("code",{children:"path"})," instead of"," ",e.jsx("code",{children:"href"})," in menuItems. The ",e.jsx("code",{children:"component"})," prop in menuItems is only used for automatic routing. If you provide customRoutes, it takes precedence."]})}];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Common Errors and Solutions",description:"Troubleshooting guide for the most frequent layout system issues.",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-red-500 via-rose-500 to-pink-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(t.Bug,{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("div",{className:"text-center",children:[e.jsx(s.Typography,{tag:"h2",className:"mb-2",children:"Common Errors and Solutions"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Troubleshooting guide for the most frequent layout system issues"})]}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Troubleshooting Guide",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-6 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-red-500 via-rose-500 to-pink-500 shadow-md",children:e.jsx(t.AlertCircle,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-base font-semibold",children:"Common Issues"})]}),e.jsx("div",{className:"space-y-6",children:o.map((r,i)=>e.jsx(s.Alert,{variant:r.variant,children:e.jsxs("div",{children:[e.jsxs("div",{className:"flex items-center gap-2 font-semibold",children:[r.icon,r.title]}),e.jsx("div",{className:"text-sm mt-1",children:r.description})]})},i))})]})})})]})};exports.default=n;