@e-burgos/tucu-ui 2.0.8 → 2.0.10

package/documentation/MacOSMaterialsSection-B0bCcOWV.js

@@ -0,0 +1,280 @@
+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-19KsCnyX.js";
+import { Layers as g } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const u = [
+  {
+    name: "UltraThin",
+    opacity: 0.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: 0.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: 0.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: 0.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: 0.84,
+    blur: 15,
+    lightBg: "rgba(246, 246, 248, 0.84)",
+    darkBg: "rgba(44, 44, 46, 0.84)",
+    desc: "Near-opaque — minimal translucency, maximum legibility"
+  }
+], o = {
+  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: c } = m(), l = c === "dark", n = l ? o.dark : o.light;
+  return /* @__PURE__ */ r(t, { children: [
+    /* @__PURE__ */ e(
+      b,
+      {
+        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-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: [
+      /* @__PURE__ */ e(
+        d,
+        {
+          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."
+        }
+      ),
+      /* @__PURE__ */ r(
+        "div",
+        {
+          className: "relative rounded-xl overflow-hidden p-6",
+          style: {
+            background: l ? "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: [
+            /* @__PURE__ */ e("div", { className: "absolute inset-0 opacity-60", children: l ? /* @__PURE__ */ r(t, { children: [
+              /* @__PURE__ */ e("div", { className: "absolute top-6 left-8 w-20 h-20 rounded-full bg-purple-600" }),
+              /* @__PURE__ */ e("div", { className: "absolute top-12 right-16 w-28 h-28 rounded-full bg-indigo-600" }),
+              /* @__PURE__ */ e("div", { className: "absolute bottom-6 left-1/3 w-16 h-16 rounded-full bg-blue-600" }),
+              /* @__PURE__ */ e("div", { className: "absolute bottom-8 right-8 w-24 h-24 rounded-full bg-violet-700" })
+            ] }) : /* @__PURE__ */ r(t, { children: [
+              /* @__PURE__ */ e("div", { className: "absolute top-4 left-4 w-24 h-24 rounded-full bg-yellow-300" }),
+              /* @__PURE__ */ e("div", { className: "absolute top-16 right-12 w-32 h-32 rounded-full bg-pink-400" }),
+              /* @__PURE__ */ e("div", { className: "absolute bottom-8 left-1/4 w-20 h-20 rounded-full bg-green-400" }),
+              /* @__PURE__ */ e("div", { className: "absolute bottom-4 right-8 w-28 h-28 rounded-full bg-blue-300" })
+            ] }) }),
+            /* @__PURE__ */ e("div", { className: "relative flex flex-col gap-4", children: u.map((a) => /* @__PURE__ */ e(
+              "div",
+              {
+                className: "rounded-xl p-4 border border-white/20",
+                style: {
+                  backgroundColor: l ? a.darkBg : a.lightBg,
+                  backdropFilter: `blur(${a.blur}px)`,
+                  WebkitBackdropFilter: `blur(${a.blur}px)`
+                },
+                children: /* @__PURE__ */ r("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ r("div", { children: [
+                    /* @__PURE__ */ e(
+                      "span",
+                      {
+                        className: `text-sm font-semibold ${l ? "text-gray-100" : "text-gray-800"}`,
+                        children: a.name
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      "p",
+                      {
+                        className: `text-xs mt-0.5 ${l ? "text-gray-300" : "text-gray-600"}`,
+                        children: a.desc
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ r("div", { className: "text-right", children: [
+                    /* @__PURE__ */ r(
+                      "span",
+                      {
+                        className: `text-xs font-mono ${l ? "text-gray-400" : "text-gray-600"}`,
+                        children: [
+                          "opacity: ",
+                          a.opacity
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ e("br", {}),
+                    /* @__PURE__ */ r(
+                      "span",
+                      {
+                        className: `text-xs font-mono ${l ? "text-gray-400" : "text-gray-600"}`,
+                        children: [
+                          "blur: ",
+                          a.blur,
+                          "px"
+                        ]
+                      }
+                    )
+                  ] })
+                ] })
+              },
+              a.name
+            )) })
+          ]
+        }
+      )
+    ] }) }) }),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(
+      i,
+      {
+        title: "Named Materials (CSS Variables)",
+        className: "mt-2 mb-2",
+        children: /* @__PURE__ */ r("div", { className: "w-full p-4 sm:p-6", children: [
+          /* @__PURE__ */ r(
+            d,
+            {
+              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 ",
+                l ? "dark" : "light",
+                " mode values."
+              ]
+            }
+          ),
+          /* @__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-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-border",
+                  style: {
+                    backgroundColor: a.value,
+                    backdropFilter: `blur(${a.blur})`,
+                    WebkitBackdropFilter: `blur(${a.blur})`
+                  },
+                  children: [
+                    /* @__PURE__ */ e(
+                      "span",
+                      {
+                        className: `text-sm font-semibold ${l ? "text-gray-100" : "text-gray-800"}`,
+                        children: a.name
+                      }
+                    ),
+                    /* @__PURE__ */ r("div", { className: "mt-2 space-y-1", children: [
+                      /* @__PURE__ */ e(
+                        "p",
+                        {
+                          className: `text-[10px] font-mono ${l ? "text-gray-400" : "text-gray-500"}`,
+                          children: a.css
+                        }
+                      ),
+                      /* @__PURE__ */ r(
+                        "p",
+                        {
+                          className: `text-[10px] font-mono ${l ? "text-gray-400" : "text-gray-500"}`,
+                          children: [
+                            "blur: ",
+                            a.blur
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ e(
+                        "p",
+                        {
+                          className: `text-[10px] font-mono ${l ? "text-gray-400" : "text-gray-500"}`,
+                          children: a.value
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              )
+            },
+            a.name
+          )) })
+        ] })
+      }
+    ) })
+  ] });
+};
+export {
+  N as default
+};

