@e-burgos/tucu-ui 2.0.7 → 2.0.9

package/documentation/MFESupportSection-BfZN1ruk.js

@@ -0,0 +1,218 @@
+import { jsxs as t, Fragment as n, jsx as e } from "react/jsx-runtime";
+import { H as l, T as a, C as i, a as r, c as o, aj as c, ax as d } from "../index-lfg6LZ1p.js";
+import { Box as p, AlertTriangle as m, Settings as u, Split as h, Lock as g, Rocket as f } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const k = () => /* @__PURE__ */ t(n, { children: [
+  /* @__PURE__ */ e(
+    l,
+    {
+      title: "Micro Frontends (MFE)",
+      description: "Designed for distributed architectures where multiple applications are deployed independently. Uses explicit route configuration with appRoutesConfig, basePath, and built-in authentication.",
+      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-purple-500 via-indigo-500 to-blue-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(p, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+    }
+  ),
+  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ t("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "IAppRouteConfig Interface" }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Extends React Router's RouteProps with access control"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(r, { title: "Interface Definition", children: /* @__PURE__ */ e(o, { language: "typescript", code: `import { RouteProps } from 'react-router-dom';
+
+// Extends React Router's RouteProps (provides path, element, index, etc.)
+type IAppRouteConfig = RouteProps & {
+  key: string;           // Unique identifier for the route
+  isPublic?: boolean;    // Whether the route is publicly accessible
+  disabled?: boolean;    // Whether the route is temporarily disabled
+};` }) }) }),
+    /* @__PURE__ */ e(c, { variant: "warning", dismissible: !1, children: /* @__PURE__ */ t(a, { tag: "p", className: "text-sm", children: [
+      /* @__PURE__ */ e(m, { className: "w-4 h-4 inline mr-2" }),
+      "MFE mode requires ",
+      /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: "isAuthenticated" }),
+      " (boolean) and ",
+      /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: "loginUrl" }),
+      " (string) as mandatory props. TypeScript enforces this at compile time."
+    ] }) })
+  ] }),
+  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ t("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Basic Usage" }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Minimal MFE setup with authentication"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(r, { title: "MFE ThemeProvider", children: /* @__PURE__ */ e(o, { language: "tsx", code: `import { ThemeProvider, IAppRouteConfig } from '@e-burgos/tucu-ui';
+import '@e-burgos/tucu-ui/styles';
+
+const appRoutesConfig: IAppRouteConfig[] = [
+  {
+    key: 'home',
+    path: '/',
+    element: <HomePage />,
+    isPublic: true,
+  },
+  {
+    key: 'dashboard',
+    path: '/dashboard',
+    element: <DashboardPage />,
+    isPublic: false, // Private route, requires authentication
+  },
+  {
+    key: 'profile',
+    path: '/profile',
+    element: <ProfilePage />,
+    isPublic: false,
+  },
+];
+
+function MfeApp() {
+  return (
+    <ThemeProvider
+      architecturalPatterns="mfe"
+      basePath="/my-app"
+      appRoutesConfig={appRoutesConfig}
+      isAuthenticated={true}    // Required: authentication state
+      loginUrl="/auth/login"    // Required: redirect URL for unauthenticated users
+      logo={{ name: 'My', secondName: 'App' }}
+      showSettings
+    />
+  );
+}` }) }) })
+  ] }),
+  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ t("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Advanced: Public/Private Routes" }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Authentication handling with disabled routes"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(r, { title: "Advanced Configuration", children: /* @__PURE__ */ e(o, { language: "tsx", code: `import { ThemeProvider, IAppRouteConfig } from '@e-burgos/tucu-ui';
+
+const appRoutesConfig: IAppRouteConfig[] = [
+  // Public routes (accessible without authentication)
+  { key: 'login', path: '/login', element: <LoginPage />, isPublic: true },
+  { key: 'register', path: '/register', element: <RegisterPage />, isPublic: true },
+
+  // Private routes (require authentication)
+  { key: 'dashboard', path: '/dashboard', element: <DashboardPage /> },
+  { key: 'settings', path: '/settings', element: <SettingsPage /> },
+
+  // Disabled routes (temporarily unavailable)
+  { key: 'beta', path: '/beta', element: <BetaPage />, disabled: true },
+];
+
+function MfeApp() {
+  const { isLoggedIn } = useAuth();
+
+  return (
+    <ThemeProvider
+      architecturalPatterns="mfe"
+      basePath="/mfe-app"
+      appRoutesConfig={appRoutesConfig}
+      isAuthenticated={isLoggedIn}
+      loginUrl="/mfe-app/login"
+      logo={{ name: 'MFE', secondName: 'App' }}
+      showSettings
+    />
+  );
+}` }) }) })
+  ] }),
+  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ t("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Type Safety" }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "TypeScript enforces correct prop combinations"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(r, { title: "Compile-Time Validation", children: /* @__PURE__ */ e(o, { language: "tsx", code: `// ✅ Correct — MFE with all required props
+<ThemeProvider
+  architecturalPatterns="mfe"
+  basePath="/app"
+  appRoutesConfig={routes}
+  isAuthenticated={isLoggedIn}
+  loginUrl="/login"
+/>
+
+// ❌ Error — Missing required props
+<ThemeProvider
+  architecturalPatterns="mfe"
+  basePath="/app"
+  appRoutesConfig={routes}
+  // TS Error: Property 'isAuthenticated' is missing
+  // TS Error: Property 'loginUrl' is missing
+/>
+
+// ❌ Error — Mixing MFE with Standalone props
+<ThemeProvider
+  architecturalPatterns="mfe"
+  menuItems={[...]}  // Error: not allowed in MFE mode
+  basePath="/app"
+  appRoutesConfig={routes}
+/>` }) }) })
+  ] }),
+  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ t("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Key Features" }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Benefits of the MFE architectural pattern"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6", children: [
+      {
+        icon: /* @__PURE__ */ e(u, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Explicit Route Config",
+        description: "Full control over each route via appRoutesConfig with access control.",
+        iconBgClassName: "from-purple-500 to-indigo-500"
+      },
+      {
+        icon: /* @__PURE__ */ e(h, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Route Isolation",
+        description: "Each MFE has its own basePath ensuring complete route isolation.",
+        iconBgClassName: "from-blue-500 to-cyan-500"
+      },
+      {
+        icon: /* @__PURE__ */ e(g, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Auth Integration",
+        description: "Built-in public/private routes with isAuthenticated and loginUrl.",
+        iconBgClassName: "from-red-500 to-rose-500"
+      },
+      {
+        icon: /* @__PURE__ */ e(f, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Independent Deploy",
+        description: "Each app can be developed, built, and deployed independently.",
+        iconBgClassName: "from-green-500 to-emerald-500"
+      }
+    ].map((s) => /* @__PURE__ */ e(d, { layout: "vertical", ...s }, s.title)) })
+  ] })
+] });
+export {
+  k as default
+};

package/documentation/MFESupportSection-BsWrFr8n.js

@@ -0,0 +1,97 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-BaGqriuz.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const c=()=>{const i=`import { RouteProps } from 'react-router-dom';
+
+// Extends React Router's RouteProps (provides path, element, index, etc.)
+type IAppRouteConfig = RouteProps & {
+  key: string;           // Unique identifier for the route
+  isPublic?: boolean;    // Whether the route is publicly accessible
+  disabled?: boolean;    // Whether the route is temporarily disabled
+};`,s=`import { ThemeProvider, IAppRouteConfig } from '@e-burgos/tucu-ui';
+import '@e-burgos/tucu-ui/styles';
+
+const appRoutesConfig: IAppRouteConfig[] = [
+  {
+    key: 'home',
+    path: '/',
+    element: <HomePage />,
+    isPublic: true,
+  },
+  {
+    key: 'dashboard',
+    path: '/dashboard',
+    element: <DashboardPage />,
+    isPublic: false, // Private route, requires authentication
+  },
+  {
+    key: 'profile',
+    path: '/profile',
+    element: <ProfilePage />,
+    isPublic: false,
+  },
+];
+
+function MfeApp() {
+  return (
+    <ThemeProvider
+      architecturalPatterns="mfe"
+      basePath="/my-app"
+      appRoutesConfig={appRoutesConfig}
+      isAuthenticated={true}    // Required: authentication state
+      loginUrl="/auth/login"    // Required: redirect URL for unauthenticated users
+      logo={{ name: 'My', secondName: 'App' }}
+      showSettings
+    />
+  );
+}`,o=`import { ThemeProvider, IAppRouteConfig } from '@e-burgos/tucu-ui';
+
+const appRoutesConfig: IAppRouteConfig[] = [
+  // Public routes (accessible without authentication)
+  { key: 'login', path: '/login', element: <LoginPage />, isPublic: true },
+  { key: 'register', path: '/register', element: <RegisterPage />, isPublic: true },
+
+  // Private routes (require authentication)
+  { key: 'dashboard', path: '/dashboard', element: <DashboardPage /> },
+  { key: 'settings', path: '/settings', element: <SettingsPage /> },
+
+  // Disabled routes (temporarily unavailable)
+  { key: 'beta', path: '/beta', element: <BetaPage />, disabled: true },
+];
+
+function MfeApp() {
+  const { isLoggedIn } = useAuth();
+
+  return (
+    <ThemeProvider
+      architecturalPatterns="mfe"
+      basePath="/mfe-app"
+      appRoutesConfig={appRoutesConfig}
+      isAuthenticated={isLoggedIn}
+      loginUrl="/mfe-app/login"
+      logo={{ name: 'MFE', secondName: 'App' }}
+      showSettings
+    />
+  );
+}`,n=`// ✅ Correct — MFE with all required props
+<ThemeProvider
+  architecturalPatterns="mfe"
+  basePath="/app"
+  appRoutesConfig={routes}
+  isAuthenticated={isLoggedIn}
+  loginUrl="/login"
+/>
+
+// ❌ Error — Missing required props
+<ThemeProvider
+  architecturalPatterns="mfe"
+  basePath="/app"
+  appRoutesConfig={routes}
+  // TS Error: Property 'isAuthenticated' is missing
+  // TS Error: Property 'loginUrl' is missing
+/>
+
+// ❌ Error — Mixing MFE with Standalone props
+<ThemeProvider
+  architecturalPatterns="mfe"
+  menuItems={[...]}  // Error: not allowed in MFE mode
+  basePath="/app"
+  appRoutesConfig={routes}
+/>`,l=[{icon:e.jsx(a.Settings,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Explicit Route Config",description:"Full control over each route via appRoutesConfig with access control.",iconBgClassName:"from-purple-500 to-indigo-500"},{icon:e.jsx(a.Split,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Route Isolation",description:"Each MFE has its own basePath ensuring complete route isolation.",iconBgClassName:"from-blue-500 to-cyan-500"},{icon:e.jsx(a.Lock,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Auth Integration",description:"Built-in public/private routes with isAuthenticated and loginUrl.",iconBgClassName:"from-red-500 to-rose-500"},{icon:e.jsx(a.Rocket,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Independent Deploy",description:"Each app can be developed, built, and deployed independently.",iconBgClassName:"from-green-500 to-emerald-500"}];return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"Micro Frontends (MFE)",description:"Designed for distributed architectures where multiple applications are deployed independently. Uses explicit route configuration with appRoutesConfig, basePath, and built-in authentication.",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-purple-500 via-indigo-500 to-blue-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(a.Box,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"IAppRouteConfig Interface"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Extends React Router's RouteProps with access control"})]}),e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Interface Definition",children:e.jsx(t.CodeBlock,{language:"typescript",code:i})})}),e.jsx(t.Alert,{variant:"warning",dismissible:!1,children:e.jsxs(t.Typography,{tag:"p",className:"text-sm",children:[e.jsx(a.AlertTriangle,{className:"w-4 h-4 inline mr-2"}),"MFE mode requires ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"isAuthenticated"})," (boolean) and ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"loginUrl"})," (string) as mandatory props. TypeScript enforces this at compile time."]})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Basic Usage"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Minimal MFE setup with authentication"})]}),e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"MFE ThemeProvider",children:e.jsx(t.CodeBlock,{language:"tsx",code:s})})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Advanced: Public/Private Routes"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Authentication handling with disabled routes"})]}),e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Advanced Configuration",children:e.jsx(t.CodeBlock,{language:"tsx",code:o})})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Type Safety"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"TypeScript enforces correct prop combinations"})]}),e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Compile-Time Validation",children:e.jsx(t.CodeBlock,{language:"tsx",code:n})})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Key Features"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Benefits of the MFE architectural pattern"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6",children:l.map(r=>e.jsx(t.FeatureCard,{layout:"vertical",...r},r.title))})]})]})};exports.default=c;

package/documentation/MacOSBackgroundsSection-5FwRmwSt.js

@@ -0,0 +1,290 @@
+import { jsxs as a, Fragment as c, jsx as e } from "react/jsx-runtime";
+import { ay as m, H as p, C as s, a as d, T as l, by as i, bz as n, y as g } from "../index-lfg6LZ1p.js";
+import { Image as b } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const h = [
+  {
+    id: "base",
+    name: "Base",
+    desc: "CSS-only spatial gradient generated with tokens. Used as the default body/window background. No image assets needed — adapts automatically between light and dark modes via CSS custom properties.",
+    dimensions: "Fluid (CSS gradient)",
+    usage: "Body, root window, app shell background"
+  },
+  {
+    id: "wave",
+    name: "Wave",
+    desc: "Full-width decorative background with flowing organic shapes. Designed for desktop/tablet viewports as hero sections or immersive landing pages.",
+    dimensions: "1512 × 982",
+    usage: "Hero sections, landing pages, desktop full-screen"
+  },
+  {
+    id: "wallpaper",
+    name: "Wallpaper",
+    desc: "Compact landscape format optimized for card-like areas, banners, or contained sections where a spatial background adds depth without covering the full viewport.",
+    dimensions: "1080 × 560",
+    usage: "Banners, feature sections, contained backgrounds"
+  },
+  {
+    id: "mobile",
+    name: "Mobile",
+    desc: "Portrait-oriented background asset optimized for mobile viewports and tall narrow containers.",
+    dimensions: "402 × 874",
+    usage: "Mobile screens, narrow containers, portrait layouts"
+  }
+], v = () => {
+  const { mode: o } = m(), r = o === "dark";
+  return /* @__PURE__ */ a(c, { children: [
+    /* @__PURE__ */ e(
+      p,
+      {
+        title: "Backgrounds",
+        description: "macOS Tahoe provides 4 background types optimized for different viewport sizes and use cases. All adapt between light and dark automatically.",
+        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-cyan-400 via-blue-500 to-indigo-600 rounded-full flex items-center justify-center shadow-lg border border-cyan-400/50", children: /* @__PURE__ */ e(b, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Background Types", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: [
+      /* @__PURE__ */ e(
+        l,
+        {
+          tag: "p",
+          className: "text-sm text-gray-500 dark:text-gray-400 mb-6",
+          children: "Each background type is designed for a specific screen context. Choose the appropriate format based on your layout's viewport and orientation requirements."
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4", children: h.map((t) => /* @__PURE__ */ a(
+        "div",
+        {
+          className: "p-4 rounded-xl border border-gray-200 dark:border-gray-700 space-y-2",
+          children: [
+            /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  className: "w-3 h-3 rounded-full",
+                  style: {
+                    backgroundColor: t.id === "base" ? r ? "#0a84ff" : "#007aff" : t.id === "wave" ? r ? "#30d158" : "#34c759" : t.id === "wallpaper" ? r ? "#ff9f0a" : "#ff9500" : r ? "#bf5af2" : "#af52de"
+                  }
+                }
+              ),
+              /* @__PURE__ */ e("span", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: t.name })
+            ] }),
+            /* @__PURE__ */ e("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: t.desc }),
+            /* @__PURE__ */ a("div", { className: "pt-2 border-t border-gray-100 dark:border-gray-800 space-y-1", children: [
+              /* @__PURE__ */ e("p", { className: "text-[10px] font-mono text-gray-400", children: t.dimensions }),
+              /* @__PURE__ */ e("p", { className: "text-[10px] text-gray-400", children: t.usage })
+            ] })
+          ]
+        },
+        t.id
+      )) })
+    ] }) }) }),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Base (CSS Spatial Gradient)", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: [
+      /* @__PURE__ */ a(
+        l,
+        {
+          tag: "p",
+          className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
+          children: [
+            "Generated entirely with CSS custom properties. Currently used as the body background in the demo. Available classes:",
+            " ",
+            /* @__PURE__ */ e("code", { className: "text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono", children: "macos-bg-spatial-aurora" }),
+            ",",
+            " ",
+            /* @__PURE__ */ e("code", { className: "text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono", children: "macos-bg-spatial-depth" }),
+            ",",
+            " ",
+            /* @__PURE__ */ e("code", { className: "text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono", children: "macos-bg-spatial-demo" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
+        /* @__PURE__ */ a("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "relative w-full h-40 rounded-xl overflow-hidden border border-gray-200 dark:border-gray-700",
+              style: {
+                backgroundColor: r ? "#131318" : "#f0f2f7"
+              },
+              children: /* @__PURE__ */ e(
+                "div",
+                {
+                  className: "absolute inset-0 rounded-xl",
+                  style: {
+                    background: r ? "radial-gradient(circle at 28% 32%, rgba(18, 60, 100, 0.8) 0%, transparent 42%), radial-gradient(circle at 72% 68%, rgba(55, 30, 100, 0.6) 0%, transparent 42%)" : "radial-gradient(circle at 28% 32%, rgba(142, 200, 255, 0.45) 0%, transparent 42%), radial-gradient(circle at 72% 68%, rgba(170, 150, 255, 0.28) 0%, transparent 42%)",
+                    filter: "blur(30px)"
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ e("p", { className: "text-xs font-medium text-center text-gray-700 dark:text-gray-300", children: "Aurora" }),
+          /* @__PURE__ */ e("p", { className: "text-[10px] text-center text-gray-400", children: "Animated spatial aurora" })
+        ] }),
+        /* @__PURE__ */ a("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "w-full h-40 rounded-xl border border-gray-200 dark:border-gray-700",
+              style: {
+                background: r ? "linear-gradient(160deg, #141418 0%, #18181e 40%, #191520 70%, #141418 100%)" : "linear-gradient(160deg, #f0f2f6 0%, #eaedf4 40%, #f2f0f8 70%, #eef2f6 100%)"
+              }
+            }
+          ),
+          /* @__PURE__ */ e("p", { className: "text-xs font-medium text-center text-gray-700 dark:text-gray-300", children: "Depth" }),
+          /* @__PURE__ */ e("p", { className: "text-[10px] text-center text-gray-400", children: "Sober, data-focused" })
+        ] }),
+        /* @__PURE__ */ a("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "w-full h-40 rounded-xl border border-gray-200 dark:border-gray-700",
+              style: {
+                background: r ? "radial-gradient(ellipse 80% 60% at 20% 10%, rgba(0, 60, 160, 0.55) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 80% 80%, rgba(80, 0, 160, 0.4) 0%, transparent 55%), #101014" : "radial-gradient(ellipse 80% 60% at 20% 10%, rgba(100, 180, 255, 0.4) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 80% 80%, rgba(160, 120, 255, 0.3) 0%, transparent 55%), #f0f2f7"
+              }
+            }
+          ),
+          /* @__PURE__ */ e("p", { className: "text-xs font-medium text-center text-gray-700 dark:text-gray-300", children: "Demo" }),
+          /* @__PURE__ */ e("p", { className: "text-[10px] text-center text-gray-400", children: "Expressive, showcases" })
+        ] })
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Wave", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: [
+      /* @__PURE__ */ e(
+        l,
+        {
+          tag: "p",
+          className: "text-sm text-gray-500 dark:text-gray-400 mb-2",
+          children: "Full-width decorative background for desktop/tablet hero sections."
+        }
+      ),
+      /* @__PURE__ */ e("p", { className: "text-[10px] font-mono text-gray-400 mb-4", children: "1512 × 982 — Landscape (desktop full-screen)" }),
+      /* @__PURE__ */ e("div", { className: "rounded-xl overflow-hidden border border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ e(
+        i,
+        {
+          variant: "wave",
+          className: "rounded-xl",
+          style: { height: "320px" }
+        }
+      ) }),
+      /* @__PURE__ */ e("div", { className: "mt-3 p-3 rounded-lg bg-gray-100 dark:bg-gray-800/50", children: /* @__PURE__ */ a("p", { className: "text-[11px] font-mono text-gray-500 dark:text-gray-400", children: [
+        /* @__PURE__ */ e("span", { className: "text-gray-700 dark:text-gray-300", children: "url:" }),
+        " ",
+        n("wave", r)
+      ] }) })
+    ] }) }) }),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Wallpaper", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: [
+      /* @__PURE__ */ e(
+        l,
+        {
+          tag: "p",
+          className: "text-sm text-gray-500 dark:text-gray-400 mb-2",
+          children: "Compact landscape format for banners, feature sections, and contained areas."
+        }
+      ),
+      /* @__PURE__ */ e("p", { className: "text-[10px] font-mono text-gray-400 mb-4", children: "1080 × 560 — Landscape (contained sections)" }),
+      /* @__PURE__ */ e("div", { className: "rounded-xl overflow-hidden border border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ e(
+        i,
+        {
+          variant: "wallpaper",
+          className: "rounded-xl",
+          style: { height: "280px" }
+        }
+      ) }),
+      /* @__PURE__ */ e("div", { className: "mt-3 p-3 rounded-lg bg-gray-100 dark:bg-gray-800/50", children: /* @__PURE__ */ a("p", { className: "text-[11px] font-mono text-gray-500 dark:text-gray-400", children: [
+        /* @__PURE__ */ e("span", { className: "text-gray-700 dark:text-gray-300", children: "url:" }),
+        " ",
+        n("wallpaper", r)
+      ] }) })
+    ] }) }) }),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Mobile", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: [
+      /* @__PURE__ */ e(
+        l,
+        {
+          tag: "p",
+          className: "text-sm text-gray-500 dark:text-gray-400 mb-2",
+          children: "Portrait-oriented asset for mobile viewports and narrow containers."
+        }
+      ),
+      /* @__PURE__ */ e("p", { className: "text-[10px] font-mono text-gray-400 mb-4", children: "402 × 874 — Portrait (mobile screens)" }),
+      /* @__PURE__ */ e("div", { className: "flex justify-center", children: /* @__PURE__ */ e(
+        "div",
+        {
+          className: "rounded-xl overflow-hidden border border-gray-200 dark:border-gray-700",
+          style: { width: "220px", height: "478px" },
+          children: /* @__PURE__ */ e(
+            i,
+            {
+              variant: "mobile",
+              className: "rounded-xl w-full h-full"
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ e("div", { className: "mt-3 p-3 rounded-lg bg-gray-100 dark:bg-gray-800/50", children: /* @__PURE__ */ a("p", { className: "text-[11px] font-mono text-gray-500 dark:text-gray-400", children: [
+        /* @__PURE__ */ e("span", { className: "text-gray-700 dark:text-gray-300", children: "url:" }),
+        " ",
+        n("mobile", r)
+      ] }) })
+    ] }) }) }),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Screen Size Mapping", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: [
+      /* @__PURE__ */ e(
+        l,
+        {
+          tag: "p",
+          className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
+          children: "Recommended background type per viewport breakpoint."
+        }
+      ),
+      /* @__PURE__ */ e(
+        g,
+        {
+          columns: [
+            { key: "viewport", label: "Viewport" },
+            {
+              key: "breakpoint",
+              label: "Breakpoint",
+              className: "font-mono"
+            },
+            { key: "background", label: "Background" },
+            { key: "asset", label: "Asset", className: "font-mono" }
+          ],
+          data: [
+            {
+              viewport: "Mobile",
+              breakpoint: "< 640px",
+              background: "Mobile",
+              asset: `${r ? "dark" : "light"}-mobile.svg`
+            },
+            {
+              viewport: "Tablet",
+              breakpoint: "640–1024px",
+              background: "Wallpaper",
+              asset: `${r ? "dark" : "light"}-wallpaper.svg`
+            },
+            {
+              viewport: "Desktop",
+              breakpoint: "> 1024px",
+              background: "Wave",
+              asset: `${r ? "dark" : "light"}-wave.svg`
+            },
+            {
+              viewport: "Any",
+              breakpoint: "All",
+              background: "Base (CSS)",
+              asset: "No asset needed"
+            }
+          ],
+          hoverable: !0,
+          striped: !1
+        }
+      )
+    ] }) }) })
+  ] });
+};
+export {
+  v as MacOSBackgroundsSection,
+  v as default
+};

package/documentation/MacOSBackgroundsSection-c6o8Zwj8.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-BaGqriuz.js"),l=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=[{id:"base",name:"Base",desc:"CSS-only spatial gradient generated with tokens. Used as the default body/window background. No image assets needed — adapts automatically between light and dark modes via CSS custom properties.",dimensions:"Fluid (CSS gradient)",usage:"Body, root window, app shell background"},{id:"wave",name:"Wave",desc:"Full-width decorative background with flowing organic shapes. Designed for desktop/tablet viewports as hero sections or immersive landing pages.",dimensions:"1512 × 982",usage:"Hero sections, landing pages, desktop full-screen"},{id:"wallpaper",name:"Wallpaper",desc:"Compact landscape format optimized for card-like areas, banners, or contained sections where a spatial background adds depth without covering the full viewport.",dimensions:"1080 × 560",usage:"Banners, feature sections, contained backgrounds"},{id:"mobile",name:"Mobile",desc:"Portrait-oriented background asset optimized for mobile viewports and tall narrow containers.",dimensions:"402 × 874",usage:"Mobile screens, narrow containers, portrait layouts"}],t=()=>{const{mode:d}=a.useTheme(),r=d==="dark";return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Backgrounds",description:"macOS Tahoe provides 4 background types optimized for different viewport sizes and use cases. All adapt between light and dark automatically.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-cyan-400 via-blue-500 to-indigo-600 rounded-full flex items-center justify-center shadow-lg border border-cyan-400/50",children:e.jsx(l.Image,{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(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Background Types",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-6",children:"Each background type is designed for a specific screen context. Choose the appropriate format based on your layout's viewport and orientation requirements."}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4",children:n.map(s=>e.jsxs("div",{className:"p-4 rounded-xl border border-gray-200 dark:border-gray-700 space-y-2",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("div",{className:"w-3 h-3 rounded-full",style:{backgroundColor:s.id==="base"?r?"#0a84ff":"#007aff":s.id==="wave"?r?"#30d158":"#34c759":s.id==="wallpaper"?r?"#ff9f0a":"#ff9500":r?"#bf5af2":"#af52de"}}),e.jsx("span",{className:"text-sm font-semibold text-gray-900 dark:text-gray-100",children:s.name})]}),e.jsx("p",{className:"text-xs text-gray-500 dark:text-gray-400",children:s.desc}),e.jsxs("div",{className:"pt-2 border-t border-gray-100 dark:border-gray-800 space-y-1",children:[e.jsx("p",{className:"text-[10px] font-mono text-gray-400",children:s.dimensions}),e.jsx("p",{className:"text-[10px] text-gray-400",children:s.usage})]})]},s.id))})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Base (CSS Spatial Gradient)",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsxs(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:["Generated entirely with CSS custom properties. Currently used as the body background in the demo. Available classes:"," ",e.jsx("code",{className:"text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono",children:"macos-bg-spatial-aurora"}),","," ",e.jsx("code",{className:"text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono",children:"macos-bg-spatial-depth"}),","," ",e.jsx("code",{className:"text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono",children:"macos-bg-spatial-demo"})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-4",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx("div",{className:"relative w-full h-40 rounded-xl overflow-hidden border border-gray-200 dark:border-gray-700",style:{backgroundColor:r?"#131318":"#f0f2f7"},children:e.jsx("div",{className:"absolute inset-0 rounded-xl",style:{background:r?"radial-gradient(circle at 28% 32%, rgba(18, 60, 100, 0.8) 0%, transparent 42%), radial-gradient(circle at 72% 68%, rgba(55, 30, 100, 0.6) 0%, transparent 42%)":"radial-gradient(circle at 28% 32%, rgba(142, 200, 255, 0.45) 0%, transparent 42%), radial-gradient(circle at 72% 68%, rgba(170, 150, 255, 0.28) 0%, transparent 42%)",filter:"blur(30px)"}})}),e.jsx("p",{className:"text-xs font-medium text-center text-gray-700 dark:text-gray-300",children:"Aurora"}),e.jsx("p",{className:"text-[10px] text-center text-gray-400",children:"Animated spatial aurora"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("div",{className:"w-full h-40 rounded-xl border border-gray-200 dark:border-gray-700",style:{background:r?"linear-gradient(160deg, #141418 0%, #18181e 40%, #191520 70%, #141418 100%)":"linear-gradient(160deg, #f0f2f6 0%, #eaedf4 40%, #f2f0f8 70%, #eef2f6 100%)"}}),e.jsx("p",{className:"text-xs font-medium text-center text-gray-700 dark:text-gray-300",children:"Depth"}),e.jsx("p",{className:"text-[10px] text-center text-gray-400",children:"Sober, data-focused"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("div",{className:"w-full h-40 rounded-xl border border-gray-200 dark:border-gray-700",style:{background:r?"radial-gradient(ellipse 80% 60% at 20% 10%, rgba(0, 60, 160, 0.55) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 80% 80%, rgba(80, 0, 160, 0.4) 0%, transparent 55%), #101014":"radial-gradient(ellipse 80% 60% at 20% 10%, rgba(100, 180, 255, 0.4) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 80% 80%, rgba(160, 120, 255, 0.3) 0%, transparent 55%), #f0f2f7"}}),e.jsx("p",{className:"text-xs font-medium text-center text-gray-700 dark:text-gray-300",children:"Demo"}),e.jsx("p",{className:"text-[10px] text-center text-gray-400",children:"Expressive, showcases"})]})]})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Wave",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-2",children:"Full-width decorative background for desktop/tablet hero sections."}),e.jsx("p",{className:"text-[10px] font-mono text-gray-400 mb-4",children:"1512 × 982 — Landscape (desktop full-screen)"}),e.jsx("div",{className:"rounded-xl overflow-hidden border border-gray-200 dark:border-gray-700",children:e.jsx(a.MacOSBackground,{variant:"wave",className:"rounded-xl",style:{height:"320px"}})}),e.jsx("div",{className:"mt-3 p-3 rounded-lg bg-gray-100 dark:bg-gray-800/50",children:e.jsxs("p",{className:"text-[11px] font-mono text-gray-500 dark:text-gray-400",children:[e.jsx("span",{className:"text-gray-700 dark:text-gray-300",children:"url:"})," ",a.getMacOSBackgroundUrl("wave",r)]})})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Wallpaper",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-2",children:"Compact landscape format for banners, feature sections, and contained areas."}),e.jsx("p",{className:"text-[10px] font-mono text-gray-400 mb-4",children:"1080 × 560 — Landscape (contained sections)"}),e.jsx("div",{className:"rounded-xl overflow-hidden border border-gray-200 dark:border-gray-700",children:e.jsx(a.MacOSBackground,{variant:"wallpaper",className:"rounded-xl",style:{height:"280px"}})}),e.jsx("div",{className:"mt-3 p-3 rounded-lg bg-gray-100 dark:bg-gray-800/50",children:e.jsxs("p",{className:"text-[11px] font-mono text-gray-500 dark:text-gray-400",children:[e.jsx("span",{className:"text-gray-700 dark:text-gray-300",children:"url:"})," ",a.getMacOSBackgroundUrl("wallpaper",r)]})})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Mobile",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-2",children:"Portrait-oriented asset for mobile viewports and narrow containers."}),e.jsx("p",{className:"text-[10px] font-mono text-gray-400 mb-4",children:"402 × 874 — Portrait (mobile screens)"}),e.jsx("div",{className:"flex justify-center",children:e.jsx("div",{className:"rounded-xl overflow-hidden border border-gray-200 dark:border-gray-700",style:{width:"220px",height:"478px"},children:e.jsx(a.MacOSBackground,{variant:"mobile",className:"rounded-xl w-full h-full"})})}),e.jsx("div",{className:"mt-3 p-3 rounded-lg bg-gray-100 dark:bg-gray-800/50",children:e.jsxs("p",{className:"text-[11px] font-mono text-gray-500 dark:text-gray-400",children:[e.jsx("span",{className:"text-gray-700 dark:text-gray-300",children:"url:"})," ",a.getMacOSBackgroundUrl("mobile",r)]})})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Screen Size Mapping",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:"Recommended background type per viewport breakpoint."}),e.jsx(a.BasicTable,{columns:[{key:"viewport",label:"Viewport"},{key:"breakpoint",label:"Breakpoint",className:"font-mono"},{key:"background",label:"Background"},{key:"asset",label:"Asset",className:"font-mono"}],data:[{viewport:"Mobile",breakpoint:"< 640px",background:"Mobile",asset:`${r?"dark":"light"}-mobile.svg`},{viewport:"Tablet",breakpoint:"640–1024px",background:"Wallpaper",asset:`${r?"dark":"light"}-wallpaper.svg`},{viewport:"Desktop",breakpoint:"> 1024px",background:"Wave",asset:`${r?"dark":"light"}-wave.svg`},{viewport:"Any",breakpoint:"All",background:"Base (CSS)",asset:"No asset needed"}],hoverable:!0,striped:!1})]})})})]})};exports.MacOSBackgroundsSection=t;exports.default=t;