@e-burgos/tucu-ui 2.0.9 → 2.0.10

package/documentation/ImageSection-C1nOKmH2.js

@@ -1,82 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("../index-BaGqriuz.js"),r=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=()=>a.jsxs(a.Fragment,{children:[a.jsx(e.HeroCard,{title:"Image",description:`A powerful image component inspired by Next.js Image, featuring lazy
-          loading, blur placeholders, error handling, and automatic
-          optimization.`,icon:a.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-sky-600 to-blue-500 rounded-full flex items-center justify-center shadow-lg",children:a.jsx(r.ImageIcon,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Basic Usage",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Standard Image"}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Basic usage with width and height."}),a.jsx(e.Image,{src:"https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=400&h=300&fit=crop",alt:"Mountain landscape",width:400,height:300,className:"rounded-lg"})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"With Lazy Loading"}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Automatic lazy loading with smooth fade-in."}),a.jsx(e.Image,{src:"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=300&fit=crop",alt:"Mountain peaks",width:400,height:300,loading:"lazy",className:"rounded-lg"})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Object Fit Modes",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-6",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Cover (Default)"}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Fills container, may crop image."}),a.jsx(e.Image,{src:"https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=300&h=200&fit=crop",alt:"Nature landscape cover",width:300,height:200,objectFit:"cover",className:"rounded-lg border-2 border-gray-200 dark:border-gray-700"})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Contain"}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Fits entirely, may have empty space."}),a.jsx(e.Image,{src:"https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=300&h=200&fit=crop",alt:"Nature landscape contain",width:300,height:200,objectFit:"contain",containerClassName:"bg-gray-100 dark:bg-gray-800",className:"rounded-lg"})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Fill"}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Stretches to fill container."}),a.jsx(e.Image,{src:"https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=300&h=200&fit=crop",alt:"Nature landscape fill",width:300,height:200,objectFit:"fill",className:"rounded-lg border-2 border-gray-200 dark:border-gray-700"})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Aspect Ratios",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-6",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"16:9 (Video)"}),a.jsx(e.Image,{src:"https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=400&h=300&fit=crop",alt:"Beach sunset 16:9",aspectRatio:"16/9",fill:!0,containerClassName:"w-full rounded-lg"})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"4:3 (Classic)"}),a.jsx(e.Image,{src:"https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=400&h=300&fit=crop",alt:"Forest path 4:3",aspectRatio:"4/3",fill:!0,containerClassName:"w-full rounded-lg"})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"1:1 (Square)"}),a.jsx(e.Image,{src:"https://images.unsplash.com/photo-1511884642898-4c92249e20b6?w=300&h=300&fit=crop",alt:"City skyline 1:1",aspectRatio:"1/1",fill:!0,containerClassName:"w-full rounded-lg"})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Placeholder Types",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Blur Placeholder"}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Shows animated blur effect while loading."}),a.jsx(e.Image,{src:"https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=400&h=300&fit=crop",alt:"Mountain with blur placeholder",width:400,height:300,placeholder:"blur",className:"rounded-lg"})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Empty Placeholder"}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Shows spinner while loading."}),a.jsx(e.Image,{src:"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=300&fit=crop",alt:"Mountains with empty placeholder",width:400,height:300,placeholder:"empty",className:"rounded-lg"})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Error Handling",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Invalid Image (Fallback)"}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Automatically shows fallback on error."}),a.jsx(e.Image,{src:"https://invalid-url-that-will-fail.com/image.jpg",alt:"Image with fallback",width:400,height:300,className:"rounded-lg"})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Custom Fallback"}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Provide your own fallback image."}),a.jsx(e.Image,{src:"https://invalid-url.com/image.jpg",alt:"Custom fallback",width:400,height:300,fallbackSrc:"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=300&fit=crop",className:"rounded-lg"})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Responsive Images",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"space-y-6",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Full Width Responsive"}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Image fills container width with maintained aspect ratio."}),a.jsx(e.Image,{src:"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=400&fit=crop",alt:"Responsive landscape",aspectRatio:"21/9",fill:!0,containerClassName:"w-full rounded-lg"})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Grid Responsive Images"}),a.jsx("div",{className:"grid grid-cols-2 md:grid-cols-4 gap-4",children:["photo-1682687220742-aba13b6e50ba","photo-1506905925346-21bda4d32df4","photo-1501594907352-04cda38ebc29","photo-1472214103451-9374bd1c798e"].map((s,l)=>a.jsx(e.Image,{src:`https://images.unsplash.com/${s}?w=300&h=300&fit=crop`,alt:`Gallery image ${l+1}`,aspectRatio:"1/1",fill:!0,containerClassName:"w-full rounded-lg"},s))})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Key Features",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsxs(e.Typography,{tag:"h5",className:"mb-2",children:[a.jsx("span",{role:"img","aria-label":"rocket",children:"🚀"})," ","Lazy Loading"]}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Native browser lazy loading for better performance and faster page loads."})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsxs(e.Typography,{tag:"h5",className:"mb-2",children:[a.jsx("span",{role:"img","aria-label":"sparkles",children:"✨"})," ","Smooth Transitions"]}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Beautiful fade-in animations and blur effects for a polished loading experience."})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsxs(e.Typography,{tag:"h5",className:"mb-2",children:[a.jsx("span",{role:"img","aria-label":"shield",children:"🛡️"})," ","Error Handling"]}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Automatic fallback images and error states with user-friendly messaging."})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsxs(e.Typography,{tag:"h5",className:"mb-2",children:[a.jsx("span",{role:"img","aria-label":"art",children:"🎨"})," ","Aspect Ratios"]}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"CSS aspect-ratio support for consistent layouts without layout shift."})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsxs(e.Typography,{tag:"h5",className:"mb-2",children:[a.jsx("span",{role:"img","aria-label":"mobile",children:"📱"})," ","Responsive"]}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Fully responsive with flexible sizing options and fill mode support."})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsxs(e.Typography,{tag:"h5",className:"mb-2",children:[a.jsx("span",{role:"img","aria-label":"accessibility",children:"♿"})," ","Accessible"]}),a.jsx(e.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Required alt text and proper ARIA labels for screen readers."})]})]})})})}),a.jsx(e.PropPlayground,{componentName:"Image",defaultValues:{src:"https://picsum.photos/400/300",alt:"Sample image",objectFit:"cover",loading:"lazy",placeholder:"empty",fill:!1,priority:"auto",width:"400",height:"300",aspectRatio:"16/9"},excludeProps:[],children:s=>a.jsx(e.Image,{...s})}),a.jsx(e.AutoPropsTable,{componentName:"Image"}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Code Examples",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsx(e.CodeBlock,{language:"tsx",code:`import { Image } from '@e-burgos/tucu-ui';
-
-// Basic usage
-<Image
-  src="/path/to/image.jpg"
-  alt="Description"
-  width={400}
-  height={300}
-/>
-
-// With lazy loading and blur placeholder
-<Image
-  src="/landscape.jpg"
-  alt="Mountain landscape"
-  width={800}
-  height={600}
-  loading="lazy"
-  placeholder="blur"
-  className="rounded-lg"
-/>
-
-// Responsive with aspect ratio
-<Image
-  src="/hero.jpg"
-  alt="Hero image"
-  aspectRatio="16/9"
-  fill
-  containerClassName="w-full rounded-xl"
-/>
-
-// Different object-fit modes
-<Image src={src} alt="Cover" objectFit="cover" />
-<Image src={src} alt="Contain" objectFit="contain" />
-<Image src={src} alt="Fill" objectFit="fill" />
-
-// With error handling
-<Image
-  src="/image.jpg"
-  alt="Image with fallback"
-  width={400}
-  height={300}
-  fallbackSrc="/fallback.jpg"
-  onError={() => console.log('Failed to load')}
-  onLoad={() => console.log('Loaded successfully')}
-/>
-
-// Fill parent container (like Next.js)
-<div className="relative w-full h-64">
-  <Image
-    src="/banner.jpg"
-    alt="Banner"
-    fill
-    objectFit="cover"
-  />
-</div>
-
-// With priority loading (above the fold)
-<Image
-  src="/hero.jpg"
-  alt="Hero"
-  width={1200}
-  height={600}
-  loading="eager"
-  priority="high"
-  placeholder="blur"
-/>
-
-// Grid of images
-<div className="grid grid-cols-3 gap-4">
-  {images.map((img) => (
-    <Image
-      key={img.id}
-      src={img.url}
-      alt={img.alt}
-      aspectRatio="1/1"
-      fill
-      containerClassName="w-full rounded-lg"
-    />
-  ))}
-</div>`})})})})]});exports.default=t;

package/documentation/ImplementationExamplesSection-Cxl08TTf.js

@@ -1,305 +0,0 @@
-import { jsxs as t, Fragment as r, jsx as e } from "react/jsx-runtime";
-import { H as s, T as o, C as i, a as m, c as a } from "../index-lfg6LZ1p.js";
-import { Code as n } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const g = () => /* @__PURE__ */ t(r, { children: [
-  /* @__PURE__ */ e(
-    s,
-    {
-      title: "Implementation Examples",
-      description: "Practical code examples for common layout system configurations and patterns.",
-      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", children: /* @__PURE__ */ e(n, { 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("div", { className: "text-center", children: [
-    /* @__PURE__ */ e(o, { tag: "h2", className: "mb-2", children: "Implementation Examples" }),
-    /* @__PURE__ */ e(
-      o,
-      {
-        tag: "p",
-        className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-        children: "Practical code examples for common layout system configurations and patterns"
-      }
-    )
-  ] }),
-  /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(m, { title: "Implementation Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full space-y-8 p-4 sm:p-6", children: [
-    /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-indigo-500 via-purple-500 to-violet-500 shadow-md", children: /* @__PURE__ */ e(n, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
-      /* @__PURE__ */ e(o, { tag: "h3", className: "text-base font-semibold", children: "Basic Usage" })
-    ] }),
-    /* @__PURE__ */ t("div", { className: "space-y-6", children: [
-      /* @__PURE__ */ t("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ e(o, { tag: "h4", className: "font-semibold", children: "1. Automatic Routing with menuItems" }),
-        /* @__PURE__ */ t(
-          o,
-          {
-            tag: "p",
-            className: "text-sm text-gray-600 dark:text-gray-400",
-            children: [
-              "ThemeProvider automatically generates routes from menuItems. Each menu item with a ",
-              /* @__PURE__ */ e("code", { children: "component" }),
-              " prop becomes a route."
-            ]
-          }
-        ),
-        /* @__PURE__ */ e(
-          a,
-          {
-            language: "tsx",
-            code: `import { ThemeProvider, LAYOUT_OPTIONS, LucideIcons } from '@ui/tucu-ui';
-import { Dashboard } from './pages/Dashboard';
-import { Settings } from './pages/Settings';
-import { Profile } from './pages/Profile';
-
-// Menu items with components - routes are generated automatically
-// Note: Use 'path' for internal routing, 'href' for external links
-const menuItems = [
-  {
-    name: 'Dashboard',
-    path: '/', // Internal route path
-    icon: <LucideIcons.Home />,
-    component: <Dashboard />, // This becomes a route
-  },
-  {
-    name: 'Settings',
-    path: '/settings', // Internal route path
-    icon: <LucideIcons.Settings />,
-    component: <Settings />, // This becomes a route
-  },
-  {
-    name: 'Profile',
-    path: '/profile', // Internal route path
-    icon: <LucideIcons.User />,
-    component: <Profile />, // This becomes a route
-  },
-];
-
-function App() {
-  return (
-    <ThemeProvider
-      menuItems={menuItems}
-      layout={LAYOUT_OPTIONS.ADMIN}
-      logo={{ path: '/', name: 'My App' }}
-    />
-    {/* No children needed - routing is handled automatically */}
-  );
-}
-
-// Routes are automatically created:
-// / -> Dashboard component
-// /settings -> Settings component
-// /profile -> Profile component`
-          }
-        )
-      ] }),
-      /* @__PURE__ */ t("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ e(o, { tag: "h4", className: "font-semibold", children: "2. Landing Page (No Routing)" }),
-        /* @__PURE__ */ t(
-          o,
-          {
-            tag: "p",
-            className: "text-sm text-gray-600 dark:text-gray-400",
-            children: [
-              "For landing pages or single-page applications without routing, use ",
-              /* @__PURE__ */ e("code", { children: "customRoutes" }),
-              " with a single route."
-            ]
-          }
-        ),
-        /* @__PURE__ */ e(
-          a,
-          {
-            language: "tsx",
-            code: `import { ThemeProvider, LAYOUT_OPTIONS, Routes, Route } from '@ui/tucu-ui';
-import { LandingPage } from './pages/LandingPage';
-
-function App() {
-  return (
-    <ThemeProvider
-      menuItems={[]} // Empty - no navigation needed for landing page
-      layout={LAYOUT_OPTIONS.CLEAN} // Clean layout for landing pages
-      logo={{ path: '/', name: 'My Brand' }}
-      customRoutes={
-        <Routes>
-          <Route path="*" element={<LandingPage />} />
-        </Routes>
-      }
-    />
-  );
-}
-
-// The customRoutes prop overrides automatic routing
-// BrowserRouter is already included in ThemeProvider
-// No need to import or wrap with BrowserRouter`
-          }
-        )
-      ] }),
-      /* @__PURE__ */ t("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ e(o, { tag: "h4", className: "font-semibold", children: "3. Custom Routing with customRoutes" }),
-        /* @__PURE__ */ t(
-          o,
-          {
-            tag: "p",
-            className: "text-sm text-gray-600 dark:text-gray-400",
-            children: [
-              "For complex routing scenarios, provide your own",
-              " ",
-              /* @__PURE__ */ e("code", { children: "<Routes>" }),
-              " component via",
-              " ",
-              /* @__PURE__ */ e("code", { children: "customRoutes" }),
-              " prop."
-            ]
-          }
-        ),
-        /* @__PURE__ */ e(
-          a,
-          {
-            language: "tsx",
-            code: `import { ThemeProvider, LAYOUT_OPTIONS, Routes, Route } from '@ui/tucu-ui';
-import { BrowserRouter } from 'react-router-dom'; // Already included in ThemeProvider
-import { Home } from './pages/Home';
-import { About } from './pages/About';
-import { Contact } from './pages/Contact';
-import { NotFound } from './pages/NotFound';
-
-function App() {
-  // Menu items for navigation (optional - can be empty if using customRoutes)
-  // Note: 'path' is used for internal routing, 'href' would be for external links
-  const menuItems = [
-    {
-      name: 'Home',
-      path: '/', // Internal route path
-      icon: <LucideIcons.Home />,
-    },
-    {
-      name: 'About',
-      path: '/about', // Internal route path
-      icon: <LucideIcons.Info />,
-    },
-    {
-      name: 'Contact',
-      path: '/contact', // Internal route path
-      icon: <LucideIcons.Mail />,
-    },
-  ];
-
-  return (
-    <ThemeProvider
-      menuItems={menuItems} // For navigation menu
-      layout={LAYOUT_OPTIONS.HORIZONTAL}
-      logo={{ path: '/', name: 'My App' }}
-      customRoutes={
-        <Routes>
-          <Route path="/" element={<Home />} />
-          <Route path="/about" element={<About />} />
-          <Route path="/contact" element={<Contact />} />
-          <Route path="*" element={<NotFound />} />
-        </Routes>
-      }
-    />
-  );
-}
-
-// Note: BrowserRouter is already included in ThemeProvider,
-// so you don't need to wrap it again`
-          }
-        )
-      ] }),
-      /* @__PURE__ */ t("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ e(o, { tag: "h4", className: "font-semibold", children: "4. Using Theme Hooks" }),
-        /* @__PURE__ */ e(
-          a,
-          {
-            language: "tsx",
-            code: `import { useTheme, LAYOUT_OPTIONS } from '@ui/tucu-ui';
-
-function ThemeControls() {
-  const { 
-    mode, 
-    setMode, 
-    layout, 
-    setLayout,
-    primaryPreset,
-    setPrimaryPreset 
-  } = useTheme();
-  
-  return (
-    <div className="space-y-4">
-      <button 
-        onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}
-      >
-        Toggle Theme: {mode}
-      </button>
-      
-      <select 
-        value={layout} 
-        onChange={(e) => setLayout(e.target.value as any)}
-      >
-        <option value={LAYOUT_OPTIONS.CLEAN}>Clean</option>
-        <option value={LAYOUT_OPTIONS.ADMIN}>Admin</option>
-        <option value={LAYOUT_OPTIONS.HORIZONTAL}>Horizontal</option>
-      </select>
-      
-      <div>
-        Current Primary Color: {primaryPreset?.label}
-      </div>
-    </div>
-  );
-}
-
-// Usage with ThemeProvider
-function App() {
-  const menuItems = [
-    { 
-      name: 'Theme Controls', 
-      path: '/theme-controls',
-      component: <ThemeControls />
-    }
-  ];
-
-  return <ThemeProvider menuItems={menuItems} />;
-}`
-          }
-        )
-      ] }),
-      /* @__PURE__ */ t("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ e(o, { tag: "h4", className: "font-semibold", children: "5. Layout-Specific Configuration" }),
-        /* @__PURE__ */ e(
-          a,
-          {
-            language: "tsx",
-            code: `import { ThemeProvider, LAYOUT_OPTIONS } from '@ui/tucu-ui';
-
-function App() {
-  const menuItems = [
-    { name: 'Home', path: '/', icon: <LucideIcons.Home />, component: <Home /> },
-    { name: 'About', path: '/about', icon: <LucideIcons.Info />, component: <About /> },
-  ];
-
-  return (
-    <ThemeProvider
-      menuItems={menuItems}
-      layout={LAYOUT_OPTIONS.ADMIN}
-      logo={{ path: '/', name: 'My App' }}
-      rightButton={<SettingsButton />}
-      fullWidth={false} // Set to true for full-width content
-      className="custom-layout-class"
-      headerClassName="custom-header-class"
-      contentClassName="custom-content-class"
-    >
-      <YourAppContent />
-    </ThemeProvider>
-  );
-}`
-          }
-        )
-      ] })
-    ] })
-  ] }) }) })
-] });
-export {
-  g as default
-};

