"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-DEZRGktf.js"),o=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=[{title:"Admin Layout",description:"Traditional sidebar + header layout for dashboards and management apps.",icon:e.jsx(o.Layout,{className:"w-5 h-5 text-white"}),color:"from-blue-500 to-cyan-500",badge:"admin",code:`import { ThemeProvider, LAYOUT_OPTIONS, LucideIcons } from '@e-burgos/tucu-ui';
import { Dashboard } from './pages/Dashboard';
import { Users } from './pages/Users';
import { Settings } from './pages/Settings';

const menuItems = [
  {
    name: 'Dashboard',
    path: '/',
    icon: <LucideIcons.Home />,
    component: <Dashboard />,
  },
  {
    name: 'Users',
    path: '/users',
    icon: <LucideIcons.Users />,
    component: <Users />,
  },
  {
    name: 'Settings',
    path: '/settings',
    icon: <LucideIcons.Settings />,
    component: <Settings />,
  },
];

function App() {
  return (
    <ThemeProvider
      menuItems={menuItems}
      layout={LAYOUT_OPTIONS.ADMIN}
      logo={{ path: '/', name: 'Admin Panel' }}
      rightButton={<SettingsButton />}
      fullWidth={false}
      headerClassName="border-b border-border"
      contentClassName="p-6"
    />
  );
}`},{title:"Horizontal Layout",description:"Top navigation bar ideal for content-focused sites and marketing pages.",icon:e.jsx(o.Menu,{className:"w-5 h-5 text-white"}),color:"from-purple-500 to-indigo-500",badge:"horizontal",code:`import { ThemeProvider, LAYOUT_OPTIONS, LucideIcons } from '@e-burgos/tucu-ui';
import { Home } from './pages/Home';
import { Blog } from './pages/Blog';
import { About } from './pages/About';

const menuItems = [
  {
    name: 'Home',
    path: '/',
    icon: <LucideIcons.Home />,
    component: <Home />,
  },
  {
    name: 'Blog',
    path: '/blog',
    icon: <LucideIcons.BookOpen />,
    component: <Blog />,
  },
  {
    name: 'About',
    path: '/about',
    icon: <LucideIcons.Info />,
    component: <About />,
  },
];

function App() {
  return (
    <ThemeProvider
      menuItems={menuItems}
      layout={LAYOUT_OPTIONS.HORIZONTAL}
      logo={{ path: '/', name: 'My Site' }}
      rightButton={<ThemeToggle />}
      fullWidth={true}
    />
  );
}`},{title:"Clean Layout",description:"Minimal layout without navigation. Perfect for auth pages and landing pages.",icon:e.jsx(o.Minimize2,{className:"w-5 h-5 text-white"}),color:"from-emerald-500 to-teal-500",badge:"clean",code:`import { ThemeProvider, LAYOUT_OPTIONS, Routes, Route } from '@e-burgos/tucu-ui';
import { LoginPage } from './pages/LoginPage';
import { SignUpPage } from './pages/SignUpPage';

function App() {
  return (
    <ThemeProvider
      menuItems={[]} // No menu needed
      layout={LAYOUT_OPTIONS.CLEAN}
      logo={{ path: '/', name: 'My App' }}
      customRoutes={
        <Routes>
          <Route path="/login" element={<LoginPage />} />
          <Route path="/signup" element={<SignUpPage />} />
          <Route path="*" element={<LoginPage />} />
        </Routes>
      }
    />
  );
}

// Clean layout renders children without any chrome:
// - No header, no sidebar, no navigation
// - Full viewport height (100vh)
// - Flex column layout for centering content`},{title:"macOS Sonoma Layout",description:"Desktop-style layout with frosted glass sidebar, toolbar, and window chrome.",icon:e.jsx(o.Monitor,{className:"w-5 h-5 text-white"}),color:"from-gray-500 to-slate-600",badge:"macos",code:`import { ThemeProvider, LAYOUT_OPTIONS, LucideIcons } from '@e-burgos/tucu-ui';
import { Overview } from './pages/Overview';
import { Library } from './pages/Library';
import { Preferences } from './pages/Preferences';

const menuItems = [
  {
    name: 'Overview',
    path: '/',
    icon: <LucideIcons.LayoutDashboard />,
    component: <Overview />,
  },
  {
    name: 'Library',
    path: '/library',
    icon: <LucideIcons.Library />,
    component: <Library />,
  },
  {
    name: 'Preferences',
    path: '/preferences',
    icon: <LucideIcons.Settings />,
    component: <Preferences />,
  },
];

function App() {
  return (
    <ThemeProvider
      menuItems={menuItems}
      layout={LAYOUT_OPTIONS.MACOS}
      themeStyle="macos" // Activates Sonoma theme + accent bundles
      logo={{ path: '/', name: 'Finder' }}
      rightButton={<SearchButton />}
    />
  );
}

// Features:
// - Frosted glass sidebar with translucent background
// - Native-style toolbar with centered page title
// - Responsive: drawer on mobile, sidebar on desktop
// - 9 Sonoma Accent Bundles (Blue, Purple, Pink, etc.)
// - Automatic ThemeBackground with 'sonoma' variant`},{title:"macOS Tahoe Layout",description:"macOS 26 Liquid Glass layout with translucent sidebar and refined toolbar.",icon:e.jsx(o.Sparkles,{className:"w-5 h-5 text-white"}),color:"from-indigo-500 to-purple-500",badge:"macos-tahoe",code:`import { ThemeProvider, LAYOUT_OPTIONS, LucideIcons } from '@e-burgos/tucu-ui';
import { Dashboard } from './pages/Dashboard';
import { Projects } from './pages/Projects';
import { Analytics } from './pages/Analytics';

const menuItems = [
  {
    name: 'Dashboard',
    path: '/',
    icon: <LucideIcons.LayoutDashboard />,
    component: <Dashboard />,
  },
  {
    name: 'Projects',
    path: '/projects',
    icon: <LucideIcons.FolderKanban />,
    component: <Projects />,
  },
  {
    name: 'Analytics',
    path: '/analytics',
    icon: <LucideIcons.BarChart3 />,
    component: <Analytics />,
  },
];

function App() {
  return (
    <ThemeProvider
      menuItems={menuItems}
      layout={LAYOUT_OPTIONS.MACOS_TAHOE}
      themeStyle="macos-tahoe" // Activates Tahoe theme + Liquid Glass
      logo={{ path: '/', name: 'Studio' }}
      rightButton={<NotificationBell />}
    />
  );
}

// Features:
// - Liquid Glass sidebar with backdrop-blur and vibrancy
// - Refined toolbar with centered page title
// - Dynamic mesh background (radial variant by default)
// - 9 Tahoe Accent Bundles (Glass, Blue, Purple, Pink, etc.)
// - Content area with rounded corners and glass surface
// - Toast notifications with Tahoe styling`},{title:"macOS Tahoe Dock Layout",description:"Dock-based navigation with floating app dock and maximized content area.",icon:e.jsx(o.AppWindow,{className:"w-5 h-5 text-white"}),color:"from-violet-500 to-fuchsia-500",badge:"macos-tahoe-dock",code:`import { ThemeProvider, LAYOUT_OPTIONS, LucideIcons } from '@e-burgos/tucu-ui';
import { Player } from './pages/Player';
import { Browse } from './pages/Browse';
import { Playlists } from './pages/Playlists';

const menuItems = [
  {
    name: 'Player',
    path: '/',
    icon: <LucideIcons.Play />,
    component: <Player />,
  },
  {
    name: 'Browse',
    path: '/browse',
    icon: <LucideIcons.Compass />,
    component: <Browse />,
  },
  {
    name: 'Playlists',
    path: '/playlists',
    icon: <LucideIcons.ListMusic />,
    component: <Playlists />,
  },
];

function App() {
  return (
    <ThemeProvider
      menuItems={menuItems}
      layout={LAYOUT_OPTIONS.MACOS_TAHOE_DOCK}
      themeStyle="macos-tahoe"
      logo={{ path: '/', name: 'Music' }}
    />
  );
}

// Features:
// - Floating dock at the bottom with glass effect
// - Full-width content area (no sidebar)
// - Toolbar with centered title and optional leading/trailing actions
// - Dynamic background fills the viewport
// - Ideal for media apps, full-screen experiences, and immersive UIs
// - Content area has margin-bottom to accommodate dock height (56px)`},{title:"macOS Sonoma Clean Layout",description:"Minimal Sonoma layout with only background and content — no sidebar or toolbar.",icon:e.jsx(o.Layers,{className:"w-5 h-5 text-white"}),color:"from-slate-400 to-zinc-500",badge:"macos-clean",code:`import { ThemeProvider, LAYOUT_OPTIONS, Routes, Route } from '@e-burgos/tucu-ui';
import { LoginPage } from './pages/LoginPage';
import { WelcomePage } from './pages/WelcomePage';

function App() {
  return (
    <ThemeProvider
      menuItems={[]} // No navigation needed
      layout={LAYOUT_OPTIONS.MACOS_CLEAN}
      themeStyle="macos" // Inherits Sonoma theme styling
      logo={{ path: '/', name: 'My App' }}
      customRoutes={
        <Routes>
          <Route path="/login" element={<LoginPage />} />
          <Route path="*" element={<WelcomePage />} />
        </Routes>
      }
    />
  );
}

// Features:
// - Background only (ThemeBackground with 'sonoma' variant) + content slot
// - No sidebar, toolbar, or navigation chrome
// - Full viewport (100vh × 100vw) with overflow-auto
// - Inherits Sonoma accent colors and dark/light mode
// - Toast notifications still available (MacOSSonomaToast)
// - Use cases: auth pages, standalone content, onboarding flows`},{title:"macOS Tahoe Clean Layout",description:"Minimal Tahoe layout with Liquid Glass background and content area only.",icon:e.jsx(o.Gem,{className:"w-5 h-5 text-white"}),color:"from-purple-400 to-indigo-500",badge:"macos-tahoe-clean",code:`import { ThemeProvider, LAYOUT_OPTIONS, Routes, Route } from '@e-burgos/tucu-ui';
import { AuthPage } from './pages/AuthPage';
import { FullScreenView } from './pages/FullScreenView';

function App() {
  return (
    <ThemeProvider
      menuItems={[]} // No navigation needed
      layout={LAYOUT_OPTIONS.MACOS_TAHOE_CLEAN}
      themeStyle="macos-tahoe" // Inherits Tahoe Liquid Glass styling
      logo={{ path: '/', name: 'My App' }}
      customRoutes={
        <Routes>
          <Route path="/auth" element={<AuthPage />} />
          <Route path="*" element={<FullScreenView />} />
        </Routes>
      }
    />
  );
}

// Features:
// - Dynamic background (ThemeBackground with 'radial' variant) + content slot
// - No sidebar, dock, toolbar, or navigation chrome
// - Full viewport (100vh × 100vw) with overflow-auto
// - Inherits Tahoe accent colors, Liquid Glass CSS vars, dark/light mode
// - Toast notifications still available (MacOSTahoeToast)
// - Use cases: auth within Tahoe theme, immersive views, splash screens`}],r=()=>e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"Implementation Examples",description:"Practical code examples for all 8 layout types, routing patterns, and theme configuration.",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:"Complete code examples for all 8 layout types and common integration patterns"})]}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Layout Examples (All 8 Types)",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-8 p-4 sm:p-6",children:[e.jsxs(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["Each layout type has specific props and behavior. The"," ",e.jsx("code",{className:"text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono",children:"ThemeProvider"})," ","component handles routing, theming, and layout rendering. Use"," ",e.jsx("code",{className:"text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono",children:"LAYOUT_OPTIONS"})," ","enum for type-safe layout selection."]}),e.jsx("div",{className:"space-y-6",children:n.map((a,s)=>e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:`p-2 rounded-lg bg-linear-to-br ${a.color} shadow-md`,children:a.icon}),e.jsxs(t.Typography,{tag:"h4",className:"font-semibold",children:[s+1,". ",a.title]}),e.jsx(t.Badge,{variant:"outline",className:"text-xs",children:a.badge})]}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 ml-11",children:a.description}),e.jsx(t.CodeBlock,{language:"tsx",code:a.code})]},s))})]})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Common Patterns",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full space-y-8 p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-amber-500 to-orange-500 shadow-md",children:e.jsx(o.Route,{className:"w-5 h-5 text-white"})}),e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"Custom Routing with customRoutes"})]}),e.jsxs(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 ml-11",children:["Override automatic routing with your own"," ",e.jsx("code",{children:"<Routes>"})," for complex scenarios (nested routes, guards, lazy loading)."]}),e.jsx(t.CodeBlock,{language:"tsx",code:`import { ThemeProvider, LAYOUT_OPTIONS, Routes, Route } from '@e-burgos/tucu-ui';
import { lazy, Suspense } from 'react';

const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const NotFound = lazy(() => import('./pages/NotFound'));

const menuItems = [
  { name: 'Home', path: '/', icon: <LucideIcons.Home /> },
  { name: 'About', path: '/about', icon: <LucideIcons.Info /> },
];

function App() {
  return (
    <ThemeProvider
      menuItems={menuItems}
      layout={LAYOUT_OPTIONS.HORIZONTAL}
      logo={{ path: '/', name: 'My App' }}
      customRoutes={
        <Suspense fallback={<div>Loading...</div>}>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="*" element={<NotFound />} />
          </Routes>
        </Suspense>
      }
    />
  );
}

// Notes:
// - BrowserRouter is already included in ThemeProvider
// - customRoutes overrides automatic route generation from menuItems
// - menuItems still power the navigation menu (sidebar/topnav)`})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-pink-500 to-rose-500 shadow-md",children:e.jsx(o.Palette,{className:"w-5 h-5 text-white"})}),e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"Theme Style + Layout Constraints"})]}),e.jsxs(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 ml-11",children:["Each ",e.jsx("code",{children:"themeStyle"})," restricts which layouts are valid. Use ",e.jsx("code",{children:"THEME_STYLE_LAYOUTS"})," to check compatibility."]}),e.jsx(t.CodeBlock,{language:"tsx",code:`// Theme Style → Valid Layouts mapping:
//
// themeStyle="default"    → CLEAN, ADMIN, HORIZONTAL
// themeStyle="macos"      → MACOS, MACOS_CLEAN
// themeStyle="macos-tahoe"→ MACOS_TAHOE, MACOS_TAHOE_DOCK, MACOS_TAHOE_CLEAN

import { ThemeProvider, LAYOUT_OPTIONS } from '@e-burgos/tucu-ui';

// ✅ Correct: Tahoe layout with Tahoe theme
<ThemeProvider
  menuItems={menuItems}
  layout={LAYOUT_OPTIONS.MACOS_TAHOE}
  themeStyle="macos-tahoe"
/>

// ✅ Correct: Admin layout with default theme
<ThemeProvider
  menuItems={menuItems}
  layout={LAYOUT_OPTIONS.ADMIN}
  themeStyle="default"
/>

// ⚠️ Invalid: ADMIN layout is not valid for "macos-tahoe" theme
// The layout will fallback to the theme's defaultLayout (MACOS_TAHOE)
<ThemeProvider
  menuItems={menuItems}
  layout={LAYOUT_OPTIONS.ADMIN}
  themeStyle="macos-tahoe" // Will use MACOS_TAHOE instead
/>`})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-cyan-500 to-blue-500 shadow-md",children:e.jsx(o.SlidersHorizontal,{className:"w-5 h-5 text-white"})}),e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"Using Theme Hooks for Dynamic Layout"})]}),e.jsxs(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 ml-11",children:["Access and modify theme state from any child component using"," ",e.jsx("code",{children:"useTheme()"}),"."]}),e.jsx(t.CodeBlock,{language:"tsx",code:`import { useTheme, LAYOUT_OPTIONS } from '@e-burgos/tucu-ui';

function LayoutSwitcher() {
  const {
    mode,
    setMode,
    layout,
    setLayout,
    colorScheme,        // 'default' | 'macos' | 'macos-tahoe'
    backgroundVariant,  // 'none' | 'base' | 'sonoma' | 'radial' | 'aurora' | ...
    setBackgroundVariant,
    applyMacOSTahoeTheme,  // Switch to full Tahoe theme
    applyMacOSTheme,       // Switch to full Sonoma theme
    applyDefaultTheme,     // Switch to default theme
    restoreDefaultColors,  // Reset colors (theme-aware)
  } = useTheme();

  return (
    <div className="space-y-4">
      {/* Toggle dark/light */}
      <button onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}>
        Mode: {mode}
      </button>

      {/* Switch entire theme */}
      <button onClick={applyMacOSTahoeTheme}>
        Apply Tahoe Theme
      </button>

      {/* Change background within current theme */}
      <select
        value={backgroundVariant}
        onChange={(e) => setBackgroundVariant(e.target.value)}
      >
        <option value="none">None</option>
        <option value="radial">Radial</option>
        <option value="aurora">Aurora</option>
        <option value="sonoma">Sonoma</option>
      </select>

      {/* Layout only changes within valid options for current theme */}
      <p>Current: {colorScheme} / {layout}</p>
    </div>
  );
}`})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-green-500 to-emerald-500 shadow-md",children:e.jsx(o.Paintbrush,{className:"w-5 h-5 text-white"})}),e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"Accent Color Bundles (macOS Themes)"})]}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 ml-11",children:"macOS themes support 9 accent color bundles that match System Preferences."}),e.jsx(t.CodeBlock,{language:"tsx",code:`import {
  useTheme,
  TAHOE_ACCENT_BUNDLES,
  SONOMA_ACCENT_BUNDLES,
  buildTahoePresets,
  buildSonomaPresets,
} from '@e-burgos/tucu-ui';

function AccentPicker() {
  const { setPrimaryPreset, setAccentPreset, setDarkPrimaryPreset, setDarkAccentPreset } = useTheme();

  // Apply a Tahoe accent bundle (e.g. "Blue")
  const applyTahoeAccent = (bundleName: string) => {
    const bundle = TAHOE_ACCENT_BUNDLES.find(b => b.name === bundleName);
    if (!bundle) return;

    const presets = buildTahoePresets(bundle);
    setPrimaryPreset(presets.primaryPreset);
    setAccentPreset(presets.accentPreset);
    setDarkPrimaryPreset(presets.darkPrimaryPreset);
    setDarkAccentPreset(presets.darkAccentPreset);
  };

  return (
    <div className="flex gap-2">
      {TAHOE_ACCENT_BUNDLES.map((bundle) => (
        <button
          key={bundle.name}
          onClick={() => applyTahoeAccent(bundle.name)}
          className="w-6 h-6 rounded-full border-2 border-white/50"
          style={{ background: bundle.primary }}
          title={bundle.name}
        />
      ))}
    </div>
  );
}

// Available bundles:
// Tahoe:  Glass, Blue, Purple, Pink, Red, Orange, Yellow, Green, Graphite
// Sonoma: Blue, Purple, Pink, Red, Orange, Yellow, Green, Graphite, Multicolor`})]})]})})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"ThemeProvider Props Reference",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.BasicTable,{columns:[{key:"prop",label:"Prop",render:a=>e.jsx("code",{className:"font-mono text-xs",children:a})},{key:"type",label:"Type",render:a=>e.jsx("code",{className:"font-mono text-xs",children:a})},{key:"default",label:"Default",className:"text-gray-500"},{key:"description",label:"Description",className:"text-gray-600 dark:text-gray-400"}],data:[{prop:"menuItems",type:"IMenuItem[]",default:"[]",description:"Navigation items. Each with name, path, icon, and optional component."},{prop:"layout",type:"LAYOUT_OPTIONS",default:"horizontal",description:"Layout type. Must be valid for the current themeStyle."},{prop:"themeStyle",type:"'default' | 'macos' | 'macos-tahoe'",default:"default",description:"Theme style preset. Determines valid layouts and visual system."},{prop:"logo",type:"LogoPropTypes",default:"—",description:"Logo config: path (route), name (alt text), optional image."},{prop:"rightButton",type:"ReactNode",default:"—",description:"Element rendered in header/toolbar trailing area."},{prop:"customRoutes",type:"ReactNode",default:"—",description:"Custom Routes element. Overrides auto-generated routing."},{prop:"fullWidth",type:"boolean",default:"false",description:"Remove content max-width constraint for full-width layouts."},{prop:"className",type:"string",default:"—",description:"Root layout container class."},{prop:"headerClassName",type:"string",default:"—",description:"Header/toolbar container class for custom styling."},{prop:"contentClassName",type:"string",default:"—",description:"Content area class for padding/spacing overrides."}],resizable:!1})})})})]});exports.default=r;
