@e-burgos/tucu-ui 2.0.9 → 2.0.11

package/documentation/{MacOSBackgroundsSection-5FwRmwSt.js → MacOSBackgroundsSection-Dj11FbQr.js}

@@ -1,5 +1,5 @@
 import { jsxs as a, Fragment as c, jsx as e } from "react/jsx-runtime";
-import { ay as m, H as p, C as s, a as d, T as l, by as i, bz as n, y as g } from "../index-lfg6LZ1p.js";
+import { ay as m, H as p, C as s, a as d, T as l, az as o, aA as i, y as g } from "../index-4GONhZIF.js";
 import { Image as b } from "lucide-react";
 import "react-router-dom";
 import "react";
@@ -33,8 +33,8 @@ const h = [
     dimensions: "402 × 874",
     usage: "Mobile screens, narrow containers, portrait layouts"
   }
-], v = () => {
-  const { mode: o } = m(), r = o === "dark";
+], N = () => {
+  const { mode: n } = m(), r = n === "dark";
   return /* @__PURE__ */ a(c, { children: [
     /* @__PURE__ */ e(
       p,
@@ -56,7 +56,7 @@ const h = [
       /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4", children: h.map((t) => /* @__PURE__ */ a(
         "div",
         {
-          className: "p-4 rounded-xl border border-gray-200 dark:border-gray-700 space-y-2",
+          className: "p-4 rounded-xl border border-border space-y-2",
           children: [
             /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ e(
@@ -71,7 +71,7 @@ const h = [
               /* @__PURE__ */ e("span", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: t.name })
             ] }),
             /* @__PURE__ */ e("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: t.desc }),
-            /* @__PURE__ */ a("div", { className: "pt-2 border-t border-gray-100 dark:border-gray-800 space-y-1", children: [
+            /* @__PURE__ */ a("div", { className: "pt-2 border-t border-[var(--color-border)] space-y-1", children: [
               /* @__PURE__ */ e("p", { className: "text-[10px] font-mono text-gray-400", children: t.dimensions }),
               /* @__PURE__ */ e("p", { className: "text-[10px] text-gray-400", children: t.usage })
             ] })
@@ -104,7 +104,7 @@ const h = [
           /* @__PURE__ */ e(
             "div",
             {
-              className: "relative w-full h-40 rounded-xl overflow-hidden border border-gray-200 dark:border-gray-700",
+              className: "relative w-full h-40 rounded-xl overflow-hidden border border-border",
               style: {
                 backgroundColor: r ? "#131318" : "#f0f2f7"
               },
@@ -127,7 +127,7 @@ const h = [
           /* @__PURE__ */ e(
             "div",
             {
-              className: "w-full h-40 rounded-xl border border-gray-200 dark:border-gray-700",
+              className: "w-full h-40 rounded-xl border border-border",
               style: {
                 background: r ? "linear-gradient(160deg, #141418 0%, #18181e 40%, #191520 70%, #141418 100%)" : "linear-gradient(160deg, #f0f2f6 0%, #eaedf4 40%, #f2f0f8 70%, #eef2f6 100%)"
               }
@@ -140,7 +140,7 @@ const h = [
           /* @__PURE__ */ e(
             "div",
             {
-              className: "w-full h-40 rounded-xl border border-gray-200 dark:border-gray-700",
+              className: "w-full h-40 rounded-xl border border-border",
               style: {
                 background: r ? "radial-gradient(ellipse 80% 60% at 20% 10%, rgba(0, 60, 160, 0.55) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 80% 80%, rgba(80, 0, 160, 0.4) 0%, transparent 55%), #101014" : "radial-gradient(ellipse 80% 60% at 20% 10%, rgba(100, 180, 255, 0.4) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 80% 80%, rgba(160, 120, 255, 0.3) 0%, transparent 55%), #f0f2f7"
               }
@@ -161,18 +161,19 @@ const h = [
         }
       ),
       /* @__PURE__ */ e("p", { className: "text-[10px] font-mono text-gray-400 mb-4", children: "1512 × 982 — Landscape (desktop full-screen)" }),
-      /* @__PURE__ */ e("div", { className: "rounded-xl overflow-hidden border border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ e(
-        i,
+      /* @__PURE__ */ e("div", { className: "rounded-xl overflow-hidden border border-border", children: /* @__PURE__ */ e(
+        o,
         {
+          mode: "absolute",
           variant: "wave",
-          className: "rounded-xl",
+          className: "rounded-xl !relative !inset-auto !z-auto",
           style: { height: "320px" }
         }
       ) }),
       /* @__PURE__ */ e("div", { className: "mt-3 p-3 rounded-lg bg-gray-100 dark:bg-gray-800/50", children: /* @__PURE__ */ a("p", { className: "text-[11px] font-mono text-gray-500 dark:text-gray-400", children: [
         /* @__PURE__ */ e("span", { className: "text-gray-700 dark:text-gray-300", children: "url:" }),
         " ",
-        n("wave", r)
+        i("wave", r)
       ] }) })
     ] }) }) }),
     /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Wallpaper", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: [
@@ -185,18 +186,19 @@ const h = [
         }
       ),
       /* @__PURE__ */ e("p", { className: "text-[10px] font-mono text-gray-400 mb-4", children: "1080 × 560 — Landscape (contained sections)" }),
-      /* @__PURE__ */ e("div", { className: "rounded-xl overflow-hidden border border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ e(
-        i,
+      /* @__PURE__ */ e("div", { className: "rounded-xl overflow-hidden border border-border", children: /* @__PURE__ */ e(
+        o,
         {
+          mode: "absolute",
           variant: "wallpaper",
-          className: "rounded-xl",
+          className: "rounded-xl !relative !inset-auto !z-auto",
           style: { height: "280px" }
         }
       ) }),
       /* @__PURE__ */ e("div", { className: "mt-3 p-3 rounded-lg bg-gray-100 dark:bg-gray-800/50", children: /* @__PURE__ */ a("p", { className: "text-[11px] font-mono text-gray-500 dark:text-gray-400", children: [
         /* @__PURE__ */ e("span", { className: "text-gray-700 dark:text-gray-300", children: "url:" }),
         " ",
-        n("wallpaper", r)
+        i("wallpaper", r)
       ] }) })
     ] }) }) }),
     /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Mobile", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: [
@@ -212,13 +214,14 @@ const h = [
       /* @__PURE__ */ e("div", { className: "flex justify-center", children: /* @__PURE__ */ e(
         "div",
         {
-          className: "rounded-xl overflow-hidden border border-gray-200 dark:border-gray-700",
+          className: "rounded-xl overflow-hidden border border-border",
           style: { width: "220px", height: "478px" },
           children: /* @__PURE__ */ e(
-            i,
+            o,
             {
+              mode: "absolute",
               variant: "mobile",
-              className: "rounded-xl w-full h-full"
+              className: "rounded-xl w-full h-full !relative !inset-auto !z-auto"
             }
           )
         }
@@ -226,7 +229,7 @@ const h = [
       /* @__PURE__ */ e("div", { className: "mt-3 p-3 rounded-lg bg-gray-100 dark:bg-gray-800/50", children: /* @__PURE__ */ a("p", { className: "text-[11px] font-mono text-gray-500 dark:text-gray-400", children: [
         /* @__PURE__ */ e("span", { className: "text-gray-700 dark:text-gray-300", children: "url:" }),
         " ",
-        n("mobile", r)
+        i("mobile", r)
       ] }) })
     ] }) }) }),
     /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Screen Size Mapping", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: [
@@ -285,6 +288,6 @@ const h = [
   ] });
 };
 export {
-  v as MacOSBackgroundsSection,
-  v as default
+  N as MacOSBackgroundsSection,
+  N as default
 };

package/documentation/MacOSColorsSection-CjuG1kI6.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../index-C0NugKZs.js"),b=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const g=[{label:"Blue",light:"#007aff",dark:"#0a84ff"},{label:"Green",light:"#34c759",dark:"#30d158"},{label:"Orange",light:"#ff9500",dark:"#ff9f0a"},{label:"Red",light:"#ff3b30",dark:"#ff453a"},{label:"Yellow",light:"#ffcc00",dark:"#ffd60a"},{label:"Purple",light:"#af52de",dark:"#bf5af2"},{label:"Pink",light:"#ff2d55",dark:"#ff375f"},{label:"Teal",light:"#5ac8fa",dark:"#64d2ff"},{label:"Indigo",light:"#5856d6",dark:"#5e5ce6"}],m=[{label:"Gray",light:"#8e8e93",dark:"#8e8e93"},{label:"Gray 2",light:"#aeaeb2",dark:"#636366"},{label:"Gray 3",light:"#c7c7cc",dark:"#48484a"},{label:"Gray 4",light:"#d1d1d6",dark:"#3a3a3c"},{label:"Gray 5",light:"#e5e5ea",dark:"#2c2c2e"},{label:"Gray 6",light:"#f2f2f7",dark:"#1c1c1e"}],s={light:[{label:"Primary",color:"rgba(0, 0, 0, 0.85)",opacity:.85,desc:"Main text"},{label:"Secondary",color:"rgba(60, 60, 67, 0.6)",opacity:.6,desc:"Subtitles"},{label:"Tertiary",color:"rgba(60, 60, 67, 0.3)",opacity:.3,desc:"Placeholders"},{label:"Quaternary",color:"rgba(60, 60, 67, 0.18)",opacity:.18,desc:"Disabled"},{label:"Quinary",color:"rgba(60, 60, 67, 0.05)",opacity:.05,desc:"Faint"}],dark:[{label:"Primary",color:"rgba(255, 255, 255, 0.85)",opacity:.85,desc:"Main text"},{label:"Secondary",color:"rgba(235, 235, 245, 0.6)",opacity:.6,desc:"Subtitles"},{label:"Tertiary",color:"rgba(235, 235, 245, 0.3)",opacity:.3,desc:"Placeholders"},{label:"Quaternary",color:"rgba(235, 235, 245, 0.18)",opacity:.18,desc:"Disabled"},{label:"Quinary",color:"rgba(235, 235, 245, 0.05)",opacity:.05,desc:"Faint"}]},t={light:[{label:"Label",value:"rgba(0, 0, 0, 0.85)"},{label:"Secondary Label",value:"rgba(60, 60, 67, 0.6)"},{label:"Tertiary Label",value:"rgba(60, 60, 67, 0.3)"},{label:"Separator",value:"rgba(60, 60, 67, 0.29)"},{label:"Window BG",value:"#ececec"},{label:"Control BG",value:"#ffffff"},{label:"Accent",value:"#007aff"},{label:"Link",value:"#0068da"}],dark:[{label:"Label",value:"rgba(255, 255, 255, 0.85)"},{label:"Secondary Label",value:"rgba(235, 235, 245, 0.6)"},{label:"Tertiary Label",value:"rgba(235, 235, 245, 0.3)"},{label:"Separator",value:"rgba(84, 84, 88, 0.65)"},{label:"Window BG",value:"#1e1e1e"},{label:"Control BG",value:"#1e1e1e"},{label:"Accent",value:"#0a84ff"},{label:"Link",value:"#419cff"}]},d=()=>{const{mode:c}=l.useTheme(),r=c==="dark",i=r?s.dark:s.light,o=r?t.dark:t.light;return e.jsxs(e.Fragment,{children:[e.jsx(l.HeroCard,{title:"Colors",description:"macOS system color palette based on Apple HIG. All colors adapt between light and dark appearances automatically.",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-400 via-blue-500 to-purple-600 rounded-full flex items-center justify-center shadow-lg border border-red-400/50",children:e.jsx(b.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.jsx(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.CardTitle,{title:"Label Hierarchy",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsx(l.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:"Text labels use varying opacity levels to create visual hierarchy. Colors adapt based on the current appearance mode."}),e.jsx("div",{className:"rounded-xl p-6 border border-border",style:{backgroundColor:r?"#1e1e1e":"#ffffff"},children:e.jsx("div",{className:"grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4",children:i.map(a=>e.jsxs("div",{className:"flex flex-col items-center gap-2",children:[e.jsx("div",{className:"w-full h-16 rounded-lg border border-border flex items-center justify-center",style:{backgroundColor:a.color}}),e.jsx("span",{className:"text-sm font-medium",style:{color:a.color},children:a.label}),e.jsxs("span",{className:"text-[10px] text-gray-400",children:[Math.round(a.opacity*100),"% — ",a.desc]})]},a.label))})})]})})}),e.jsx(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.CardTitle,{title:"System Colors",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsxs(l.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:["9 vibrant system colors used for accents, charts, and interactive elements. Showing ",r?"dark":"light"," mode values."]}),e.jsx("div",{className:"grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-9 gap-3",children:g.map(a=>e.jsxs("div",{className:"flex flex-col items-center gap-2",children:[e.jsx("div",{className:"w-full h-16 rounded-xl shadow-sm",style:{backgroundColor:r?a.dark:a.light}}),e.jsx("span",{className:"text-xs font-medium text-gray-700 dark:text-gray-300",children:a.label}),e.jsx("span",{className:"text-[10px] text-gray-400 font-mono",children:r?a.dark:a.light})]},a.label))})]})})}),e.jsx(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.CardTitle,{title:"Gray Scale",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsxs(l.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:["6 neutral grays for backgrounds, borders, and disabled states. Showing ",r?"dark":"light"," mode values."]}),e.jsx("div",{className:"grid grid-cols-3 sm:grid-cols-6 gap-3",children:m.map(a=>e.jsxs("div",{className:"flex flex-col items-center gap-2",children:[e.jsx("div",{className:"w-full h-16 rounded-xl border border-border",style:{backgroundColor:r?a.dark:a.light}}),e.jsx("span",{className:"text-xs font-medium text-gray-700 dark:text-gray-300",children:a.label}),e.jsx("span",{className:"text-[10px] text-gray-400 font-mono",children:r?a.dark:a.light})]},a.label))})]})})}),e.jsx(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.CardTitle,{title:"Semantic Colors",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsxs(l.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:["Purpose-driven tokens mapped to CSS variables. Values shown correspond to the current ",r?"dark":"light"," appearance."]}),e.jsx("div",{className:"grid grid-cols-2 sm:grid-cols-4 gap-3",children:o.map(a=>e.jsxs("div",{className:"flex flex-col gap-2 p-3 rounded-lg border border-border",children:[e.jsx("div",{className:"w-full h-10 rounded-md border border-border",style:{backgroundColor:a.value}}),e.jsx("span",{className:"text-xs font-medium text-gray-700 dark:text-gray-300",children:a.label}),e.jsx("span",{className:"text-[10px] text-gray-400 font-mono break-all",children:a.value})]},a.label))})]})})}),e.jsx(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.CardTitle,{title:"Tinted Colors",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsx(l.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:"System blue applied at varying opacities creates tinted backgrounds for selections and active states."}),e.jsx("div",{className:"flex flex-wrap gap-3",children:[.05,.1,.15,.2,.3,.5].map(a=>{const n=r?`rgba(10, 132, 255, ${a})`:`rgba(0, 122, 255, ${a})`;return e.jsxs("div",{className:"flex flex-col items-center gap-2",children:[e.jsx("div",{className:"w-20 h-14 rounded-lg border border-border",style:{backgroundColor:n}}),e.jsxs("span",{className:"text-[10px] text-gray-400 font-mono",children:[Math.round(a*100),"%"]})]},a)})})]})})})]})};exports.MacOSColorsSection=d;exports.default=d;

package/documentation/{MacOSColorsSection-YEtkXtT9.js → MacOSColorsSection-DGPBZ1Sb.js}

@@ -1,10 +1,10 @@
-import { jsxs as l, Fragment as m, jsx as e } from "react/jsx-runtime";
-import { ay as h, H as f, C as t, a as d, T as s } from "../index-lfg6LZ1p.js";
+import { jsxs as l, Fragment as g, jsx as e } from "react/jsx-runtime";
+import { ay as h, H as f, C as t, a as s, T as d } from "../index-4GONhZIF.js";
 import { Palette as p } from "lucide-react";
 import "react-router-dom";
 import "react";
 import "react-dom";
-const y = [
+const u = [
   { label: "Blue", light: "#007aff", dark: "#0a84ff" },
   { label: "Green", light: "#34c759", dark: "#30d158" },
   { label: "Orange", light: "#ff9500", dark: "#ff9f0a" },
@@ -14,7 +14,7 @@ const y = [
   { label: "Pink", light: "#ff2d55", dark: "#ff375f" },
   { label: "Teal", light: "#5ac8fa", dark: "#64d2ff" },
   { label: "Indigo", light: "#5856d6", dark: "#5e5ce6" }
-], u = [
+], y = [
   { label: "Gray", light: "#8e8e93", dark: "#8e8e93" },
   { label: "Gray 2", light: "#aeaeb2", dark: "#636366" },
   { label: "Gray 3", light: "#c7c7cc", dark: "#48484a" },
@@ -109,7 +109,7 @@ const y = [
   ]
 }, S = () => {
   const { mode: o } = h(), r = o === "dark", n = r ? c.dark : c.light, b = r ? i.dark : i.light;
-  return /* @__PURE__ */ l(m, { children: [
+  return /* @__PURE__ */ l(g, { children: [
     /* @__PURE__ */ e(
       f,
       {
@@ -118,9 +118,9 @@ const y = [
         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-400 via-blue-500 to-purple-600 rounded-full flex items-center justify-center shadow-lg border border-red-400/50", children: /* @__PURE__ */ e(p, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
       }
     ),
-    /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Label Hierarchy", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full p-4 sm:p-6", children: [
+    /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Label Hierarchy", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full p-4 sm:p-6", children: [
       /* @__PURE__ */ e(
-        s,
+        d,
         {
           tag: "p",
           className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
@@ -130,7 +130,7 @@ const y = [
       /* @__PURE__ */ e(
         "div",
         {
-          className: "rounded-xl p-6 border border-gray-200 dark:border-gray-700",
+          className: "rounded-xl p-6 border border-border",
           style: { backgroundColor: r ? "#1e1e1e" : "#ffffff" },
           children: /* @__PURE__ */ e("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4", children: n.map((a) => /* @__PURE__ */ l(
             "div",
@@ -140,7 +140,7 @@ const y = [
                 /* @__PURE__ */ e(
                   "div",
                   {
-                    className: "w-full h-16 rounded-lg border border-gray-200 dark:border-gray-700 flex items-center justify-center",
+                    className: "w-full h-16 rounded-lg border border-border flex items-center justify-center",
                     style: { backgroundColor: a.color }
                   }
                 ),
@@ -164,9 +164,9 @@ const y = [
         }
       )
     ] }) }) }),
-    /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "System Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full p-4 sm:p-6", children: [
+    /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "System Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full p-4 sm:p-6", children: [
       /* @__PURE__ */ l(
-        s,
+        d,
         {
           tag: "p",
           className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
@@ -177,7 +177,7 @@ const y = [
           ]
         }
       ),
-      /* @__PURE__ */ e("div", { className: "grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-9 gap-3", children: y.map((a) => /* @__PURE__ */ l(
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-9 gap-3", children: u.map((a) => /* @__PURE__ */ l(
         "div",
         {
           className: "flex flex-col items-center gap-2",
@@ -198,9 +198,9 @@ const y = [
         a.label
       )) })
     ] }) }) }),
-    /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Gray Scale", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full p-4 sm:p-6", children: [
+    /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Gray Scale", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full p-4 sm:p-6", children: [
       /* @__PURE__ */ l(
-        s,
+        d,
         {
           tag: "p",
           className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
@@ -211,7 +211,7 @@ const y = [
           ]
         }
       ),
-      /* @__PURE__ */ e("div", { className: "grid grid-cols-3 sm:grid-cols-6 gap-3", children: u.map((a) => /* @__PURE__ */ l(
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-3 sm:grid-cols-6 gap-3", children: y.map((a) => /* @__PURE__ */ l(
         "div",
         {
           className: "flex flex-col items-center gap-2",
@@ -219,7 +219,7 @@ const y = [
             /* @__PURE__ */ e(
               "div",
               {
-                className: "w-full h-16 rounded-xl border border-gray-200 dark:border-gray-700",
+                className: "w-full h-16 rounded-xl border border-border",
                 style: {
                   backgroundColor: r ? a.dark : a.light
                 }
@@ -232,9 +232,9 @@ const y = [
         a.label
       )) })
     ] }) }) }),
-    /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Semantic Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full p-4 sm:p-6", children: [
+    /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Semantic Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full p-4 sm:p-6", children: [
       /* @__PURE__ */ l(
-        s,
+        d,
         {
           tag: "p",
           className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
@@ -248,12 +248,12 @@ const y = [
       /* @__PURE__ */ e("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-3", children: b.map((a) => /* @__PURE__ */ l(
         "div",
         {
-          className: "flex flex-col gap-2 p-3 rounded-lg border border-gray-200 dark:border-gray-700",
+          className: "flex flex-col gap-2 p-3 rounded-lg border border-border",
           children: [
             /* @__PURE__ */ e(
               "div",
               {
-                className: "w-full h-10 rounded-md border border-gray-200 dark:border-gray-600",
+                className: "w-full h-10 rounded-md border border-border",
                 style: { backgroundColor: a.value }
               }
             ),
@@ -264,9 +264,9 @@ const y = [
         a.label
       )) })
     ] }) }) }),
-    /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Tinted Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full p-4 sm:p-6", children: [
+    /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Tinted Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full p-4 sm:p-6", children: [
       /* @__PURE__ */ e(
-        s,
+        d,
         {
           tag: "p",
           className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
@@ -274,7 +274,7 @@ const y = [
         }
       ),
       /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-3", children: [0.05, 0.1, 0.15, 0.2, 0.3, 0.5].map((a) => {
-        const g = r ? `rgba(10, 132, 255, ${a})` : `rgba(0, 122, 255, ${a})`;
+        const m = r ? `rgba(10, 132, 255, ${a})` : `rgba(0, 122, 255, ${a})`;
         return /* @__PURE__ */ l(
           "div",
           {
@@ -283,8 +283,8 @@ const y = [
               /* @__PURE__ */ e(
                 "div",
                 {
-                  className: "w-20 h-14 rounded-lg border border-gray-200 dark:border-gray-700",
-                  style: { backgroundColor: g }
+                  className: "w-20 h-14 rounded-lg border border-border",
+                  style: { backgroundColor: m }
                 }
               ),
               /* @__PURE__ */ l("span", { className: "text-[10px] text-gray-400 font-mono", children: [

package/documentation/{MacOSCommandPaletteSection-WanBDypB.js → MacOSCommandPaletteSection-B6xGLV1Q.js}

@@ -1,15 +1,15 @@
 import { jsxs as a, Fragment as p, jsx as e } from "react/jsx-runtime";
 import { useState as s } from "react";
-import { H as h, C as r, a as i, x as c, bt as d, P as g, A as u, c as S } from "../index-lfg6LZ1p.js";
-import { Command as f, Search as n, FilePlus as N, FolderOpen as y, Save as v, Settings as b, Moon as w, Terminal as x } from "lucide-react";
+import { H as h, C as r, a as i, x as c, bv as d, P as g, A as u, c as S } from "../index-4GONhZIF.js";
+import { Command as f, Search as n, FilePlus as N, FolderOpen as v, Save as y, Settings as b, Moon as w, Terminal as x } from "lucide-react";
 import "react-router-dom";
 import "react-dom";
 const m = [
   { id: "new-file", label: "New File", group: "File", shortcut: ["⌘", "N"], icon: /* @__PURE__ */ e(N, { className: "w-4 h-4" }), onSelect: () => {
   } },
-  { id: "open-file", label: "Open File", group: "File", shortcut: ["⌘", "O"], icon: /* @__PURE__ */ e(y, { className: "w-4 h-4" }), onSelect: () => {
+  { id: "open-file", label: "Open File", group: "File", shortcut: ["⌘", "O"], icon: /* @__PURE__ */ e(v, { className: "w-4 h-4" }), onSelect: () => {
   } },
-  { id: "save", label: "Save", group: "File", shortcut: ["⌘", "S"], icon: /* @__PURE__ */ e(v, { className: "w-4 h-4" }), onSelect: () => {
+  { id: "save", label: "Save", group: "File", shortcut: ["⌘", "S"], icon: /* @__PURE__ */ e(y, { className: "w-4 h-4" }), onSelect: () => {
   } },
   { id: "settings", label: "Settings", group: "Navigation", shortcut: ["⌘", ","], icon: /* @__PURE__ */ e(b, { className: "w-4 h-4" }), onSelect: () => {
   } },

package/documentation/{MacOSCommandPaletteSection-BNpF6qM7.js → MacOSCommandPaletteSection-ClWl0xxk.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),t=require("../index-BaGqriuz.js"),a=require("lucide-react");require("react-router-dom");require("react-dom");const r=[{id:"new-file",label:"New File",group:"File",shortcut:["⌘","N"],icon:e.jsx(a.FilePlus,{className:"w-4 h-4"}),onSelect:()=>{}},{id:"open-file",label:"Open File",group:"File",shortcut:["⌘","O"],icon:e.jsx(a.FolderOpen,{className:"w-4 h-4"}),onSelect:()=>{}},{id:"save",label:"Save",group:"File",shortcut:["⌘","S"],icon:e.jsx(a.Save,{className:"w-4 h-4"}),onSelect:()=>{}},{id:"settings",label:"Settings",group:"Navigation",shortcut:["⌘",","],icon:e.jsx(a.Settings,{className:"w-4 h-4"}),onSelect:()=>{}},{id:"theme",label:"Toggle Theme",group:"Navigation",icon:e.jsx(a.Moon,{className:"w-4 h-4"}),onSelect:()=>{}},{id:"terminal",label:"Open Terminal",group:"Tools",shortcut:["⌘","`"],icon:e.jsx(a.Terminal,{className:"w-4 h-4"}),onSelect:()=>{}},{id:"search",label:"Search in Files",group:"Tools",shortcut:["⌘","Shift","F"],icon:e.jsx(a.Search,{className:"w-4 h-4"}),onSelect:()=>{}}];function c(s){const[o,l]=n.useState(!1);return e.jsxs("div",{className:"flex flex-col items-center gap-4",children:[e.jsxs(t.Button,{variant:"solid",size:"medium",onClick:()=>l(!0),children:[e.jsx(a.Search,{size:14,className:"mr-2"}),"Open Command Palette"]}),e.jsxs("p",{className:"text-xs text-gray-500 dark:text-gray-400",children:["Or press ",e.jsxs("kbd",{className:"px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono",children:["⌘",s.triggerKey?.toUpperCase()??"K"]})]}),e.jsx(t.MacOSCommandPalette,{open:o,onOpenChange:l,items:r,placeholder:s.placeholder})]})}const i=()=>{const[s,o]=n.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"CommandPalette",description:"A native macOS Spotlight-style command palette with Liquid Glass, grouped results, keyboard navigation, shortcut display, and fuzzy search. Triggered via ⌘K by default.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-orange-500 via-amber-500 to-yellow-500 rounded-full flex items-center justify-center shadow-lg border border-orange-500/50",children:e.jsx(a.Command,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Interactive Demo",className:"mt-2 mb-2",children:e.jsxs("div",{className:"p-6 flex flex-col items-center gap-4",children:[e.jsxs(t.Button,{variant:"solid",size:"medium",onClick:()=>o(!0),children:[e.jsx(a.Search,{size:14,className:"mr-2"}),"Open Command Palette"]}),e.jsxs("p",{className:"text-xs text-gray-500 dark:text-gray-400",children:["Or press"," ",e.jsx("kbd",{className:"px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono",children:"⌘K"})," ","anywhere on this page"]})]})})}),e.jsx(t.MacOSCommandPalette,{open:s,onOpenChange:o,items:r,placeholder:"Search commands, files, navigation…"}),e.jsx(t.PropPlayground,{componentName:"MacOSCommandPalette",defaultValues:{placeholder:"Search or type a command…",triggerKey:"k"},controlOverrides:[{name:"placeholder",type:"text",description:"Search input placeholder"},{name:"triggerKey",type:"text",description:"Keyboard shortcut letter (Meta+key)"}],includeProps:["placeholder","triggerKey"],excludeProps:["className","items","open","onOpenChange"],children:l=>e.jsx(c,{...l})}),e.jsx(t.AutoPropsTable,{componentName:"MacOSCommandPalette"}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.CodeBlock,{language:"tsx",code:`import { MacOSCommandPalette } from '@e-burgos/tucu-ui';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),t=require("../index-C0NugKZs.js"),a=require("lucide-react");require("react-router-dom");require("react-dom");const r=[{id:"new-file",label:"New File",group:"File",shortcut:["⌘","N"],icon:e.jsx(a.FilePlus,{className:"w-4 h-4"}),onSelect:()=>{}},{id:"open-file",label:"Open File",group:"File",shortcut:["⌘","O"],icon:e.jsx(a.FolderOpen,{className:"w-4 h-4"}),onSelect:()=>{}},{id:"save",label:"Save",group:"File",shortcut:["⌘","S"],icon:e.jsx(a.Save,{className:"w-4 h-4"}),onSelect:()=>{}},{id:"settings",label:"Settings",group:"Navigation",shortcut:["⌘",","],icon:e.jsx(a.Settings,{className:"w-4 h-4"}),onSelect:()=>{}},{id:"theme",label:"Toggle Theme",group:"Navigation",icon:e.jsx(a.Moon,{className:"w-4 h-4"}),onSelect:()=>{}},{id:"terminal",label:"Open Terminal",group:"Tools",shortcut:["⌘","`"],icon:e.jsx(a.Terminal,{className:"w-4 h-4"}),onSelect:()=>{}},{id:"search",label:"Search in Files",group:"Tools",shortcut:["⌘","Shift","F"],icon:e.jsx(a.Search,{className:"w-4 h-4"}),onSelect:()=>{}}];function c(s){const[o,l]=n.useState(!1);return e.jsxs("div",{className:"flex flex-col items-center gap-4",children:[e.jsxs(t.Button,{variant:"solid",size:"medium",onClick:()=>l(!0),children:[e.jsx(a.Search,{size:14,className:"mr-2"}),"Open Command Palette"]}),e.jsxs("p",{className:"text-xs text-gray-500 dark:text-gray-400",children:["Or press ",e.jsxs("kbd",{className:"px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono",children:["⌘",s.triggerKey?.toUpperCase()??"K"]})]}),e.jsx(t.MacOSCommandPalette,{open:o,onOpenChange:l,items:r,placeholder:s.placeholder})]})}const i=()=>{const[s,o]=n.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"CommandPalette",description:"A native macOS Spotlight-style command palette with Liquid Glass, grouped results, keyboard navigation, shortcut display, and fuzzy search. Triggered via ⌘K by default.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-orange-500 via-amber-500 to-yellow-500 rounded-full flex items-center justify-center shadow-lg border border-orange-500/50",children:e.jsx(a.Command,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Interactive Demo",className:"mt-2 mb-2",children:e.jsxs("div",{className:"p-6 flex flex-col items-center gap-4",children:[e.jsxs(t.Button,{variant:"solid",size:"medium",onClick:()=>o(!0),children:[e.jsx(a.Search,{size:14,className:"mr-2"}),"Open Command Palette"]}),e.jsxs("p",{className:"text-xs text-gray-500 dark:text-gray-400",children:["Or press"," ",e.jsx("kbd",{className:"px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono",children:"⌘K"})," ","anywhere on this page"]})]})})}),e.jsx(t.MacOSCommandPalette,{open:s,onOpenChange:o,items:r,placeholder:"Search commands, files, navigation…"}),e.jsx(t.PropPlayground,{componentName:"MacOSCommandPalette",defaultValues:{placeholder:"Search or type a command…",triggerKey:"k"},controlOverrides:[{name:"placeholder",type:"text",description:"Search input placeholder"},{name:"triggerKey",type:"text",description:"Keyboard shortcut letter (Meta+key)"}],includeProps:["placeholder","triggerKey"],excludeProps:["className","items","open","onOpenChange"],children:l=>e.jsx(c,{...l})}),e.jsx(t.AutoPropsTable,{componentName:"MacOSCommandPalette"}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.CodeBlock,{language:"tsx",code:`import { MacOSCommandPalette } from '@e-burgos/tucu-ui';
 
 const items = [
   {

package/documentation/{MacOSMaterialsSection-CL8WKiWl.js → MacOSMaterialsSection-CFHz_vYl.js}

@@ -1,5 +1,5 @@
 import { jsxs as r, Fragment as t, jsx as e } from "react/jsx-runtime";
-import { ay as m, H as b, C as s, a as i, T as d } from "../index-lfg6LZ1p.js";
+import { ay as m, H as b, C as s, a as i, T as d } from "../index-4GONhZIF.js";
 import { Layers as g } from "lucide-react";
 import "react-router-dom";
 import "react";
@@ -98,7 +98,7 @@ const u = [
       value: "rgba(44, 44, 46, 0.96)"
     }
   ]
-}, k = () => {
+}, N = () => {
   const { mode: c } = m(), l = c === "dark", n = l ? o.dark : o.light;
   return /* @__PURE__ */ r(t, { children: [
     /* @__PURE__ */ e(
@@ -106,7 +106,7 @@ const u = [
       {
         title: "Materials",
         description: "macOS vibrancy materials combine translucency and blur to provide depth and context. Content behind the material informs the user of spatial hierarchy.",
-        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-white/80 via-gray-200/60 to-gray-400/40 dark:from-gray-700/80 dark:via-gray-800/60 dark:to-gray-900/40 rounded-full flex items-center justify-center shadow-lg border border-white/50 dark:border-gray-600/50 backdrop-blur-md", children: /* @__PURE__ */ e(g, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-gray-700 dark:text-gray-200 filter drop-shadow-lg" }) })
+        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-white/80 via-gray-200/60 to-gray-400/40 dark:from-gray-700/80 dark:via-gray-800/60 dark:to-gray-900/40 rounded-full flex items-center justify-center shadow-lg border border-white/50 dark:border-border/50 backdrop-blur-md", children: /* @__PURE__ */ e(g, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-gray-700 dark:text-gray-200 filter drop-shadow-lg" }) })
       }
     ),
     /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Material Levels", className: "mt-2 mb-2", children: /* @__PURE__ */ r("div", { className: "w-full p-4 sm:p-6", children: [
@@ -217,14 +217,14 @@ const u = [
           /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: n.map((a) => /* @__PURE__ */ e(
             "div",
             {
-              className: "rounded-xl p-4 border border-gray-200 dark:border-gray-700",
+              className: "rounded-xl p-4 border border-border",
               style: {
                 background: l ? "linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)" : "linear-gradient(135deg, #a8edea 0%, #fed6e3 50%, #d299c2 100%)"
               },
               children: /* @__PURE__ */ r(
                 "div",
                 {
-                  className: "rounded-lg p-4 border border-white/30 dark:border-white/10",
+                  className: "rounded-lg p-4 border border-border",
                   style: {
                     backgroundColor: a.value,
                     backdropFilter: `blur(${a.blur})`,
@@ -276,5 +276,5 @@ const u = [
   ] });
 };
 export {
-  k as default
+  N as default
 };

package/documentation/MacOSMaterialsSection-QdDsz0mK.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-C0NugKZs.js"),d=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=[{name:"UltraThin",opacity:.36,blur:15,lightBg:"rgba(246, 246, 248, 0.36)",darkBg:"rgba(28, 28, 30, 0.36)",desc:"Maximum translucency — content behind is clearly visible"},{name:"Thin",opacity:.48,blur:15,lightBg:"rgba(246, 246, 248, 0.48)",darkBg:"rgba(28, 28, 30, 0.48)",desc:"High translucency — subtle tinting of background content"},{name:"Medium",opacity:.6,blur:15,lightBg:"rgba(246, 246, 248, 0.60)",darkBg:"rgba(28, 28, 30, 0.60)",desc:"Balanced — background content is muted but perceptible"},{name:"Thick",opacity:.72,blur:15,lightBg:"rgba(246, 246, 248, 0.72)",darkBg:"rgba(40, 40, 42, 0.72)",desc:"Low translucency — subtle depth hint from background"},{name:"UltraThick",opacity:.84,blur:15,lightBg:"rgba(246, 246, 248, 0.84)",darkBg:"rgba(44, 44, 46, 0.84)",desc:"Near-opaque — minimal translucency, maximum legibility"}],l={light:[{name:"Sidebar",css:"var(--macos-material-sidebar)",blur:"20px",value:"rgba(246, 246, 248, 0.82)"},{name:"Toolbar",css:"var(--macos-material-toolbar)",blur:"16px",value:"rgba(255, 255, 255, 0.72)"},{name:"Popover",css:"var(--macos-material-popover)",blur:"24px",value:"rgba(255, 255, 255, 0.9)"},{name:"Sheet",css:"var(--macos-material-sheet)",blur:"30px",value:"rgba(255, 255, 255, 0.94)"}],dark:[{name:"Sidebar",css:"var(--macos-material-sidebar)",blur:"20px",value:"rgba(28, 28, 30, 0.85)"},{name:"Toolbar",css:"var(--macos-material-toolbar)",blur:"16px",value:"rgba(40, 40, 42, 0.8)"},{name:"Popover",css:"var(--macos-material-popover)",blur:"24px",value:"rgba(44, 44, 46, 0.92)"},{name:"Sheet",css:"var(--macos-material-sheet)",blur:"30px",value:"rgba(44, 44, 46, 0.96)"}]},n=()=>{const{mode:t}=s.useTheme(),r=t==="dark",i=r?l.dark:l.light;return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Materials",description:"macOS vibrancy materials combine translucency and blur to provide depth and context. Content behind the material informs the user of spatial hierarchy.",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-white/80 via-gray-200/60 to-gray-400/40 dark:from-gray-700/80 dark:via-gray-800/60 dark:to-gray-900/40 rounded-full flex items-center justify-center shadow-lg border border-white/50 dark:border-border/50 backdrop-blur-md",children:e.jsx(d.Layers,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-gray-700 dark:text-gray-200 filter drop-shadow-lg"})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Material Levels",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsx(s.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-6",children:"Five translucency levels from UltraThin (most transparent) to UltraThick (near-opaque). All use backdrop-filter blur for the frosted-glass effect."}),e.jsxs("div",{className:"relative rounded-xl overflow-hidden p-6",style:{background:r?"linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%)":"linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%)",minHeight:"400px"},children:[e.jsx("div",{className:"absolute inset-0 opacity-60",children:r?e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"absolute top-6 left-8 w-20 h-20 rounded-full bg-purple-600"}),e.jsx("div",{className:"absolute top-12 right-16 w-28 h-28 rounded-full bg-indigo-600"}),e.jsx("div",{className:"absolute bottom-6 left-1/3 w-16 h-16 rounded-full bg-blue-600"}),e.jsx("div",{className:"absolute bottom-8 right-8 w-24 h-24 rounded-full bg-violet-700"})]}):e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"absolute top-4 left-4 w-24 h-24 rounded-full bg-yellow-300"}),e.jsx("div",{className:"absolute top-16 right-12 w-32 h-32 rounded-full bg-pink-400"}),e.jsx("div",{className:"absolute bottom-8 left-1/4 w-20 h-20 rounded-full bg-green-400"}),e.jsx("div",{className:"absolute bottom-4 right-8 w-28 h-28 rounded-full bg-blue-300"})]})}),e.jsx("div",{className:"relative flex flex-col gap-4",children:o.map(a=>e.jsx("div",{className:"rounded-xl p-4 border border-white/20",style:{backgroundColor:r?a.darkBg:a.lightBg,backdropFilter:`blur(${a.blur}px)`,WebkitBackdropFilter:`blur(${a.blur}px)`},children:e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs("div",{children:[e.jsx("span",{className:`text-sm font-semibold ${r?"text-gray-100":"text-gray-800"}`,children:a.name}),e.jsx("p",{className:`text-xs mt-0.5 ${r?"text-gray-300":"text-gray-600"}`,children:a.desc})]}),e.jsxs("div",{className:"text-right",children:[e.jsxs("span",{className:`text-xs font-mono ${r?"text-gray-400":"text-gray-600"}`,children:["opacity: ",a.opacity]}),e.jsx("br",{}),e.jsxs("span",{className:`text-xs font-mono ${r?"text-gray-400":"text-gray-600"}`,children:["blur: ",a.blur,"px"]})]})]})},a.name))})]})]})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Named Materials (CSS Variables)",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsxs(s.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:["Pre-defined materials for common macOS surfaces. Each maps to a CSS custom property. Showing ",r?"dark":"light"," mode values."]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-4",children:i.map(a=>e.jsx("div",{className:"rounded-xl p-4 border border-border",style:{background:r?"linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)":"linear-gradient(135deg, #a8edea 0%, #fed6e3 50%, #d299c2 100%)"},children:e.jsxs("div",{className:"rounded-lg p-4 border border-border",style:{backgroundColor:a.value,backdropFilter:`blur(${a.blur})`,WebkitBackdropFilter:`blur(${a.blur})`},children:[e.jsx("span",{className:`text-sm font-semibold ${r?"text-gray-100":"text-gray-800"}`,children:a.name}),e.jsxs("div",{className:"mt-2 space-y-1",children:[e.jsx("p",{className:`text-[10px] font-mono ${r?"text-gray-400":"text-gray-500"}`,children:a.css}),e.jsxs("p",{className:`text-[10px] font-mono ${r?"text-gray-400":"text-gray-500"}`,children:["blur: ",a.blur]}),e.jsx("p",{className:`text-[10px] font-mono ${r?"text-gray-400":"text-gray-500"}`,children:a.value})]})]})},a.name))})]})})})]})};exports.default=n;

