@e-burgos/tucu-ui 2.4.1 → 2.6.0

package/documentation/MacOSCommandPaletteSection-BTrRzuuO.js

@@ -0,0 +1,143 @@
+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, bv as d, P as g, A as u, c as S } from "../index-DoxeCFUJ.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(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: () => {
+  } },
+  { id: "theme", label: "Toggle Theme", group: "Navigation", icon: /* @__PURE__ */ e(w, { className: "w-4 h-4" }), onSelect: () => {
+  } },
+  { id: "terminal", label: "Open Terminal", group: "Tools", shortcut: ["⌘", "`"], icon: /* @__PURE__ */ e(x, { className: "w-4 h-4" }), onSelect: () => {
+  } },
+  { id: "search", label: "Search in Files", group: "Tools", shortcut: ["⌘", "Shift", "F"], icon: /* @__PURE__ */ e(n, { className: "w-4 h-4" }), onSelect: () => {
+  } }
+];
+function C(t) {
+  const [o, l] = s(!1);
+  return /* @__PURE__ */ a("div", { className: "flex flex-col items-center gap-4", children: [
+    /* @__PURE__ */ a(c, { variant: "solid", size: "medium", onClick: () => l(!0), children: [
+      /* @__PURE__ */ e(n, { size: 14, className: "mr-2" }),
+      "Open Command Palette"
+    ] }),
+    /* @__PURE__ */ a("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
+      "Or press ",
+      /* @__PURE__ */ a("kbd", { className: "px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono", children: [
+        "⌘",
+        t.triggerKey?.toUpperCase() ?? "K"
+      ] })
+    ] }),
+    /* @__PURE__ */ e(
+      d,
+      {
+        open: o,
+        onOpenChange: l,
+        items: m,
+        placeholder: t.placeholder
+      }
+    )
+  ] });
+}
+const T = () => {
+  const [t, o] = s(!1);
+  return /* @__PURE__ */ a(p, { children: [
+    /* @__PURE__ */ e(
+      h,
+      {
+        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: /* @__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-orange-500 via-amber-500 to-yellow-500 rounded-full flex items-center justify-center shadow-lg border border-orange-500/50", children: /* @__PURE__ */ e(f, { 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(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Interactive Demo", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "p-6 flex flex-col items-center gap-4", children: [
+      /* @__PURE__ */ a(c, { variant: "solid", size: "medium", onClick: () => o(!0), children: [
+        /* @__PURE__ */ e(n, { size: 14, className: "mr-2" }),
+        "Open Command Palette"
+      ] }),
+      /* @__PURE__ */ a("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
+        "Or press",
+        " ",
+        /* @__PURE__ */ e("kbd", { className: "px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono", children: "⌘K" }),
+        " ",
+        "anywhere on this page"
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ e(
+      d,
+      {
+        open: t,
+        onOpenChange: o,
+        items: m,
+        placeholder: "Search commands, files, navigation…"
+      }
+    ),
+    /* @__PURE__ */ e(
+      g,
+      {
+        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) => /* @__PURE__ */ e(C, { ...l })
+      }
+    ),
+    /* @__PURE__ */ e(u, { componentName: "MacOSCommandPalette" }),
+    /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      S,
+      {
+        language: "tsx",
+        code: `import { MacOSCommandPalette } from '@e-burgos/tucu-ui';
+
+const items = [
+  {
+    id: 'new-file',
+    label: 'New File',
+    group: 'File',
+    shortcut: ['⌘', 'N'],
+    icon: <FilePlusIcon />,
+    onSelect: () => { /* … */ },
+  },
+  {
+    id: 'settings',
+    label: 'Settings',
+    group: 'Navigation',
+    shortcut: ['⌘', ','],
+    onSelect: () => navigate('/settings'),
+  },
+];
+
+function App() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <MacOSCommandPalette
+      items={items}
+      placeholder="Search commands…"
+      open={open}
+      onOpenChange={setOpen}
+      triggerKey="k"   // default: Meta+K
+    />
+  );
+}`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  T as MacOSCommandPaletteSection,
+  T as default
+};

package/documentation/MacOSCommandPaletteSection-DVNy_6I7.js

@@ -0,0 +1,33 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),t=require("../index-DWDUS-PU.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 = [
+  {
+    id: 'new-file',
+    label: 'New File',
+    group: 'File',
+    shortcut: ['⌘', 'N'],
+    icon: <FilePlusIcon />,
+    onSelect: () => { /* … */ },
+  },
+  {
+    id: 'settings',
+    label: 'Settings',
+    group: 'Navigation',
+    shortcut: ['⌘', ','],
+    onSelect: () => navigate('/settings'),
+  },
+];
+
+function App() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <MacOSCommandPalette
+      items={items}
+      placeholder="Search commands…"
+      open={open}
+      onOpenChange={setOpen}
+      triggerKey="k"   // default: Meta+K
+    />
+  );
+}`})})})})]})};exports.MacOSCommandPaletteSection=i;exports.default=i;

package/documentation/MacOSMaterialsSection-Df-ADZ6d.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-DoxeCFUJ.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-DsZwofSg.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DWDUS-PU.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-C58OPCNq.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-DoxeCFUJ.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
+};