tharaday 0.4.0 → 0.5.0

package/src/layouts/AppLayout/AppLayout.tsx

@@ -1,3 +1,5 @@
+import clsx from 'clsx';
+
 import styles from './AppLayout.module.css';
 import type { AppLayoutProps } from './AppLayout.types.ts';
 import { Header } from '../../components/Header/Header.tsx';
@@ -11,7 +13,7 @@ import { NavBar } from '../../components/NavBar/NavBar.tsx';
  */
 export const AppLayout = ({
   headerLogo,
-  headerTitle = 'Tharaday',
+  headerTitle,
   user,
   navItems,
   activeNavId,
@@ -21,9 +23,11 @@ export const AppLayout = ({
   onLogout,
   onCreateAccount,
   onNavItemClick,
+  className,
+  maxWidth,
 }: AppLayoutProps) => {
   return (
-    <div className={styles.root}>
+    <div className={clsx(styles.root, className)}>
       <Header
         logo={headerLogo}
         title={headerTitle}
@@ -31,12 +35,14 @@ export const AppLayout = ({
         onLogin={onLogin}
         onLogout={onLogout}
         onCreateAccount={onCreateAccount}
+        maxWidth={maxWidth}
       />
       <NavBar
         items={navItems}
         activeId={activeNavId}
         actions={navActions}
         onItemClick={onNavItemClick}
+        maxWidth={maxWidth}
       />
       <main className={styles.main}>
         <div className={styles.container}>{children}</div>

package/src/layouts/AppLayout/AppLayout.types.ts

@@ -3,6 +3,14 @@ import type { ReactNode } from 'react';
 import type { NavBarItem } from '../../components/NavBar/NavBar.types.ts';
 
 export interface AppLayoutProps {
+  /**
+   * Additional class name for the layout root
+   */
+  className?: string;
+  /**
+   * Max width for header and navbar containers
+   */
+  maxWidth?: string | number;
   /**
    * Header logo element
    */

package/src/layouts/AuthLayout/AuthLayout.tsx

@@ -1,11 +1,13 @@
+import clsx from 'clsx';
+
 import styles from './AuthLayout.module.css';
 import type { AuthLayoutProps } from './AuthLayout.types.tsx';
 import { Box } from '../../components/Box/Box.tsx';
 import { Text } from '../../components/Text/Text.tsx';
 
-export const AuthLayout = ({ logo, title, description, children }: AuthLayoutProps) => {
+export const AuthLayout = ({ logo, title, description, children, className }: AuthLayoutProps) => {
   return (
-    <Box className={styles.root}>
+    <Box className={clsx(styles.root, className)}>
       <Box className={styles.card}>
         <Box className={styles.header}>
           {logo && <Box className={styles.logo}>{logo}</Box>}

package/src/layouts/AuthLayout/AuthLayout.types.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 
 export interface AuthLayoutProps {
+  className?: string;
   logo?: ReactNode;
   title?: string;
   description?: string;

package/src/layouts/DashboardLayout/DashboardLayout.tsx

@@ -1,10 +1,12 @@
+import clsx from 'clsx';
+
 import styles from './DashboardLayout.module.css';
 import type { DashboardLayoutProps } from './DashboardLayout.types.tsx';
 import { Header } from '../../components/Header/Header.tsx';
 
 export const DashboardLayout = ({
   headerLogo,
-  headerTitle = 'Tharaday',
+  headerTitle,
   breadcrumbs,
   actions,
   stats,
@@ -13,9 +15,11 @@ export const DashboardLayout = ({
   onLogin,
   onLogout,
   onCreateAccount,
+  className,
+  maxWidth,
 }: DashboardLayoutProps) => {
   return (
-    <div className={styles.root}>
+    <div className={clsx(styles.root, className)}>
       <Header
         logo={headerLogo}
         title={headerTitle}
@@ -23,6 +27,7 @@ export const DashboardLayout = ({
         onLogin={onLogin}
         onLogout={onLogout}
         onCreateAccount={onCreateAccount}
+        maxWidth={maxWidth}
       />
       <main className={styles.main}>
         <div className={styles.container}>

package/src/layouts/DashboardLayout/DashboardLayout.types.tsx

@@ -1,6 +1,8 @@
 import type { ReactNode } from 'react';
 
 export interface DashboardLayoutProps {
+  className?: string;
+  maxWidth?: string | number;
   headerLogo?: ReactNode;
   headerTitle?: string;
   breadcrumbs?: ReactNode;

package/src/layouts/SettingsLayout/SettingsLayout.tsx

@@ -1,10 +1,12 @@
+import clsx from 'clsx';
+
 import styles from './SettingsLayout.module.css';
 import type { SettingsLayoutProps } from './SettingsLayout.types.tsx';
 import { Header } from '../../components/Header/Header.tsx';
 
 export const SettingsLayout = ({
   headerLogo,
-  headerTitle = 'Tharaday',
+  headerTitle,
   breadcrumbs,
   sidebar,
   children,
@@ -12,9 +14,11 @@ export const SettingsLayout = ({
   onLogin,
   onLogout,
   onCreateAccount,
+  className,
+  maxWidth,
 }: SettingsLayoutProps) => {
   return (
-    <div className={styles.root}>
+    <div className={clsx(styles.root, className)}>
       <Header
         logo={headerLogo}
         title={headerTitle}
@@ -22,6 +26,7 @@ export const SettingsLayout = ({
         onLogin={onLogin}
         onLogout={onLogout}
         onCreateAccount={onCreateAccount}
+        maxWidth={maxWidth}
       />
       <main className={styles.main}>
         <div className={styles.container}>

package/src/layouts/SettingsLayout/SettingsLayout.types.tsx

@@ -1,6 +1,8 @@
 import type { ReactNode } from 'react';
 
 export interface SettingsLayoutProps {
+  className?: string;
+  maxWidth?: string | number;
   headerLogo?: ReactNode;
   headerTitle?: string;
   breadcrumbs?: ReactNode;