"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 a=()=>e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"Using the Theme System",description:"Setup examples for ThemeProvider and the useTheme hook — everything you need to integrate theming in your application.",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-blue-500 via-indigo-500 to-purple-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("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"ThemeProvider Setup"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Wrap your application with ThemeProvider to enable theming"})]}),e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Basic Configuration",children:e.jsx(t.CodeBlock,{language:"tsx",code:`import { ThemeProvider, LAYOUT_OPTIONS } from '@e-burgos/tucu-ui';

function App() {
  const menuItems = [
    { label: 'Home', path: '/', icon: HomeIcon },
    { label: 'Dashboard', path: '/dashboard', icon: DashboardIcon },
  ];

  return (
    <ThemeProvider
      // Theme Style (constrains available layouts)
      themeStyle="default" // 'default' | 'macos' | 'macos-tahoe'

      // Layout Configuration
      layout={LAYOUT_OPTIONS.HORIZONTAL} // CLEAN | ADMIN | HORIZONTAL
      menuItems={menuItems}
      logo={{ path: '/', name: 'MyApp' }}

      // Color Configuration
      brandColor="Blue"
      customPaletteColor={{
        primary: '#0052ff',
        darkPrimary: '#578bfa',
        secondary: '#f3f4f6',
        darkSecondary: '#172131',
        accent: '#f7d21a',
        darkAccent: '#936000',
        muted: '#4a5565',
        darkMuted: '#828a99',
        darkBg: '#030712',
        lightBg: '#ffffff',
        lightDark: '#f9fafb',
        darkLightDark: '#0a101d',
      }}

      // Theme Settings
      mode="dark"                    // 'light' | 'dark' (default: 'dark')
      showSettings={true}

      // Additional Features
      headerClassName="custom-header"
      contentClassName="custom-content"
      fullWidth={false}
      rightButton={<UserMenu />}
    >
      {/* Routes handled automatically by ThemeProvider */}
    </ThemeProvider>
  );
}`})})})]}),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:"useTheme Hook Usage"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Access and control theme state from any component"})]}),e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Theme Controls Example",children:e.jsx(t.CodeBlock,{language:"tsx",code:`import { useTheme, LAYOUT_OPTIONS } from '@e-burgos/tucu-ui';

function ThemeControls() {
  const {
    // State
    mode, layout, direction, colorScheme,
    primaryPreset, secondaryPreset, accentPreset,
    isSettingsOpen,

    // Setters
    setMode, setLayout, setDirection,
    setPrimaryPreset, setSecondaryPreset,
    setIsSettingsOpen,

    // Actions
    restoreDefaultColors,
    applyMacOSTheme,
    applyMacOSTahoeTheme,
    applyThemeStyle,
  } = useTheme();

  return (
    <div>
      {/* Mode Toggle */}
      <button onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}>
        Toggle {mode === 'light' ? 'Dark' : 'Light'} Mode
      </button>

      {/* Layout (only valid options for current theme style) */}
      <select
        value={layout}
        onChange={(e) => setLayout(e.target.value as LAYOUT_OPTIONS)}
      >
        <option value={LAYOUT_OPTIONS.CLEAN}>Clean</option>
        <option value={LAYOUT_OPTIONS.ADMIN}>Admin</option>
        <option value={LAYOUT_OPTIONS.HORIZONTAL}>Horizontal</option>
      </select>

      {/* Theme Style Actions */}
      <button onClick={applyMacOSTheme}>Apply macOS Sonoma</button>
      <button onClick={applyMacOSTahoeTheme}>Apply macOS Tahoe</button>
      <button onClick={() => applyThemeStyle('default')}>Reset to Default</button>

      {/* Color Controls */}
      <button onClick={() => setPrimaryPreset({ label: 'Blue', value: '#105eff' })}>
        Set Primary: Blue
      </button>

      {/* Settings Panel */}
      <button onClick={() => setIsSettingsOpen(!isSettingsOpen)}>
        {isSettingsOpen ? 'Close' : 'Open'} Settings
      </button>

      {/* Restore Defaults */}
      <button onClick={restoreDefaultColors}>Restore Default Colors</button>
    </div>
  );
}`})})})]})]});exports.default=a;
