@gofreego/tsutils 0.1.19 → 0.1.20

package/dist/index.d.mts

@@ -262,6 +262,10 @@ interface SidebarLayoutProps {
     menuItems: MenuItem[];
     /** Width of the sidebar */
     sidebarWidth?: string | number;
+    /** Header component to display at the top of the sidebar */
+    header?: ReactNode;
+    /** Footer component to display at the bottom of the sidebar */
+    footer?: ReactNode;
     /** Additional CSS class for container */
     className?: string;
     /** Default selected menu item ID (for non-router mode) */
@@ -446,6 +450,20 @@ interface ConfirmDialogProps {
 }
 declare const ConfirmDialog: ({ open, title, message, confirmText, cancelText, confirmColor, onConfirm, onCancel, }: ConfirmDialogProps) => react_jsx_runtime.JSX.Element;
 
+interface SidebarHeaderProps {
+    /** The text to display in the header */
+    title: string;
+    /** Path for the home button redirection (defaults to "/") */
+    homePath?: string;
+    /** Whether to show the home button */
+    showHome?: boolean;
+}
+/**
+ * A standardized header component to be used with SidebarLayout.
+ * It includes a title and an optional home button that redirects to a specified path.
+ */
+declare const SidebarHeader: React__default.FC<SidebarHeaderProps>;
+
 /**
  * Theme mode options
  * - 'light': Always use light theme
@@ -799,4 +817,4 @@ declare class LocalStorage {
 
 declare const getHighlighter: () => Promise<Highlighter>;
 
-export { AuthService, ConfirmDialog, type ConfirmDialogProps, type ErrorData, type GenerateLoginTokenRequest, type GenerateLoginTokenResponse, HttpClient, type HttpClientConfig, type HttpError, type HttpResponse, type IAuthService, type ISessionManager, LocalStorage, LoginCallbackPage, type LoginCallbackPageProps, type LogoutRequest, type LogoutResponse, type MenuItem, NotFoundPage, type Notification, type NotificationContextType, NotificationProvider, type NotificationProviderProps, ProtectedRoute, type ProtectedRouteProps, ReadmeViewer, type RefreshTokenRequest, type RefreshTokenResponse, type RequestConfig, type ResolvedThemeMode, SessionManager, SidebarLayout, type SidebarLayoutProps, type SignInMetadata, type SignInRequest, type SignInResponse, type SignInWithLoginTokenRequest, type Theme, type ThemeContextValue, type ThemeMode, ThemeProvider, ThemeToggle, type User, borderRadius, cn, darkTheme, debounce, elevation, extractErrorMessage, fontSize, fontWeight, formatDate, getHighlighter, lightTheme, lineHeight, spacing, throttle, tokens, transition, useNotification, useTheme, zIndex };
+export { AuthService, ConfirmDialog, type ConfirmDialogProps, type ErrorData, type GenerateLoginTokenRequest, type GenerateLoginTokenResponse, HttpClient, type HttpClientConfig, type HttpError, type HttpResponse, type IAuthService, type ISessionManager, LocalStorage, LoginCallbackPage, type LoginCallbackPageProps, type LogoutRequest, type LogoutResponse, type MenuItem, NotFoundPage, type Notification, type NotificationContextType, NotificationProvider, type NotificationProviderProps, ProtectedRoute, type ProtectedRouteProps, ReadmeViewer, type RefreshTokenRequest, type RefreshTokenResponse, type RequestConfig, type ResolvedThemeMode, SessionManager, SidebarHeader, type SidebarHeaderProps, SidebarLayout, type SidebarLayoutProps, type SignInMetadata, type SignInRequest, type SignInResponse, type SignInWithLoginTokenRequest, type Theme, type ThemeContextValue, type ThemeMode, ThemeProvider, ThemeToggle, type User, borderRadius, cn, darkTheme, debounce, elevation, extractErrorMessage, fontSize, fontWeight, formatDate, getHighlighter, lightTheme, lineHeight, spacing, throttle, tokens, transition, useNotification, useTheme, zIndex };

package/dist/index.d.ts

@@ -262,6 +262,10 @@ interface SidebarLayoutProps {
     menuItems: MenuItem[];
     /** Width of the sidebar */
     sidebarWidth?: string | number;
+    /** Header component to display at the top of the sidebar */
+    header?: ReactNode;
+    /** Footer component to display at the bottom of the sidebar */
+    footer?: ReactNode;
     /** Additional CSS class for container */
     className?: string;
     /** Default selected menu item ID (for non-router mode) */
@@ -446,6 +450,20 @@ interface ConfirmDialogProps {
 }
 declare const ConfirmDialog: ({ open, title, message, confirmText, cancelText, confirmColor, onConfirm, onCancel, }: ConfirmDialogProps) => react_jsx_runtime.JSX.Element;
 
+interface SidebarHeaderProps {
+    /** The text to display in the header */
+    title: string;
+    /** Path for the home button redirection (defaults to "/") */
+    homePath?: string;
+    /** Whether to show the home button */
+    showHome?: boolean;
+}
+/**
+ * A standardized header component to be used with SidebarLayout.
+ * It includes a title and an optional home button that redirects to a specified path.
+ */
+declare const SidebarHeader: React__default.FC<SidebarHeaderProps>;
+
 /**
  * Theme mode options
  * - 'light': Always use light theme
@@ -799,4 +817,4 @@ declare class LocalStorage {
 
 declare const getHighlighter: () => Promise<Highlighter>;
 
-export { AuthService, ConfirmDialog, type ConfirmDialogProps, type ErrorData, type GenerateLoginTokenRequest, type GenerateLoginTokenResponse, HttpClient, type HttpClientConfig, type HttpError, type HttpResponse, type IAuthService, type ISessionManager, LocalStorage, LoginCallbackPage, type LoginCallbackPageProps, type LogoutRequest, type LogoutResponse, type MenuItem, NotFoundPage, type Notification, type NotificationContextType, NotificationProvider, type NotificationProviderProps, ProtectedRoute, type ProtectedRouteProps, ReadmeViewer, type RefreshTokenRequest, type RefreshTokenResponse, type RequestConfig, type ResolvedThemeMode, SessionManager, SidebarLayout, type SidebarLayoutProps, type SignInMetadata, type SignInRequest, type SignInResponse, type SignInWithLoginTokenRequest, type Theme, type ThemeContextValue, type ThemeMode, ThemeProvider, ThemeToggle, type User, borderRadius, cn, darkTheme, debounce, elevation, extractErrorMessage, fontSize, fontWeight, formatDate, getHighlighter, lightTheme, lineHeight, spacing, throttle, tokens, transition, useNotification, useTheme, zIndex };
+export { AuthService, ConfirmDialog, type ConfirmDialogProps, type ErrorData, type GenerateLoginTokenRequest, type GenerateLoginTokenResponse, HttpClient, type HttpClientConfig, type HttpError, type HttpResponse, type IAuthService, type ISessionManager, LocalStorage, LoginCallbackPage, type LoginCallbackPageProps, type LogoutRequest, type LogoutResponse, type MenuItem, NotFoundPage, type Notification, type NotificationContextType, NotificationProvider, type NotificationProviderProps, ProtectedRoute, type ProtectedRouteProps, ReadmeViewer, type RefreshTokenRequest, type RefreshTokenResponse, type RequestConfig, type ResolvedThemeMode, SessionManager, SidebarHeader, type SidebarHeaderProps, SidebarLayout, type SidebarLayoutProps, type SignInMetadata, type SignInRequest, type SignInResponse, type SignInWithLoginTokenRequest, type Theme, type ThemeContextValue, type ThemeMode, ThemeProvider, ThemeToggle, type User, borderRadius, cn, darkTheme, debounce, elevation, extractErrorMessage, fontSize, fontWeight, formatDate, getHighlighter, lightTheme, lineHeight, spacing, throttle, tokens, transition, useNotification, useTheme, zIndex };

package/dist/index.js

@@ -14,6 +14,7 @@ var ContentCopyIcon = require('@mui/icons-material/ContentCopy');
 var CheckIcon = require('@mui/icons-material/Check');
 var shiki = require('shiki');
 var WarningAmberIcon = require('@mui/icons-material/WarningAmber');
+var HomeIcon = require('@mui/icons-material/Home');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -24,6 +25,7 @@ var rehypeKatex__default = /*#__PURE__*/_interopDefault(rehypeKatex);
 var ContentCopyIcon__default = /*#__PURE__*/_interopDefault(ContentCopyIcon);
 var CheckIcon__default = /*#__PURE__*/_interopDefault(CheckIcon);
 var WarningAmberIcon__default = /*#__PURE__*/_interopDefault(WarningAmberIcon);
+var HomeIcon__default = /*#__PURE__*/_interopDefault(HomeIcon);
 
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -814,6 +816,8 @@ var flattenMenuRoutes = (items) => {
 var SidebarLayoutRouterInner = ({
   menuItems,
   sidebarWidth = 250,
+  header,
+  footer,
   className = "",
   onMenuChange,
   style,
@@ -869,7 +873,7 @@ var SidebarLayoutRouterInner = ({
         ...style
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsxs(
           material.Drawer,
           {
             variant: "permanent",
@@ -882,18 +886,24 @@ var SidebarLayoutRouterInner = ({
                 position: "relative",
                 borderRight: "1px solid",
                 borderColor: "divider",
+                display: "flex",
+                flexDirection: "column",
                 ...sidebarStyle
               }
             },
-            children: /* @__PURE__ */ jsxRuntime.jsx(material.List, { sx: { p: 0 }, children: menuItems.filter((item) => item.label).map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-              RouterMenuItem,
-              {
-                item,
-                expanded,
-                onToggle: handleToggle
-              },
-              item.id
-            )) })
+            children: [
+              header && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { className: "sidebar-header", children: header }),
+              /* @__PURE__ */ jsxRuntime.jsx(material.List, { sx: { p: 0, flexGrow: 1, overflowY: "auto" }, children: menuItems.filter((item) => item.label).map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+                RouterMenuItem,
+                {
+                  item,
+                  expanded,
+                  onToggle: handleToggle
+                },
+                item.id
+              )) }),
+              footer && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { className: "sidebar-footer", children: footer })
+            ]
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -997,6 +1007,8 @@ var StateMenuItem = ({ item, selectedId, depth = 0, expanded, onToggle, onClick
 var SidebarLayoutWithState = ({
   menuItems,
   sidebarWidth = 250,
+  header,
+  footer,
   className = "",
   defaultSelected,
   onMenuChange,
@@ -1048,7 +1060,7 @@ var SidebarLayoutWithState = ({
         ...style
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsxs(
           material.Drawer,
           {
             variant: "permanent",
@@ -1061,20 +1073,26 @@ var SidebarLayoutWithState = ({
                 position: "relative",
                 borderRight: "1px solid",
                 borderColor: "divider",
+                display: "flex",
+                flexDirection: "column",
                 ...sidebarStyle
               }
             },
-            children: /* @__PURE__ */ jsxRuntime.jsx(material.List, { sx: { p: 0 }, children: menuItems.filter((item) => item.label).map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-              StateMenuItem,
-              {
-                item,
-                selectedId,
-                expanded,
-                onToggle: handleToggle,
-                onClick: handleMenuClick
-              },
-              item.id
-            )) })
+            children: [
+              header && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { className: "sidebar-header", children: header }),
+              /* @__PURE__ */ jsxRuntime.jsx(material.List, { sx: { p: 0, flexGrow: 1, overflowY: "auto" }, children: menuItems.filter((item) => item.label).map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+                StateMenuItem,
+                {
+                  item,
+                  selectedId,
+                  expanded,
+                  onToggle: handleToggle,
+                  onClick: handleMenuClick
+                },
+                item.id
+              )) }),
+              footer && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { className: "sidebar-footer", children: footer })
+            ]
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -1332,6 +1350,16 @@ var ConfirmDialog = ({
     ] })
   ] });
 };
+var SidebarHeader = ({
+  title,
+  homePath = "/",
+  showHome = true
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { padding: "16px", display: "flex", alignItems: "center", borderBottom: "1px solid rgba(255, 255, 255, 0.12)", gap: "8px" }, children: [
+    showHome && /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { component: reactRouterDom.Link, to: homePath, size: "small", sx: { color: "text.primary", ml: -1 }, children: /* @__PURE__ */ jsxRuntime.jsx(HomeIcon__default.default, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", sx: { fontWeight: "bold", color: "primary.main" }, children: title })
+  ] });
+};
 
 // src/utils/cn.ts
 function cn(...classes) {
@@ -1538,6 +1566,7 @@ exports.NotificationProvider = NotificationProvider;
 exports.ProtectedRoute = ProtectedRoute;
 exports.ReadmeViewer = ReadmeViewer_default;
 exports.SessionManager = SessionManager;
+exports.SidebarHeader = SidebarHeader;
 exports.SidebarLayout = SidebarLayout;
 exports.ThemeProvider = ThemeProvider;
 exports.ThemeToggle = ThemeToggle;