@e-burgos/tucu-ui 2.6.0 → 2.7.0

package/documentation/MacOSCommandPaletteSection-BTrRzuuO.js

@@ -1,143 +0,0 @@
-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

@@ -1,33 +0,0 @@
-"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

@@ -1,280 +0,0 @@
-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

@@ -1 +0,0 @@
-"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

@@ -1,169 +0,0 @@
-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
-};