package/documentation/MacOSMaterialsSection-CgulMHAk.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"),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-C9SIbT7b.js

@@ -0,0 +1,25 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),i=require("../index-DMs_SmPq.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
+  variant="info"
+  title="Update available"
+  message="macOS 14.5 is ready to install."
+  icon={<InfoIcon />}
+  actions={[
+    { label: 'Update Now', onClick: handleUpdate },
+    { label: 'Later', onClick: handleDismiss },
+  ]}
+  onDismiss={handleDismiss}
+/>
+
+// Non-dismissible warning
+<MacOSNotificationBanner
+  variant="warning"
+  title="Attention"
+  message="Action required."
+  dismissible={false}
+  actions={[{ label: 'Take Action', onClick: handle }]}
+/>
+
+// Variants: 'info' | 'success' | 'warning' | 'error'`})})})})]})};exports.MacOSNotificationBannerSection=l;exports.default=l;

package/documentation/MacOSNotificationBannerSection-DL_wVvSM.js

@@ -0,0 +1,169 @@
+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, bw as n, x as m, P as u, A as h, c as b } from "../index-19KsCnyX.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";
+function x(i) {
+  const [a, t] = c(!0);
+  return a ? /* @__PURE__ */ e("div", { className: "w-full max-w-xl mx-auto", children: /* @__PURE__ */ e(
+    n,
+    {
+      title: i.title || "Notification",
+      variant: i.variant,
+      message: i.message,
+      dismissible: i.dismissible,
+      onDismiss: i.dismissible !== !1 ? () => t(!1) : void 0,
+      actions: [{ label: "Action", onClick: () => {
+      } }]
+    }
+  ) }) : /* @__PURE__ */ l("div", { className: "flex flex-col items-center gap-2", children: [
+    /* @__PURE__ */ e("p", { className: "text-sm text-gray-500", children: "Banner dismissed" }),
+    /* @__PURE__ */ e(m, { size: "mini", onClick: () => t(!0), children: "Restore" })
+  ] });
+}
+const S = () => {
+  const [i, a] = c({
+    info: !0,
+    success: !0,
+    warning: !0,
+    error: !0
+  }), t = () => a({ info: !0, success: !0, warning: !0, error: !0 });
+  return /* @__PURE__ */ l(d, { children: [
+    /* @__PURE__ */ e(
+      f,
+      {
+        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: /* @__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-amber-500 via-orange-500 to-red-500 rounded-full flex items-center justify-center shadow-lg border border-amber-500/50", children: /* @__PURE__ */ e(g, { 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(o, { className: "overflow-hidden", children: /* @__PURE__ */ e(r, { title: "All Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full p-4 sm:p-6 space-y-3", children: [
+      i.info && /* @__PURE__ */ e(
+        n,
+        {
+          variant: "info",
+          title: "Update available",
+          message: "macOS 14.5 is now available. Restart to install.",
+          icon: /* @__PURE__ */ e(p, { className: "w-5 h-5" }),
+          actions: [{ label: "Update Now", onClick: () => {
+          } }],
+          onDismiss: () => a((s) => ({ ...s, info: !1 }))
+        }
+      ),
+      i.success && /* @__PURE__ */ e(
+        n,
+        {
+          variant: "success",
+          title: "Backup complete",
+          message: "Time Machine backup finished successfully.",
+          icon: /* @__PURE__ */ e(w, { className: "w-5 h-5" }),
+          onDismiss: () => a((s) => ({ ...s, success: !1 }))
+        }
+      ),
+      i.warning && /* @__PURE__ */ e(
+        n,
+        {
+          variant: "warning",
+          title: "Low storage",
+          message: "Only 5 GB remaining. Free up space to avoid performance issues.",
+          icon: /* @__PURE__ */ e(v, { className: "w-5 h-5" }),
+          actions: [{ label: "Manage", onClick: () => {
+          } }],
+          onDismiss: () => a((s) => ({ ...s, warning: !1 }))
+        }
+      ),
+      i.error && /* @__PURE__ */ e(
+        n,
+        {
+          variant: "error",
+          title: "Network error",
+          message: "Unable to connect. Check your internet connection.",
+          icon: /* @__PURE__ */ e(N, { className: "w-5 h-5" }),
+          actions: [{ label: "Try Again", onClick: () => {
+          } }],
+          onDismiss: () => a((s) => ({ ...s, error: !1 }))
+        }
+      ),
+      !Object.values(i).some(Boolean) && /* @__PURE__ */ e("p", { className: "text-center text-sm text-gray-400 py-4", children: "All banners dismissed." }),
+      /* @__PURE__ */ e("div", { className: "flex justify-center pt-2", children: /* @__PURE__ */ e(m, { size: "mini", shape: "rounded", onClick: t, children: "Restore All" }) })
+    ] }) }) }),
+    /* @__PURE__ */ e(o, { className: "overflow-hidden", children: /* @__PURE__ */ e(r, { title: "Non-dismissible", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      n,
+      {
+        variant: "warning",
+        title: "Attention required",
+        message: "This notification cannot be dismissed and requires action.",
+        dismissible: !1,
+        actions: [{ label: "Take Action", onClick: () => {
+        } }]
+      }
+    ) }) }) }),
+    /* @__PURE__ */ e(
+      u,
+      {
+        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: (s) => /* @__PURE__ */ e(x, { ...s })
+      }
+    ),
+    /* @__PURE__ */ e(h, { componentName: "MacOSNotificationBanner" }),
+    /* @__PURE__ */ e(o, { className: "overflow-hidden", children: /* @__PURE__ */ e(r, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      b,
+      {
+        language: "tsx",
+        code: `import { MacOSNotificationBanner } from '@e-burgos/tucu-ui';
+
+// Info banner with action buttons
+<MacOSNotificationBanner
+  variant="info"
+  title="Update available"
+  message="macOS 14.5 is ready to install."
+  icon={<InfoIcon />}
+  actions={[
+    { label: 'Update Now', onClick: handleUpdate },
+    { label: 'Later', onClick: handleDismiss },
+  ]}
+  onDismiss={handleDismiss}
+/>
+
+// Non-dismissible warning
+<MacOSNotificationBanner
+  variant="warning"
+  title="Attention"
+  message="Action required."
+  dismissible={false}
+  actions={[{ label: 'Take Action', onClick: handle }]}
+/>
+
+// Variants: 'info' | 'success' | 'warning' | 'error'`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  S as MacOSNotificationBannerSection,
+  S as default
+};