package/documentation/ImplementationExamplesSection-mHJwxbf_.js

@@ -1,178 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-BaGqriuz.js"),o=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const a=()=>e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"Implementation Examples",description:"Practical code examples for common layout system configurations and patterns.",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",children:e.jsx(o.Code,{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("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Implementation Examples"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Practical code examples for common layout system configurations and patterns"})]}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Implementation Examples",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-8 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-indigo-500 via-purple-500 to-violet-500 shadow-md",children:e.jsx(o.Code,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(t.Typography,{tag:"h3",className:"text-base font-semibold",children:"Basic Usage"})]}),e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"space-y-3",children:[e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"1. Automatic Routing with menuItems"}),e.jsxs(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["ThemeProvider automatically generates routes from menuItems. Each menu item with a ",e.jsx("code",{children:"component"})," prop becomes a route."]}),e.jsx(t.CodeBlock,{language:"tsx",code:`import { ThemeProvider, LAYOUT_OPTIONS, LucideIcons } from '@ui/tucu-ui';
-import { Dashboard } from './pages/Dashboard';
-import { Settings } from './pages/Settings';
-import { Profile } from './pages/Profile';
-
-// Menu items with components - routes are generated automatically
-// Note: Use 'path' for internal routing, 'href' for external links
-const menuItems = [
-  {
-    name: 'Dashboard',
-    path: '/', // Internal route path
-    icon: <LucideIcons.Home />,
-    component: <Dashboard />, // This becomes a route
-  },
-  {
-    name: 'Settings',
-    path: '/settings', // Internal route path
-    icon: <LucideIcons.Settings />,
-    component: <Settings />, // This becomes a route
-  },
-  {
-    name: 'Profile',
-    path: '/profile', // Internal route path
-    icon: <LucideIcons.User />,
-    component: <Profile />, // This becomes a route
-  },
-];
-
-function App() {
-  return (
-    <ThemeProvider
-      menuItems={menuItems}
-      layout={LAYOUT_OPTIONS.ADMIN}
-      logo={{ path: '/', name: 'My App' }}
-    />
-    {/* No children needed - routing is handled automatically */}
-  );
-}
-
-// Routes are automatically created:
-// / -> Dashboard component
-// /settings -> Settings component
-// /profile -> Profile component`})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"2. Landing Page (No Routing)"}),e.jsxs(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["For landing pages or single-page applications without routing, use ",e.jsx("code",{children:"customRoutes"})," with a single route."]}),e.jsx(t.CodeBlock,{language:"tsx",code:`import { ThemeProvider, LAYOUT_OPTIONS, Routes, Route } from '@ui/tucu-ui';
-import { LandingPage } from './pages/LandingPage';
-
-function App() {
-  return (
-    <ThemeProvider
-      menuItems={[]} // Empty - no navigation needed for landing page
-      layout={LAYOUT_OPTIONS.CLEAN} // Clean layout for landing pages
-      logo={{ path: '/', name: 'My Brand' }}
-      customRoutes={
-        <Routes>
-          <Route path="*" element={<LandingPage />} />
-        </Routes>
-      }
-    />
-  );
-}
-
-// The customRoutes prop overrides automatic routing
-// BrowserRouter is already included in ThemeProvider
-// No need to import or wrap with BrowserRouter`})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"3. Custom Routing with customRoutes"}),e.jsxs(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["For complex routing scenarios, provide your own"," ",e.jsx("code",{children:"<Routes>"})," component via"," ",e.jsx("code",{children:"customRoutes"})," prop."]}),e.jsx(t.CodeBlock,{language:"tsx",code:`import { ThemeProvider, LAYOUT_OPTIONS, Routes, Route } from '@ui/tucu-ui';
-import { BrowserRouter } from 'react-router-dom'; // Already included in ThemeProvider
-import { Home } from './pages/Home';
-import { About } from './pages/About';
-import { Contact } from './pages/Contact';
-import { NotFound } from './pages/NotFound';
-
-function App() {
-  // Menu items for navigation (optional - can be empty if using customRoutes)
-  // Note: 'path' is used for internal routing, 'href' would be for external links
-  const menuItems = [
-    {
-      name: 'Home',
-      path: '/', // Internal route path
-      icon: <LucideIcons.Home />,
-    },
-    {
-      name: 'About',
-      path: '/about', // Internal route path
-      icon: <LucideIcons.Info />,
-    },
-    {
-      name: 'Contact',
-      path: '/contact', // Internal route path
-      icon: <LucideIcons.Mail />,
-    },
-  ];
-
-  return (
-    <ThemeProvider
-      menuItems={menuItems} // For navigation menu
-      layout={LAYOUT_OPTIONS.HORIZONTAL}
-      logo={{ path: '/', name: 'My App' }}
-      customRoutes={
-        <Routes>
-          <Route path="/" element={<Home />} />
-          <Route path="/about" element={<About />} />
-          <Route path="/contact" element={<Contact />} />
-          <Route path="*" element={<NotFound />} />
-        </Routes>
-      }
-    />
-  );
-}
-
-// Note: BrowserRouter is already included in ThemeProvider,
-// so you don't need to wrap it again`})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"4. Using Theme Hooks"}),e.jsx(t.CodeBlock,{language:"tsx",code:`import { useTheme, LAYOUT_OPTIONS } from '@ui/tucu-ui';
-
-function ThemeControls() {
-  const { 
-    mode, 
-    setMode, 
-    layout, 
-    setLayout,
-    primaryPreset,
-    setPrimaryPreset 
-  } = useTheme();
-  
-  return (
-    <div className="space-y-4">
-      <button 
-        onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}
-      >
-        Toggle Theme: {mode}
-      </button>
-      
-      <select 
-        value={layout} 
-        onChange={(e) => setLayout(e.target.value as any)}
-      >
-        <option value={LAYOUT_OPTIONS.CLEAN}>Clean</option>
-        <option value={LAYOUT_OPTIONS.ADMIN}>Admin</option>
-        <option value={LAYOUT_OPTIONS.HORIZONTAL}>Horizontal</option>
-      </select>
-      
-      <div>
-        Current Primary Color: {primaryPreset?.label}
-      </div>
-    </div>
-  );
-}
-
-// Usage with ThemeProvider
-function App() {
-  const menuItems = [
-    { 
-      name: 'Theme Controls', 
-      path: '/theme-controls',
-      component: <ThemeControls />
-    }
-  ];
-
-  return <ThemeProvider menuItems={menuItems} />;
-}`})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"5. Layout-Specific Configuration"}),e.jsx(t.CodeBlock,{language:"tsx",code:`import { ThemeProvider, LAYOUT_OPTIONS } from '@ui/tucu-ui';
-
-function App() {
-  const menuItems = [
-    { name: 'Home', path: '/', icon: <LucideIcons.Home />, component: <Home /> },
-    { name: 'About', path: '/about', icon: <LucideIcons.Info />, component: <About /> },
-  ];
-
-  return (
-    <ThemeProvider
-      menuItems={menuItems}
-      layout={LAYOUT_OPTIONS.ADMIN}
-      logo={{ path: '/', name: 'My App' }}
-      rightButton={<SettingsButton />}
-      fullWidth={false} // Set to true for full-width content
-      className="custom-layout-class"
-      headerClassName="custom-header-class"
-      contentClassName="custom-content-class"
-    >
-      <YourAppContent />
-    </ThemeProvider>
-  );
-}`})]})]})]})})})]});exports.default=a;

package/documentation/LayoutTypesSection-hnxHeuA2.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-BaGqriuz.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const d=()=>{const r=[{name:"Admin Layout",description:"Traditional admin layout with expandable sidebar and fixed header. Designed for complex applications with hierarchical navigation and multiple sections.",icon:e.jsx(s.Layout,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),color:"from-blue-500 via-cyan-500 to-teal-500",value:a.LAYOUT_OPTIONS.ADMIN,useCases:["Dashboard applications","Admin panels and management systems","Complex applications with many navigation items","Applications requiring hierarchical menu structure","Enterprise software and internal tools","Applications with multiple sections and subsections"],features:["Expandable sidebar navigation (visible on xl screens)","Fixed header with logo and action buttons","Responsive drawer menu for mobile devices","RTL/LTR direction support","Full-width content option available","Sidebar padding: 96px (xl) / 112px (2xl)","Content padding: 16px (mobile) / 24px (sm) / 32px (lg) / 40px (min-[1780px])"],technical:{sidebar:"ExpandableSidebar component (hidden on mobile, visible xl+)",header:"AdminHeader component with menu toggle",drawer:"Drawer component for mobile navigation",breakpoint:"Sidebar visible from xl breakpoint (1280px)"}},{name:"Horizontal Layout",description:"Modern horizontal navigation layout with top menu bar. Ideal for content-focused sites, marketing pages, and applications with simple navigation.",icon:e.jsx(s.Menu,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),color:"from-purple-500 via-violet-500 to-indigo-500",value:a.LAYOUT_OPTIONS.HORIZONTAL,useCases:["Content-focused websites","Marketing and landing pages","Simple applications with few navigation items","Portfolio and showcase sites","Blog and content management systems","Public-facing applications"],features:["Horizontal top navigation menu","Sticky header with logo and action buttons","Mobile hamburger menu with drawer","Backdrop blur effects on header","Full-width content option available","Content padding: 8px (mobile) / 24px (sm) / 32px (lg) / 40px (min-[1780px])","Minimal vertical space usage"],technical:{header:"HorizontalHeader component with horizontal menu",menu:"HorizontalNavMenu component",drawer:"Drawer component for mobile navigation",breakpoint:"Horizontal menu visible on all screen sizes"}},{name:"Clean Layout",description:"Minimal layout without navigation elements. Perfect for authentication pages, standalone content, and full-screen experiences.",icon:e.jsx(s.Minimize2,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),color:"from-emerald-500 via-green-500 to-teal-500",value:a.LAYOUT_OPTIONS.CLEAN,useCases:["Authentication pages (login, signup, password reset)","Landing pages and marketing sites","Standalone content pages","Full-screen applications","Modal and overlay content","Embedded widgets and components"],features:["No navigation elements or headers","Full viewport height (100vh)","Flex column layout","Perfect for centered content","Minimal overhead and dependencies","No menu items required","Customizable via className prop"],technical:{structure:"Simple flex container with full height",dependencies:"No header, sidebar, or menu components",customization:"Full control via className prop",useWhen:"No navigation needed, standalone content"}}];return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Layout Types",description:"Three distinct layout patterns for various application types and navigation needs.",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-500 via-teal-500 to-emerald-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(s.LayoutGrid,{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("div",{className:"text-center",children:[e.jsx(a.Typography,{tag:"h2",className:"mb-2",children:"Layout Types"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Three distinct layout patterns for various application types. Choose the right layout based on your application's navigation needs and structure."})]}),e.jsx("div",{className:"space-y-8",children:r.map((t,o)=>e.jsx(a.CardContainer,{className:"group hover:shadow-large transition-all duration-300 overflow-hidden",children:e.jsxs("div",{className:"w-full space-y-6 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-start gap-4",children:[e.jsx("div",{className:`p-3 rounded-xl bg-linear-to-br ${t.color} group-hover:scale-110 transition-all duration-300 shadow-lg shrink-0`,children:t.icon}),e.jsxs("div",{className:"flex-1",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-2",children:[e.jsx(a.Typography,{tag:"h3",className:"font-semibold text-lg group-hover:text-primary transition-colors duration-300",children:t.name}),e.jsx(a.Badge,{variant:"outline",className:"text-xs",children:t.value})]}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 leading-relaxed",children:t.description})]})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.Zap,{className:"w-5 h-5 text-primary"}),e.jsx(a.Typography,{tag:"h4",className:"font-semibold text-base",children:"When to Use"})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-2",children:t.useCases.map((i,n)=>e.jsxs("div",{className:"flex items-start gap-2 p-2 bg-gray-100 dark:bg-gray-800 rounded-lg",children:[e.jsx(s.CheckCircle,{className:"w-3 h-3 text-primary mt-1 shrink-0"}),e.jsx(a.Typography,{tag:"span",className:"text-sm text-gray-700 dark:text-gray-300",children:i})]},n))})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.Star,{className:"w-5 h-5 text-primary"}),e.jsx(a.Typography,{tag:"h4",className:"font-semibold text-base",children:"Features"})]}),e.jsx("div",{className:"space-y-2",children:t.features.map((i,n)=>e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx(a.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:i})]},n))})]}),e.jsxs("div",{className:"space-y-3 pt-3 border-t border-gray-200 dark:border-gray-700",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.Code,{className:"w-5 h-5 text-primary"}),e.jsx(a.Typography,{tag:"h4",className:"font-semibold text-base",children:"Technical Details"})]}),e.jsx("div",{className:"space-y-2",children:Object.entries(t.technical).map(([i,n],l)=>e.jsxs("div",{className:"flex items-start gap-2 text-sm",children:[e.jsxs(a.Typography,{tag:"span",className:"font-medium text-gray-700 dark:text-gray-300 capitalize min-w-25",children:[i.replace(/([A-Z])/g," $1").trim(),":"]}),e.jsx(a.Typography,{tag:"span",className:"text-gray-600 dark:text-gray-400",children:n})]},l))})]})]})},o))})]})};exports.default=d;

package/documentation/MacOSBackgroundsSection-c6o8Zwj8.js

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