@admin-layout/tailwind-design-pro 10.0.9-alpha.52 → 10.0.9-alpha.55

package/README.md

@@ -51,38 +51,295 @@ export default {
 };
 ```
 
-### 3. Using the ThemeProvider
+# Theme System Documentation
 
-To enable theme switching functionality in your application, wrap your app with the ThemeProvider:
+## Overview
+
+The theme system provides a flexible and powerful way to manage the visual appearance of your application. It supports multiple pre-built themes (default, Airbnb, Slack, GitHub, and Spotify) and includes dark mode functionality.
+
+## Available Themes
+
+The system comes with several pre-built themes:
+
+-   `default`: A neutral theme with standard components
+-   `airbnb`: Inspired by Airbnb's design system
+-   `slack`: Based on Slack's color scheme and components
+-   `github`: Following GitHub's design patterns
+-   `spotify`: Matching Spotify's visual identity
+
+## Theme Structure
+
+Each theme follows a consistent structure defined by the `DefaultTheme` interface:
+
+```typescript
+interface DefaultTheme {
+    name: string;
+    colors: {
+        primary: ColorRamp;
+        secondary: ColorRamp;
+        accent: ColorRamp;
+        success: ColorRamp;
+        warning: ColorRamp;
+        error: ColorRamp;
+        neutral: ColorRamp;
+        background: {
+            light: string;
+            dark: string;
+        };
+        text: {
+            light: {
+                primary: string;
+                secondary: string;
+                tertiary: string;
+            };
+            dark: {
+                primary: string;
+                secondary: string;
+                tertiary: string;
+            };
+        };
+    };
+    borderRadius: {
+        sm: string;
+        DEFAULT: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        full: string;
+    };
+    fontFamily: {
+        sans: string[];
+        serif: string[];
+        mono: string[];
+    };
+    boxShadow: {
+        sm: string;
+        DEFAULT: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    components: {
+        buttons: {
+            primary: ButtonStyle;
+            secondary: ButtonStyle;
+        };
+        cards: {
+            borderRadius: string;
+            padding: string;
+            shadow: string;
+            border: string;
+        };
+        inputs: {
+            borderRadius: string;
+            borderColor: string;
+            focusBorderColor: string;
+            padding: string;
+            fontSize: string;
+            lineHeight: string;
+        };
+    };
+}
+```
+
+## Setting Up the Theme Provider
+
+To use the theme system, wrap your application with the `ThemeProviderTailwind` component:
 
 ```tsx
-import { ThemeProvider } from '@admin-layout/tailwind-design-pro';
+import { ThemeProviderTailwind } from 'packages/tailwind-design-pro/src/components/ThemeProvider';
 
-function App() {
-    // Example settings for the theme
+const App = () => {
     const settings = {
-        theme: 'airbnb', // Use our unified theme
-        themeType: 'light', // 'light' or 'dark'
-        primaryColor: '#1890ff', // Optional custom primary color
-        fontFamily: 'Inter, sans-serif', // Optional custom font
+        theme: 'default', // or 'airbnb', 'slack', 'github', 'spotify'
+        themeType: 'light',
+        primaryColor: '#your-color',
+        fontFamily: 'your-font-family',
+        navTheme: 'light', // or 'dark'
     };
 
+    return <ThemeProviderTailwind settings={settings}>{/* Your app components */}</ThemeProviderTailwind>;
+};
+```
+
+## Using the useTheme Hook
+
+The `useTheme` hook provides access to the current theme and theme-related functionality. Here's how to use it:
+
+```tsx
+import { useTheme } from 'packages/tailwind-design-pro/src/components/ThemeProvider';
+
+const YourComponent = () => {
+    const { themeName, theme, isDarkMode, toggleDarkMode } = useTheme();
+
     return (
-        <ThemeProvider settings={settings}>
-            <YourApp />
-        </ThemeProvider>
+        <div>
+            {/* Access theme colors */}
+            <div style={{ color: theme.colors.primary[500] }}>Primary Color</div>
+
+            {/* Use theme-specific styles */}
+            <button
+                style={{
+                    borderRadius: theme.borderRadius.DEFAULT,
+                    fontFamily: theme.fontFamily.sans.join(', '),
+                }}
+            >
+                Themed Button
+            </button>
+
+            {/* Toggle dark mode */}
+            <button onClick={toggleDarkMode}>Toggle {isDarkMode ? 'Light' : 'Dark'} Mode</button>
+        </div>
     );
-}
+};
 ```
 
+### Available Properties from useTheme
+
+1. `themeName`: The current theme name ('default', 'airbnb', 'slack', 'github', or 'spotify')
+2. `theme`: The complete theme object containing all styling properties
+3. `isDarkMode`: Boolean indicating if dark mode is active
+4. `toggleDarkMode`: Function to toggle between light and dark modes
+
+## Theme Features
+
+### 1. Dark Mode Support
+
+-   Automatically handles dark mode through the `isDarkMode` state
+-   Persists dark mode preference in localStorage
+-   Applies appropriate dark mode classes to the document
+
+### 2. Dynamic Theme Switching
+
+-   Themes can be changed dynamically through the settings prop
+-   All theme properties are immediately applied when changed
+
+### 3. Component-Specific Styling
+
+Each theme includes specific styling for common components:
+
+-   Buttons (primary and secondary variants)
+-   Cards
+-   Input fields
+
+### 4. Color System
+
+-   Each theme includes a comprehensive color system with:
+    -   Primary colors
+    -   Secondary colors
+    -   Accent colors
+    -   Semantic colors (success, warning, error)
+    -   Neutral colors
+    -   Background colors
+    -   Text colors
+
+### 5. Typography
+
+-   Customizable font families for different text styles
+-   Consistent typography settings across themes
+
+## Best Practices
+
+1. **Theme Access**
+
+    ```tsx
+    const { theme } = useTheme();
+    // Use theme properties directly
+    const primaryColor = theme.colors.primary[500];
+    ```
+
+2. **Dark Mode Handling**
+
+    ```tsx
+    const { isDarkMode, toggleDarkMode } = useTheme();
+    // Use isDarkMode to conditionally render styles
+    const backgroundColor = isDarkMode ? theme.colors.background.dark : theme.colors.background.light;
+    ```
+
+3. **Component Styling**
+
+    ```tsx
+    const { theme } = useTheme();
+    // Use theme component styles
+    const buttonStyle = {
+        ...theme.components.buttons.primary,
+        // Add custom styles as needed
+    };
+    ```
+
+4. **Responsive Design**
+    ```tsx
+    const { theme } = useTheme();
+    // Use theme's responsive values
+    const cardStyle = {
+        borderRadius: theme.borderRadius.md,
+        boxShadow: theme.boxShadow.DEFAULT,
+    };
+    ```
+
 ## Theme Customization
 
-The theme system is built on Tailwind's theme extension mechanism. You can customize the theme by modifying the `themeRegistry.ts` file.
+### Creating a Custom Theme
 
-## Available Themes
+You can create your own theme by following the `DefaultTheme` interface structure:
+
+```typescript
+const customTheme: DefaultTheme = {
+    name: 'custom',
+    colors: {
+        // Define your color palette
+    },
+    // Define other theme properties
+};
+```
+
+### Extending Existing Themes
+
+You can extend existing themes by importing them and modifying specific properties:
+
+```typescript
+import { defaultTheme } from './themes/default';
+
+const extendedTheme: DefaultTheme = {
+    ...defaultTheme,
+    name: 'extended',
+    colors: {
+        ...defaultTheme.colors,
+        primary: {
+            // Override primary colors
+        },
+    },
+};
+```
+
+## Troubleshooting
+
+### Common Issues
+
+1. **Theme Not Applying**
+
+    - Ensure the `ThemeProviderTailwind` is properly wrapped around your application
+    - Check if the theme name matches one of the available themes
+    - Verify that the settings prop is correctly configured
+
+2. **Dark Mode Not Working**
+
+    - Check if `navTheme` is properly set in the settings
+    - Verify that the dark mode classes are being applied to the document
+    - Ensure localStorage is accessible in your environment
+
+3. **Custom Styles Not Taking Effect**
+    - Verify that your custom theme follows the `DefaultTheme` interface
+    - Check if the theme is properly registered in the themes object
+    - Ensure the theme name is correctly referenced in the settings
+
+## Contributing
+
+When contributing to the theme system:
 
--   `default` - The default theme
--   `github` - GitHub-inspired theme
--   `slack` - Slack-inspired theme
--   `airbnb` - Airbnb-inspired theme
--   `spotify` - Spotify-inspired theme
+1. Follow the existing theme structure
+2. Maintain consistency with other themes
+3. Include both light and dark mode variants
+4. Document any new theme properties or features
+5. Test the theme across different components and scenarios

package/lib/cdm-locales/en/settings.json

@@ -24,5 +24,9 @@
     "menu_divider_names": "Menu Divider Names",
     "upper_menu_divider": "Upper Menu Divider",
     "middle_menu_divider": "Middle Menu Divider",
-    "lower_menu_divider": "Lower Menu Divider"
+    "lower_menu_divider": "Lower Menu Divider",
+    "header_elements": "Header Elements",
+    "show_logo": "Show Logo",
+    "show_search_slot": "Show Search Slot",
+    "show_right_content": "Show Right Content"
 }

package/lib/cdm-locales/es/settings.json

@@ -22,5 +22,9 @@
     "menu_divider_names": "Nombres de los Separadores de Menú",
     "upper_menu_divider": "Separador del Menú Superior",
     "middle_menu_divider": "Separador del Menú Central",
-    "lower_menu_divider": "Separador del Menú Inferior"
+    "lower_menu_divider": "Separador del Menú Inferior",
+    "header_elements": "Elementos del Encabezado",
+    "show_logo": "Mostrar Logo",
+    "show_search_slot": "Mostrar Espacio de Búsqueda",
+    "show_right_content": "Mostrar Contenido Derecho"
 }

package/lib/components/Layout/BasicLayout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/BasicLayout/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiE,MAAM,OAAO,CAAC;AAOtF,OAAO,EACH,gBAAgB,EAGhB,iBAAiB,EAIpB,MAAM,sBAAsB,CAAC;AAS9B,eAAO,MAAM,mBAAmB;;;;uCA4B/B,CAAC;AAgCF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAC9B,gBAAgB,GAAG,iBAAiB,GAAG;IAAE,WAAW,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAmM3F,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/BasicLayout/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiE,MAAM,OAAO,CAAC;AAOtF,OAAO,EACH,gBAAgB,EAGhB,iBAAiB,EAIpB,MAAM,sBAAsB,CAAC;AAS9B,eAAO,MAAM,mBAAmB;;;;uCA4B/B,CAAC;AAgCF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAC9B,gBAAgB,GAAG,iBAAiB,GAAG;IAAE,WAAW,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAkO3F,CAAC"}

package/lib/components/Layout/BasicLayout/index.js

@@ -83,7 +83,6 @@ const BasicLayout = props => {
     actor
   } = propsWithSettings;
   const [isSideMenuOpen, setIsSideMenuOpen] = useState(false);
-  // const location = useLocation();
   const [scrollEnd, setScrollEnd] = useState(false);
   const [searchOptionsShown, setSearchOptionsShown] = useState(false);
   const {
@@ -99,6 +98,9 @@ const BasicLayout = props => {
   const {
     isMobile
   } = useMediaQuery();
+  // Get current route settings
+  const currentRoute = location?.pathname || '/';
+  const routeSettings = settings?.routeSettings?.[currentRoute] || settings?.routeSettings?.['/'] || settings;
   const onScrollReachEnd = () => {
     setScrollEnd(prevScrollEnd => !prevScrollEnd);
   };
@@ -115,7 +117,7 @@ const BasicLayout = props => {
     ...defaultProps
   }, propsWithSettings);
   const settingRef = useRef(settings);
-  const scrollThreshold = settings?.regions?.scrollThreshold || 50;
+  const scrollThreshold = routeSettings?.regions?.scrollThreshold || 50;
   const {
     componentVisibility
   } = useScrollThreshold([{
@@ -133,6 +135,15 @@ const BasicLayout = props => {
       onSettingChange(newState);
     }
   }, [primaryColor, isBrowser, settingRef]);
+  // // Update settings when route changes
+  // useEffect(() => {
+  //     if (actor && location.pathname) {
+  //         actor.send({
+  //             type: 'ROUTE_CHANGE',
+  //             pathname: location.pathname
+  //         });
+  //     }
+  // }, [location.pathname, actor]);
   const {
     ref: refHeader,
     height: heightHeader
@@ -165,13 +176,14 @@ const BasicLayout = props => {
     style: {
       backgroundColor: backgroundColor
     },
-    children: [settings?.regions.showHeader && LAYOUT_ROOT != '/' && jsx(GlobalHeader, {
+    children: [routeSettings?.regions.showHeader && LAYOUT_ROOT != '/' && jsx(GlobalHeader, {
       toggleSideMenu: toggleSideMenu,
       settings: settings,
       upperMenus: getMenuSeparation(menuData).upperMenus,
       routeParams: routeParams,
-      collapsed: collapsed
-    }), LAYOUT_ROOT === '/' && settings?.regions.showHeader && jsx(MainHeader, {
+      collapsed: collapsed,
+      ...props
+    }), LAYOUT_ROOT === '/' && routeSettings?.regions.showHeader && jsx(MainHeader, {
       scrolled: scrolled,
       location: location,
       menuData: menuData,
@@ -184,8 +196,8 @@ const BasicLayout = props => {
       picture: picture,
       componentVisibility: componentVisibility
     }), jsxs("div", {
-      className: "flex flex-1  relative",
-      children: [settings?.layout.navigationMode !== 'topbar' && settings?.regions.showMenu && LAYOUT_ROOT != '/' && jsx(Sidebar, {
+      className: "flex flex-1 relative",
+      children: [routeSettings?.layout.navigationMode !== 'topbar' && routeSettings?.regions.showMenu && LAYOUT_ROOT != '/' && jsx(Sidebar, {
         isSideMenuOpen: isSideMenuOpen,
         closeSideMenu: closeSideMenu,
         menuData: menuData,
@@ -196,17 +208,27 @@ const BasicLayout = props => {
       }), jsxs("div", {
         className: "flex flex-col flex-1 overflow-auto",
         style: {
-          marginLeft: settings?.layout.navigationMode !== 'topbar' && settings?.regions.showMenu && settings?.layout.fixedSidebar && !isMobile && LAYOUT_ROOT != '/' ? collapsed ? '64px' : '256px' : '0px'
+          marginLeft: routeSettings?.layout.navigationMode !== 'topbar' && routeSettings?.regions.showMenu && routeSettings?.layout.fixedSidebar && !isMobile && LAYOUT_ROOT != '/' ? collapsed ? '64px' : '256px' : '0px'
         },
         children: [jsx(SettingDrawer, {
           primaryColor: primaryColor,
           settings: settings,
-          onSettingChange: onSettingChange,
+          onSettingChange: newSettings => {
+            // Update settings for current route
+            if (actor) {
+              actor.send({
+                type: 'UPDATE',
+                value: newSettings
+              });
+            }
+            onSettingChange?.(newSettings);
+          },
           actor: actor,
-          colorList: getThemeColors(settings?.theme)
+          colorList: getThemeColors(settings?.theme),
+          ...props
         }), jsxs("main", {
           className: "relative",
-          children: [searchOptionsShown && settings?.regions?.searchBarOverlay && jsx("div", {
+          children: [searchOptionsShown && routeSettings?.regions?.searchBarOverlay && jsx("div", {
             className: "fixed inset-0 bg-black bg-opacity-50 z-30 cursor-pointer",
             onClick: e => {
               e.stopPropagation();
@@ -218,7 +240,7 @@ const BasicLayout = props => {
           className: footerFixed ? 'fixed bottom-0 w-full' : '',
           children: jsx(FooterSlot, {
             settings: settings,
-            active: settings?.regions?.showFooter === undefined ? true : settings?.regions?.showFooter
+            active: routeSettings?.regions?.showFooter === undefined ? true : routeSettings?.regions?.showFooter
           })
         })]
       })]

package/lib/components/Layout/BasicLayout/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Layout/BasicLayout/index.tsx"],"sourcesContent":[null],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Layout/BasicLayout/index.tsx"],"sourcesContent":[null],"names":[],"mappings":"owCAwBO,MAAM,mBAAmB,GAAG,CAAC;AAChC,EAAA,WAAW;uBAEI;AACX,EAAA;;AAEI,EAAA,MAAA,KAAA,GAAA,MAAa,EAAA;AACT,EAAA,SAAA,CAAA,MAAA;oBAAmB,CAAO,OAAA,IAAA,IAAA;;mBAEL,GAAA,CAAA,IAAA;AACrB,QAAA,IAAA,CAAA,CAAA,MAAI,OAAO;wBACI,EAAA;6BACd,CAAA,KAAA,CAAA;AACD,QAAA,IAAA,MAAA,CAAA,OAAU,GAAC,EAAA,EAAA;qBACI,CAAA,IAAA,CAAA;;AAEf,QAAA,IAAA,MAAA,CAAA,OAAU,GAAY,EAAA,EAAA;AAClB,UAAA,WAAA,CAAA,KAAA,CAAA;;AAER,QAAA,IAAA,MAAE,CAAA,WAAA,GAAA,MAAA,CAAA,OAAA,IAAA,QAAA,CAAA,IAAA,CAAA,YAAA,EAAA;AAEF,UAAA,gBAAuB,EAAA;AACvB;AACI,OAAA;AACJ,MAAA,MAAA,CAAC,gBAAC,CAAA,QAAA,EAAA,OAAA,CAAA;aACL,MAAA;QACA,MAAE,CAAA,mBAAA,CAAA,QAAA,EAAA,OAAA,CAAA;AACP,OAAA;AACJ;AAEA,GAAA,EAAA;AAQI,EAAA,OAAA,KAAQ;AACR;AACA,MAAA,sBAAwB,GAAK,CAAA,SAAG,EAAA,KAAA,KAAA;QAC5B;AACI,IAAA;AACA,GAAA,GAAA,KAAA;AACA,EAAA,MAAA,gBAAY,gBAAA,CAAA,SAAA,CAAA;qBACd,KAAA,KAAA,EAAA;IACN,OAAC;MACG,KAAA,EAAA,KAAA,CAAA,SAAkB,EAAA;AAClB,MAAA,EAAA,EAAA,EAAA;AACA,MAAA,QAAW,EAAA;;AAEH;qBACK,EAAA;eACP,GAAA,eAAA,CAAA,SAAA,EAAA,aAAA,CAAA,KAAA,EAAA,aAAA,CAAA;QACN,OAAC,KAAA,KAAA,QAAA,EAAA;aACM;QACV,GAAA,aAAA;AACD,QAAA;AACJ,OAAE;AAEF;IAGI,OAAM,CAAA,OAAA,KAAA,4EAA0D,CAAA;;SAE1D,aAAY;AAClB,CAAA;AAGoB,MAAA,WAAA,GAAA,KAAA,IAAA;AAChB,EAAA,MAAA,iBACQ,GAAA;IACR,GAAS,eAAA;IACT,GAAwB;;QAGmB,CAAA,QAAA,EAAA,WAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA;QAC7B,CAAA,SAAA,EACd,YACA,CAAA,GAAA,QACW,CAAA,KAAA,CAAA;QAST;IACN,QAAgB;IAChB,UAAyB,EAAA,eAAE;AAC3B;AACA,IAAA,gBAAQ;IAER,QAAQ;AACR;;AAGA,IAAA;AACA,IAAA,IAAA;;kBAGgB;AAChB,IAAA,OAAE;IAEF,QAAM;eACS;YACU;eACL;AACnB,IAAA,YAAE;IAEH,eAAM;AAEE,IAAA,eAAoB;AACvB,IAAA;MAGC,iBAAa;QAEX,CAAQ,cAAU,EAAA,iBAAU,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA;AAC5B,EAAA,MAAA,CAAA,SAAe,EAAA,YAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA;QAEnB,CAAA,kBACF,EAAA,qBAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA;AAEF,EAAA,MAAA;IAEA;AAEA,GAAA,GAAA,eAAQ;AACJ,EAAA,MAAA;AACI,IAAA;AACA,GAAA,GAAA,MAAA;AACA,EAAA,MAAA;AACH,IAAA,KAAA;AACJ,IAAA;MAEQ,QAAC;QACN;AACA,IAAA;mBACU,EAAA;;QAEV,YAAC,GAAA,QAAA,EAAA,QAAA,IAAA,GAAA;QACD,aAAY,WAAa,EAAA,aAAa,GAAA,YAAA,CAAA,IAAA,QAAA,EAAA,aAAA,GAAA,GAAA,CAAA,IAAA,QAAA;QAEF,gBAAA,GAAA,MAAA;IACxC,YAAoB,CAAA,aAAA,IAAA,CAAA,aAAA,CAAA;;QAEG,mBAAA,GAAA,mBAAA,CAAA;IACvB,WAAoC;IACpC,qBAA0C;IAC1C;IACA;QACkC,YAAA,GAAA,IAAA,CAAA;AAElC,IAAA,GAAA;AACA,GAAA,EAAA,CAAA,QAAQ,CAAG,CAAE;AACb,EAAA,MAAA,aAAa,GAAA,sBAAmB,CAAA;IAChC,QAAkB,EAAA,QAAA,EAAE,QAAc;IAClC,GAAS;AACL,GAAA,EAAA;kBACQ,GAAA,eAAoB;uBAAyD,GAAA,aAAO,EAAA,OAAA,EAAA,eAAA,IAAA,EAAA;;;wBAE3F,CAAA,CAAA;IACL,SAAgB,EAAA;IAEhB,EAAM,EAAA,YAAA;AACF,IAAA,eAAA,EAAA;AACJ,GAAA,CAAA,CAAC;WAEK,CAAA,MAAA;;AAEN,IAAA,IAAE,UAAA,CAAA,OAAA,EAAA,YAAA,KAAA,UAAA,IAAA,YAAA,KAAA,UAAA,EAAA;MAEwC,MAAA,QAAA,GAAA;QACpC,GAAA,UAAA,CAAA,OAA4B;AAElC,QAAA;;AAsCgB,MAAA,eAAA,CAAA,QAAA,CAAA;AAgBI;yCAEiB,CAAA,CAAA;;AAEb;AACA;AACI;AACI;AACA;AACJ;AACX;;;;AASe,IAAA,MAAA,EAAA;AACA,GAAA,GAAA,gBAAA,EAAA;AACH,EAAA,MAAA;;AAEL,IAAA,MAAA,EAAA;AACJ,GAAA,GAAA,gBAAA,EAAA;;;AAYQ,IAAA,MAAA,EAAA;AAUI,GAAA,GAAA,gBAAA,EAAA;AACA,EAAA,MAAA,CAAA,WAAA,EAAA,cAAA,CAAA,GAAA,QAAE,CAAA,KAAA,CAAa;AAQnD,EAAE,SAAA,CAAA,MAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/Layout/GlobalHeader/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/GlobalHeader/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAGvD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,GAAG,GAAG,CAyE/D,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/GlobalHeader/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAGvD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,GAAG,GAAG,CAsF/D,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Layout/GlobalHeader/Header.js

@@ -6,7 +6,8 @@ import {jsx,jsxs}from'react/jsx-runtime';import React__default from'react';impor
     routeParams,
     collapsed,
     settings,
-    toggleSideMenu
+    toggleSideMenu,
+    location
   } = props;
   const {
     MenuIcon,
@@ -15,14 +16,21 @@ import {jsx,jsxs}from'react/jsx-runtime';import React__default from'react';impor
   const {
     isMobile
   } = useMediaQuery();
+  const currentRoute = location?.pathname || '/';
+  const routeSettings = settings?.routeSettings?.[currentRoute] || {};
+  const headerElements = routeSettings?.regions?.headerElements || {
+    showLogo: true,
+    showSearchSlot: true,
+    showRightContent: true
+  };
   // Calculate header styles
   const headerStyles = React__default.useMemo(() => ({
     backgroundColor: settings?.navTheme === 'realDark' ? '#222' : 'white',
     color: settings?.navTheme === 'realDark' ? '#fff' : ''
   }), [settings]);
-  if (!settings?.regions?.showHeader) return null;
+  if (!routeSettings?.regions?.showHeader) return null;
   return jsx("header", {
-    className: `z-10 py-4 dark:bg-gray-800 top-0 border-b border-gray-200 ${settings?.layout?.fixedHeader ? 'sticky' : 'relative'}`,
+    className: `z-10 py-4 dark:bg-gray-800 top-0 border-b border-gray-200 ${routeSettings?.layout?.fixedHeader ? 'sticky' : 'relative'}`,
     style: headerStyles,
     children: jsxs("div", {
       className: "flex items-center justify-between h-full px-4 sm:px-6 mx-auto text-gray-700 dark:text-gray-200",
@@ -33,7 +41,7 @@ import {jsx,jsxs}from'react/jsx-runtime';import React__default from'react';impor
         children: jsx(MenuIcon, {
           className: "w-6 h-6"
         })
-      }), jsx("div", {
+      }), headerElements.showLogo && jsx("div", {
         children: jsxs(Link, {
           to: "/",
           className: "ml-6 flex items-center gap-2.5 text-lg font-bold text-gray-800 dark:text-gray-200",
@@ -45,7 +53,7 @@ import {jsx,jsxs}from'react/jsx-runtime';import React__default from'react';impor
             children: settings?.title
           })]
         })
-      }), settings?.regions?.searchBarRender && jsx("div", {
+      }), headerElements.showSearchSlot && routeSettings?.regions?.searchBarRender && jsx("div", {
         className: "flex-1 max-w-xl mx-4 hidden md:block",
         style: headerStyles,
         children: jsxs("div", {
@@ -64,7 +72,7 @@ import {jsx,jsxs}from'react/jsx-runtime';import React__default from'react';impor
             style: headerStyles
           })]
         })
-      }), settings?.layout?.navigationMode != 'sidebar' && jsx(RightContent, {
+      }), headerElements.showRightContent && routeSettings?.layout?.navigationMode !== 'sidebar' && jsx(RightContent, {
         upperMenus: upperMenus,
         collapsed: collapsed,
         routeParams: routeParams,

package/lib/components/Layout/GlobalHeader/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../../src/components/Layout/GlobalHeader/Header.tsx"],"sourcesContent":[null],"names":[],"mappings":"wYAOa,MAAA,YAAY,GAA2C,KAAC,IAAS;AAC1E,EAAA,MAAA;AACA,IAAA,KAAA;AAEA,IAAA,MAAM;IAEN,UAA0B;IAC1B,WAAM;AAGM,IAAA,SAAA;AACA,IAAA,QAAA;AACqB,IAAA;AAIjC,GAAA,GAAA,KAAK;AAA+B,EAAA,MAAA;AACpC,IAAA,QACI;AAuDR,IAAE;AAEF,GAAA,GAAA,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Header.js","sources":["../../../../src/components/Layout/GlobalHeader/Header.tsx"],"sourcesContent":[null],"names":[],"mappings":"wYAOa,MAAA,YAAY,GAA2C,KAAC,IAAS;AAC1E,EAAA,MAAA;AACA,IAAA,KAAA;AACA,IAAA,MAAM;AAEN,IAAA;IACA,WAAM;AACN,IAAA;AACI,IAAA,QAAA;AACA,IAAA,cAAA;AACA,IAAA;MACF,KAAA;QAEwB;IAC1B,QAAM;AAGM,IAAA;AACA,GAAA,GAAA,KAAA;AACqB,EAAA,MAC7B;AAGJ,IAAA;AAAyC,GAAA,GAAA,aAAW,EAAC;QAE9C,uBAEU,EAAA;AA2DrB,EAAE,MAAA,aAAA,GAAA,QAAA,EAAA,aAAA,GAAA,YAAA,CAAA,IAAA,EAAA;AAEF,EAAA,MAAA,8BAA4B,EAAA,OAAA,EAAA,cAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/Layout/GlobalHeader/MainHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MainHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/GlobalHeader/MainHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAUpE,eAAO,MAAM,iBAAiB,SACpB,MAAM,KAAK,CAAC,YAAY,aACnB,GAAG,2BAEJ,GAAG,YACH,GAAG,KACd,KAAK,CAAC,SAQR,CAAC;AAEF,eAAO,MAAM,yBAAyB,UAC3B,GAAG,8BAEC,MAAM,KAClB,KAAK,CAAC,SAyCR,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,GAAG,kBAAkB,CA0LrE,CAAC"}
+{"version":3,"file":"MainHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/GlobalHeader/MainHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAUpE,eAAO,MAAM,iBAAiB,SACpB,MAAM,KAAK,CAAC,YAAY,aACnB,GAAG,2BAEJ,GAAG,YACH,GAAG,KACd,KAAK,CAAC,SAQR,CAAC;AAEF,eAAO,MAAM,yBAAyB,UAC3B,GAAG,8BAEC,MAAM,KAClB,KAAK,CAAC,SAoCR,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,GAAG,kBAAkB,CAmMrE,CAAC"}

package/lib/components/Layout/GlobalHeader/MainHeader.js

@@ -88,6 +88,13 @@ const MainHeader = props => {
     picture,
     componentVisibility
   } = props;
+  const currentRoute = location?.pathname || '/';
+  const routeSettings = settings?.routeSettings?.[currentRoute] || {};
+  const headerElements = routeSettings?.regions?.headerElements || {
+    showLogo: true,
+    showSearchSlot: true,
+    showRightContent: true
+  };
   // State to track reduced motion preference
   const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
   const [showSearchBar, setShowSearchBar] = useState(false);
@@ -107,18 +114,18 @@ const MainHeader = props => {
     }
   }, []);
   useEffect(() => {
-    if (!settings?.regions?.searchBarRender) {
+    if (!routeSettings?.regions?.searchBarRender || !headerElements.showSearchSlot) {
       setShowSearchBar(false);
       return;
     }
-    if (settings?.regions?.searchBarBehavior === SearchBarBehavior.ON_SCROLL) {
+    if (routeSettings?.regions?.searchBarBehavior === SearchBarBehavior.ON_SCROLL) {
       // Show search bar only when scrolling
       setShowSearchBar(componentVisibility['search-bar']);
     } else {
       // Show search bar by default when PERMANENT
       setShowSearchBar(true);
     }
-  }, [componentVisibility['search-bar'], scrolled, settings?.regions?.searchBarRender, settings?.regions?.searchBarBehavior]);
+  }, [componentVisibility['search-bar'], scrolled, routeSettings?.regions?.searchBarRender, routeSettings?.regions?.searchBarBehavior, headerElements.showSearchSlot]);
   useLocation();
   // Use the state variable for animation
   const animation = prefersReducedMotion ? undefined : `${spin} infinite 20s linear`;
@@ -127,14 +134,14 @@ const MainHeader = props => {
     ...props
   }, animation, layout === 'mix' ? 'headerTitleRender' : undefined);
   return jsx(Fragment, {
-    children: settings?.showHeader || settings?.showHeader === undefined ? jsx("div", {
+    children: routeSettings?.regions?.showHeader || routeSettings?.regions?.showHeader === undefined ? jsx("div", {
       className: `
                         ${scrolled ? 'fixed' : 'absolute'}
                         w-full top-0 z-10 px-[8%] 
                         ${scrolled ? 'py-2' : 'py-5'}
                         ${searchOptionsShown ? 'pb-8' : ''}
-                        ${settings?.showHeader === undefined || true ? 'block' : 'hidden'}
-                        ${scrolled && settings?.navTheme === 'light' ? 'bg-white text-gray-900' : scrolled && settings?.navTheme === 'dark' ? 'bg-[#1f1f1f] text-white' : settings?.navTheme === 'dark' ? 'bg-[#1f1f1f] text-white' : 'bg-transparent'}
+                        ${routeSettings?.regions?.showHeader === undefined || true ? 'block' : 'hidden'}
+                        ${scrolled && routeSettings?.regions?.navTheme === 'light' ? 'bg-white text-gray-900' : scrolled && settings?.navTheme === 'dark' ? 'bg-[#1f1f1f] text-white' : settings?.navTheme === 'dark' ? 'bg-[#1f1f1f] text-white' : 'bg-transparent'}
                         ${!scrolled ? '' : 'shadow-[0_4px_2px_-2px_rgba(0,0,0,.2)]'}
                         transition-all duration-1000 ease-in-out
                         group
@@ -146,16 +153,16 @@ const MainHeader = props => {
         className: "flex flex-col",
         children: jsxs("div", {
           className: `
-                                justify-around items-start ${settings?.regions?.searchBarRender ? 'pt-0' : 'pt-[7px]'}
-                                ${settings?.hidden ? 'hidden' : 'flex'}
+                                justify-around items-start ${routeSettings?.regions?.searchBarRender ? 'pt-0' : 'pt-[7px]'}
+                                ${routeSettings?.regions?.hidden ? 'hidden' : 'flex'}
                             `,
-          children: [jsx(Link, {
+          children: [headerElements.showLogo && jsx(Link, {
             to: "/",
             className: `${settings?.navTheme === 'dark' ? 'text-white' : 'text-gray-900'}`,
             children: headerDom
           }), jsx("div", {
             className: "flex-grow"
-          }), jsxs("div", {
+          }), headerElements.showSearchSlot && jsxs("div", {
             className: "relative flex items-start justify-center",
             children: [jsx("div", {
               className: `transition-all duration-300 ease-in-out ${searchOptionsShown ? 'opacity-0 absolute' : 'opacity-100'}`,
@@ -174,13 +181,13 @@ const MainHeader = props => {
                 listId: "navbar_searchbox",
                 onClose: () => {
                   setSearchOptionsShown(false);
-                  setShowSearchBar(settings?.regions?.searchBarBehavior !== SearchBarBehavior.ON_SCROLL || scrolled);
+                  setShowSearchBar(routeSettings?.regions?.searchBarBehavior !== SearchBarBehavior.ON_SCROLL || scrolled);
                 }
               }) : null
             })]
           }), jsx("div", {
             className: "flex-grow"
-          }), jsxs("div", {
+          }), headerElements.showRightContent && jsxs("div", {
             className: "flex space-x-1 md:space-x-4",
             children: [jsx(RightContentSlot, {
               scrolled: scrolled,