package/documentation/{MacOSNotificationBannerSection-CccD5Lyx.js → MacOSNotificationBannerSection-Bo1oagT9.js}

@@ -1,6 +1,6 @@
 import { jsxs as l, Fragment as d, jsx as e } from "react/jsx-runtime";
 import { useState as c } from "react";
-import { H as f, C as o, a as r, bu as n, x as m, P as u, A as h, c as b } from "../index-lfg6LZ1p.js";
+import { H as f, C as o, a as r, bw as n, x as m, P as u, A as h, c as b } from "../index-4GONhZIF.js";
 import { Bell as g, Info as p, CheckCircle as w, AlertTriangle as v, WifiOff as N } from "lucide-react";
 import "react-router-dom";
 import "react-dom";

package/documentation/{MacOSNotificationBannerSection-DCtVh4mP.js → MacOSNotificationBannerSection-D9se5v0x.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),i=require("../index-BaGqriuz.js"),t=require("lucide-react");require("react-router-dom");require("react-dom");function c(s){const[a,o]=r.useState(!0);return a?e.jsx("div",{className:"w-full max-w-xl mx-auto",children:e.jsx(i.MacOSNotificationBanner,{title:s.title||"Notification",variant:s.variant,message:s.message,dismissible:s.dismissible,onDismiss:s.dismissible!==!1?()=>o(!1):void 0,actions:[{label:"Action",onClick:()=>{}}]})}):e.jsxs("div",{className:"flex flex-col items-center gap-2",children:[e.jsx("p",{className:"text-sm text-gray-500",children:"Banner dismissed"}),e.jsx(i.Button,{size:"mini",onClick:()=>o(!0),children:"Restore"})]})}const l=()=>{const[s,a]=r.useState({info:!0,success:!0,warning:!0,error:!0}),o=()=>a({info:!0,success:!0,warning:!0,error:!0});return e.jsxs(e.Fragment,{children:[e.jsx(i.HeroCard,{title:"NotificationBanner",description:"macOS-style notification banners with four variants (info, success, warning, error), optional dismiss button, action buttons, custom icons, and smooth enter/exit animations.",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-amber-500 via-orange-500 to-red-500 rounded-full flex items-center justify-center shadow-lg border border-amber-500/50",children:e.jsx(t.Bell,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsx(i.CardContainer,{className:"overflow-hidden",children:e.jsx(i.CardTitle,{title:"All Variants",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-3",children:[s.info&&e.jsx(i.MacOSNotificationBanner,{variant:"info",title:"Update available",message:"macOS 14.5 is now available. Restart to install.",icon:e.jsx(t.Info,{className:"w-5 h-5"}),actions:[{label:"Update Now",onClick:()=>{}}],onDismiss:()=>a(n=>({...n,info:!1}))}),s.success&&e.jsx(i.MacOSNotificationBanner,{variant:"success",title:"Backup complete",message:"Time Machine backup finished successfully.",icon:e.jsx(t.CheckCircle,{className:"w-5 h-5"}),onDismiss:()=>a(n=>({...n,success:!1}))}),s.warning&&e.jsx(i.MacOSNotificationBanner,{variant:"warning",title:"Low storage",message:"Only 5 GB remaining. Free up space to avoid performance issues.",icon:e.jsx(t.AlertTriangle,{className:"w-5 h-5"}),actions:[{label:"Manage",onClick:()=>{}}],onDismiss:()=>a(n=>({...n,warning:!1}))}),s.error&&e.jsx(i.MacOSNotificationBanner,{variant:"error",title:"Network error",message:"Unable to connect. Check your internet connection.",icon:e.jsx(t.WifiOff,{className:"w-5 h-5"}),actions:[{label:"Try Again",onClick:()=>{}}],onDismiss:()=>a(n=>({...n,error:!1}))}),!Object.values(s).some(Boolean)&&e.jsx("p",{className:"text-center text-sm text-gray-400 py-4",children:"All banners dismissed."}),e.jsx("div",{className:"flex justify-center pt-2",children:e.jsx(i.Button,{size:"mini",shape:"rounded",onClick:o,children:"Restore All"})})]})})}),e.jsx(i.CardContainer,{className:"overflow-hidden",children:e.jsx(i.CardTitle,{title:"Non-dismissible",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(i.MacOSNotificationBanner,{variant:"warning",title:"Attention required",message:"This notification cannot be dismissed and requires action.",dismissible:!1,actions:[{label:"Take Action",onClick:()=>{}}]})})})}),e.jsx(i.PropPlayground,{componentName:"MacOSNotificationBanner",defaultValues:{variant:"info",title:"Notification Title",message:"This is a notification message with details.",dismissible:!0},controlOverrides:[{name:"variant",type:"select",options:["info","success","warning","error"],description:"Banner severity variant"},{name:"title",type:"text",description:"Banner heading"},{name:"message",type:"text",description:"Banner body message"},{name:"dismissible",type:"boolean",description:"Show dismiss (×) button"}],includeProps:["variant","title","message","dismissible"],excludeProps:["className","icon","actions","onDismiss"],children:n=>e.jsx(c,{...n})}),e.jsx(i.AutoPropsTable,{componentName:"MacOSNotificationBanner"}),e.jsx(i.CardContainer,{className:"overflow-hidden",children:e.jsx(i.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(i.CodeBlock,{language:"tsx",code:`import { MacOSNotificationBanner } from '@e-burgos/tucu-ui';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),i=require("../index-C0NugKZs.js"),t=require("lucide-react");require("react-router-dom");require("react-dom");function c(s){const[a,o]=r.useState(!0);return a?e.jsx("div",{className:"w-full max-w-xl mx-auto",children:e.jsx(i.MacOSNotificationBanner,{title:s.title||"Notification",variant:s.variant,message:s.message,dismissible:s.dismissible,onDismiss:s.dismissible!==!1?()=>o(!1):void 0,actions:[{label:"Action",onClick:()=>{}}]})}):e.jsxs("div",{className:"flex flex-col items-center gap-2",children:[e.jsx("p",{className:"text-sm text-gray-500",children:"Banner dismissed"}),e.jsx(i.Button,{size:"mini",onClick:()=>o(!0),children:"Restore"})]})}const l=()=>{const[s,a]=r.useState({info:!0,success:!0,warning:!0,error:!0}),o=()=>a({info:!0,success:!0,warning:!0,error:!0});return e.jsxs(e.Fragment,{children:[e.jsx(i.HeroCard,{title:"NotificationBanner",description:"macOS-style notification banners with four variants (info, success, warning, error), optional dismiss button, action buttons, custom icons, and smooth enter/exit animations.",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-amber-500 via-orange-500 to-red-500 rounded-full flex items-center justify-center shadow-lg border border-amber-500/50",children:e.jsx(t.Bell,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsx(i.CardContainer,{className:"overflow-hidden",children:e.jsx(i.CardTitle,{title:"All Variants",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-3",children:[s.info&&e.jsx(i.MacOSNotificationBanner,{variant:"info",title:"Update available",message:"macOS 14.5 is now available. Restart to install.",icon:e.jsx(t.Info,{className:"w-5 h-5"}),actions:[{label:"Update Now",onClick:()=>{}}],onDismiss:()=>a(n=>({...n,info:!1}))}),s.success&&e.jsx(i.MacOSNotificationBanner,{variant:"success",title:"Backup complete",message:"Time Machine backup finished successfully.",icon:e.jsx(t.CheckCircle,{className:"w-5 h-5"}),onDismiss:()=>a(n=>({...n,success:!1}))}),s.warning&&e.jsx(i.MacOSNotificationBanner,{variant:"warning",title:"Low storage",message:"Only 5 GB remaining. Free up space to avoid performance issues.",icon:e.jsx(t.AlertTriangle,{className:"w-5 h-5"}),actions:[{label:"Manage",onClick:()=>{}}],onDismiss:()=>a(n=>({...n,warning:!1}))}),s.error&&e.jsx(i.MacOSNotificationBanner,{variant:"error",title:"Network error",message:"Unable to connect. Check your internet connection.",icon:e.jsx(t.WifiOff,{className:"w-5 h-5"}),actions:[{label:"Try Again",onClick:()=>{}}],onDismiss:()=>a(n=>({...n,error:!1}))}),!Object.values(s).some(Boolean)&&e.jsx("p",{className:"text-center text-sm text-gray-400 py-4",children:"All banners dismissed."}),e.jsx("div",{className:"flex justify-center pt-2",children:e.jsx(i.Button,{size:"mini",shape:"rounded",onClick:o,children:"Restore All"})})]})})}),e.jsx(i.CardContainer,{className:"overflow-hidden",children:e.jsx(i.CardTitle,{title:"Non-dismissible",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(i.MacOSNotificationBanner,{variant:"warning",title:"Attention required",message:"This notification cannot be dismissed and requires action.",dismissible:!1,actions:[{label:"Take Action",onClick:()=>{}}]})})})}),e.jsx(i.PropPlayground,{componentName:"MacOSNotificationBanner",defaultValues:{variant:"info",title:"Notification Title",message:"This is a notification message with details.",dismissible:!0},controlOverrides:[{name:"variant",type:"select",options:["info","success","warning","error"],description:"Banner severity variant"},{name:"title",type:"text",description:"Banner heading"},{name:"message",type:"text",description:"Banner body message"},{name:"dismissible",type:"boolean",description:"Show dismiss (×) button"}],includeProps:["variant","title","message","dismissible"],excludeProps:["className","icon","actions","onDismiss"],children:n=>e.jsx(c,{...n})}),e.jsx(i.AutoPropsTable,{componentName:"MacOSNotificationBanner"}),e.jsx(i.CardContainer,{className:"overflow-hidden",children:e.jsx(i.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(i.CodeBlock,{language:"tsx",code:`import { MacOSNotificationBanner } from '@e-burgos/tucu-ui';
 
 // Info banner with action buttons
 <MacOSNotificationBanner

package/documentation/MacOSPopoverSection-CHmPgYov.js

@@ -0,0 +1,33 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),o=require("../index-C0NugKZs.js"),s=require("lucide-react");require("react-router-dom");require("react-dom");function m(a){const[n,r]=c.useState(!1);return e.jsx("div",{className:"flex justify-center py-12",children:e.jsx(o.MacOSPopover,{isOpen:n,onClose:()=>r(!1),placement:a.placement,minWidth:a.minWidth,content:e.jsxs("div",{className:"py-1",children:[e.jsx(o.MacOSPopoverItem,{label:"New File",icon:e.jsx(s.FilePlus,{className:"w-4 h-4"}),shortcut:"⌘N",onClick:()=>r(!1)}),e.jsx(o.MacOSPopoverItem,{label:"Open",icon:e.jsx(s.FolderOpen,{className:"w-4 h-4"}),shortcut:"⌘O",onClick:()=>r(!1)}),e.jsx(o.MacOSPopoverItem,{label:"Delete",icon:e.jsx(s.Trash2,{className:"w-4 h-4"}),destructive:!0,onClick:()=>r(!1)})]}),children:e.jsxs("button",{onClick:()=>r(!0),className:"rounded-lg border border-border px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",children:["Open Popover (",a.placement,")"]})})})}const i=()=>{const[a,n]=c.useState(null),r=l=>n(d=>d===l?null:l),t=()=>n(null);return e.jsxs(e.Fragment,{children:[e.jsx(o.HeroCard,{title:"Popover",description:"A macOS-style popover / context menu with backdrop blur, placement options, keyboard shortcuts, destructive styling, disabled items, and animated show/hide.",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-violet-500 via-purple-500 to-fuchsia-600 rounded-full flex items-center justify-center shadow-lg border border-violet-500/50",children:e.jsx(s.MessageSquare,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsx(o.CardContainer,{className:"overflow-hidden",children:e.jsx(o.CardTitle,{title:"Context Menu",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6 flex justify-center pb-40",children:e.jsx(o.MacOSPopover,{isOpen:a==="context",onClose:t,placement:"bottom",content:e.jsxs("div",{className:"py-1",children:[e.jsx(o.MacOSPopoverItem,{label:"New File",icon:e.jsx(s.FilePlus,{className:"w-4 h-4"}),shortcut:"⌘N",onClick:t}),e.jsx(o.MacOSPopoverItem,{label:"Open Recent",icon:e.jsx(s.Clock,{className:"w-4 h-4"}),onClick:t}),e.jsx(o.MacOSPopoverItem,{label:"Save As…",icon:e.jsx(s.Save,{className:"w-4 h-4"}),shortcut:"⌘⇧S",onClick:t}),e.jsx(o.MacOSPopoverItem,{label:"Delete",icon:e.jsx(s.Trash2,{className:"w-4 h-4"}),destructive:!0,onClick:t})]}),children:e.jsx("button",{onClick:()=>r("context"),className:"rounded-lg border border-border px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",children:"Right-click Menu"})})})})}),e.jsx(o.CardContainer,{className:"overflow-hidden",children:e.jsx(o.CardTitle,{title:"Four Placements",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-2 gap-8 p-8",children:["bottom","top","right","left"].map(l=>e.jsx("div",{className:"flex justify-center",children:e.jsx(o.MacOSPopover,{isOpen:a===l,onClose:t,placement:l,content:e.jsxs("div",{className:"py-1",children:[e.jsx(o.MacOSPopoverItem,{label:"Option A",onClick:t}),e.jsx(o.MacOSPopoverItem,{label:"Option B",onClick:t})]}),children:e.jsx("button",{onClick:()=>r(l),className:"rounded-lg border border-border px-3 py-2 text-xs text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors capitalize",children:l})})},l))})})})}),e.jsx(o.CardContainer,{className:"overflow-hidden",children:e.jsx(o.CardTitle,{title:"Disabled & Destructive Items",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6 flex justify-center pb-40",children:e.jsx(o.MacOSPopover,{isOpen:a==="disabled",onClose:t,content:e.jsxs("div",{className:"py-1",children:[e.jsx(o.MacOSPopoverItem,{label:"Available",icon:e.jsx(s.Check,{className:"w-4 h-4"}),onClick:t}),e.jsx(o.MacOSPopoverItem,{label:"Unavailable",icon:e.jsx(s.Lock,{className:"w-4 h-4"}),disabled:!0,onClick:t}),e.jsx(o.MacOSPopoverItem,{label:"Delete",destructive:!0,icon:e.jsx(s.Trash2,{className:"w-4 h-4"}),onClick:t})]}),children:e.jsx("button",{onClick:()=>r("disabled"),className:"rounded-lg border border-border px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",children:"Show Popover"})})})})}),e.jsx(o.PropPlayground,{componentName:"MacOSPopover",defaultValues:{placement:"bottom",minWidth:200},controlOverrides:[{name:"placement",type:"select",options:["top","bottom","left","right"],description:"Popover placement relative to trigger"},{name:"minWidth",type:"text",description:"Minimum width in pixels"}],includeProps:["placement","minWidth"],excludeProps:["className","contentClassName","isOpen","onClose","content"],children:l=>e.jsx(m,{...l})}),e.jsx(o.AutoPropsTable,{componentName:"MacOSPopover"}),e.jsx(o.CardContainer,{className:"overflow-hidden",children:e.jsx(o.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(o.CodeBlock,{language:"tsx",code:`import { MacOSPopover, MacOSPopoverItem } from '@e-burgos/tucu-ui';
+
+function ContextMenu() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <MacOSPopover
+      isOpen={open}
+      onClose={() => setOpen(false)}
+      placement="bottom"   // 'top' | 'bottom' | 'left' | 'right'
+      minWidth={200}
+      content={
+        <div className="py-1">
+          <MacOSPopoverItem
+            label="New File"
+            icon={<FilePlusIcon />}
+            shortcut="⌘N"
+            onClick={() => setOpen(false)}
+          />
+          <MacOSPopoverItem
+            label="Delete"
+            icon={<TrashIcon />}
+            destructive
+            onClick={() => setOpen(false)}
+          />
+          <MacOSPopoverItem label="Admin Only" disabled />
+        </div>
+      }
+    >
+      <button onClick={() => setOpen(true)}>Open Menu</button>
+    </MacOSPopover>
+  );
+}`})})})})]})};exports.MacOSPopoverSection=i;exports.default=i;