@gofreego/tsutils 0.1.5 → 0.1.7

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import React, { ReactNode, CSSProperties } from 'react';
-import { IconButtonProps } from '@mui/material';
+import { AlertColor, IconButtonProps } from '@mui/material';
 import { Highlighter } from 'shiki';
 
 /**
@@ -122,6 +122,77 @@ interface ReadmeViewerProps {
 }
 declare const ReadmeViewer: React.FC<ReadmeViewerProps>;
 
+/**
+ * Notification type representing a toast message
+ */
+interface Notification {
+    id: string;
+    message: string;
+    type: AlertColor;
+    duration?: number;
+}
+/**
+ * Context interface for notification management
+ */
+interface NotificationContextType {
+    showNotification: (message: string, type: AlertColor, duration?: number) => void;
+    success: (message: string, duration?: number) => void;
+    error: (message: string, duration?: number) => void;
+    warning: (message: string, duration?: number) => void;
+    info: (message: string, duration?: number) => void;
+}
+interface NotificationProviderProps {
+    /** Components to wrap with notification context */
+    children: ReactNode;
+    /** Default duration for notifications in milliseconds. Defaults to 6000ms */
+    defaultDuration?: number;
+    /** Maximum number of notifications to show at once. Defaults to 3 */
+    maxNotifications?: number;
+    /** Position of the notifications. Defaults to top-right */
+    anchorOrigin?: {
+        vertical: 'top' | 'bottom';
+        horizontal: 'left' | 'center' | 'right';
+    };
+}
+/**
+ * NotificationProvider manages toast notifications using Material-UI Snackbar and Alert.
+ * Provides methods to show success, error, warning, and info notifications.
+ *
+ * @example
+ * ```tsx
+ * <NotificationProvider>
+ *   <App />
+ * </NotificationProvider>
+ * ```
+ *
+ * // In a component:
+ * ```tsx
+ * const { success, error } = useNotification()
+ * success('Operation completed!')
+ * error('Something went wrong')
+ * ```
+ */
+declare const NotificationProvider: React.FC<NotificationProviderProps>;
+/**
+ * Hook to access notification context
+ * Must be used within a NotificationProvider
+ *
+ * @example
+ * ```tsx
+ * const { success, error, warning, info } = useNotification()
+ *
+ * // Show notifications
+ * success('Data saved successfully!')
+ * error('Failed to save data')
+ * warning('This action cannot be undone')
+ * info('New update available')
+ *
+ * // With custom duration
+ * success('Quick message', 3000)
+ * ```
+ */
+declare const useNotification: () => NotificationContextType;
+
 /**
  * Theme mode options
  * - 'light': Always use light theme
@@ -274,9 +345,14 @@ interface ThemeToggleProps extends Omit<IconButtonProps, 'onClick'> {
     lightModeTooltip?: string;
     /**
      * Tooltip text for dark mode
-     * @default "Switch to light mode"
+     * @default "Switch to system mode"
      */
     darkModeTooltip?: string;
+    /**
+     * Tooltip text for system mode
+     * @default "Switch to light mode"
+     */
+    systemModeTooltip?: string;
     /**
      * Whether to show tooltip
      * @default true
@@ -284,8 +360,7 @@ interface ThemeToggleProps extends Omit<IconButtonProps, 'onClick'> {
     showTooltip?: boolean;
 }
 /**
- * A round button component for toggling between light and dark themes
- * Note: Toggling skips 'system' mode and switches directly between light and dark
+ * A round button component for toggling between light, dark, and system themes
  */
 declare const ThemeToggle: React.FC<ThemeToggleProps>;
 
@@ -562,4 +637,4 @@ declare class PermissionManager {
     static hasPermission(permission: string): boolean;
 }
 
-export { type AuthContextType, AuthProvider, type AuthProviderProps, HttpClient, type HttpClientConfig, type HttpResponse, LocalStorage, type MenuItem, PermissionManager, ReadmeViewer, type RequestConfig, type ResolvedThemeMode, SidebarLayout, type SidebarLayoutProps, type Theme, type ThemeContextValue, type ThemeMode, ThemeProvider, ThemeToggle, borderRadius, cn, darkTheme, debounce, elevation, fontSize, fontWeight, formatDate, getHighlighter, lightTheme, lineHeight, spacing, throttle, tokens, transition, useAuth, useTheme, zIndex };
+export { type AuthContextType, AuthProvider, type AuthProviderProps, HttpClient, type HttpClientConfig, type HttpResponse, LocalStorage, type MenuItem, type Notification, type NotificationContextType, NotificationProvider, type NotificationProviderProps, PermissionManager, ReadmeViewer, type RequestConfig, type ResolvedThemeMode, SidebarLayout, type SidebarLayoutProps, type Theme, type ThemeContextValue, type ThemeMode, ThemeProvider, ThemeToggle, borderRadius, cn, darkTheme, debounce, elevation, fontSize, fontWeight, formatDate, getHighlighter, lightTheme, lineHeight, spacing, throttle, tokens, transition, useAuth, useNotification, useTheme, zIndex };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode, CSSProperties } from 'react';
-import { IconButtonProps } from '@mui/material';
+import { AlertColor, IconButtonProps } from '@mui/material';
 import { Highlighter } from 'shiki';
 
 /**
@@ -122,6 +122,77 @@ interface ReadmeViewerProps {
 }
 declare const ReadmeViewer: React.FC<ReadmeViewerProps>;
 
+/**
+ * Notification type representing a toast message
+ */
+interface Notification {
+    id: string;
+    message: string;
+    type: AlertColor;
+    duration?: number;
+}
+/**
+ * Context interface for notification management
+ */
+interface NotificationContextType {
+    showNotification: (message: string, type: AlertColor, duration?: number) => void;
+    success: (message: string, duration?: number) => void;
+    error: (message: string, duration?: number) => void;
+    warning: (message: string, duration?: number) => void;
+    info: (message: string, duration?: number) => void;
+}
+interface NotificationProviderProps {
+    /** Components to wrap with notification context */
+    children: ReactNode;
+    /** Default duration for notifications in milliseconds. Defaults to 6000ms */
+    defaultDuration?: number;
+    /** Maximum number of notifications to show at once. Defaults to 3 */
+    maxNotifications?: number;
+    /** Position of the notifications. Defaults to top-right */
+    anchorOrigin?: {
+        vertical: 'top' | 'bottom';
+        horizontal: 'left' | 'center' | 'right';
+    };
+}
+/**
+ * NotificationProvider manages toast notifications using Material-UI Snackbar and Alert.
+ * Provides methods to show success, error, warning, and info notifications.
+ *
+ * @example
+ * ```tsx
+ * <NotificationProvider>
+ *   <App />
+ * </NotificationProvider>
+ * ```
+ *
+ * // In a component:
+ * ```tsx
+ * const { success, error } = useNotification()
+ * success('Operation completed!')
+ * error('Something went wrong')
+ * ```
+ */
+declare const NotificationProvider: React.FC<NotificationProviderProps>;
+/**
+ * Hook to access notification context
+ * Must be used within a NotificationProvider
+ *
+ * @example
+ * ```tsx
+ * const { success, error, warning, info } = useNotification()
+ *
+ * // Show notifications
+ * success('Data saved successfully!')
+ * error('Failed to save data')
+ * warning('This action cannot be undone')
+ * info('New update available')
+ *
+ * // With custom duration
+ * success('Quick message', 3000)
+ * ```
+ */
+declare const useNotification: () => NotificationContextType;
+
 /**
  * Theme mode options
  * - 'light': Always use light theme
@@ -274,9 +345,14 @@ interface ThemeToggleProps extends Omit<IconButtonProps, 'onClick'> {
     lightModeTooltip?: string;
     /**
      * Tooltip text for dark mode
-     * @default "Switch to light mode"
+     * @default "Switch to system mode"
      */
     darkModeTooltip?: string;
+    /**
+     * Tooltip text for system mode
+     * @default "Switch to light mode"
+     */
+    systemModeTooltip?: string;
     /**
      * Whether to show tooltip
      * @default true
@@ -284,8 +360,7 @@ interface ThemeToggleProps extends Omit<IconButtonProps, 'onClick'> {
     showTooltip?: boolean;
 }
 /**
- * A round button component for toggling between light and dark themes
- * Note: Toggling skips 'system' mode and switches directly between light and dark
+ * A round button component for toggling between light, dark, and system themes
  */
 declare const ThemeToggle: React.FC<ThemeToggleProps>;
 
@@ -562,4 +637,4 @@ declare class PermissionManager {
     static hasPermission(permission: string): boolean;
 }
 
-export { type AuthContextType, AuthProvider, type AuthProviderProps, HttpClient, type HttpClientConfig, type HttpResponse, LocalStorage, type MenuItem, PermissionManager, ReadmeViewer, type RequestConfig, type ResolvedThemeMode, SidebarLayout, type SidebarLayoutProps, type Theme, type ThemeContextValue, type ThemeMode, ThemeProvider, ThemeToggle, borderRadius, cn, darkTheme, debounce, elevation, fontSize, fontWeight, formatDate, getHighlighter, lightTheme, lineHeight, spacing, throttle, tokens, transition, useAuth, useTheme, zIndex };
+export { type AuthContextType, AuthProvider, type AuthProviderProps, HttpClient, type HttpClientConfig, type HttpResponse, LocalStorage, type MenuItem, type Notification, type NotificationContextType, NotificationProvider, type NotificationProviderProps, PermissionManager, ReadmeViewer, type RequestConfig, type ResolvedThemeMode, SidebarLayout, type SidebarLayoutProps, type Theme, type ThemeContextValue, type ThemeMode, ThemeProvider, ThemeToggle, borderRadius, cn, darkTheme, debounce, elevation, fontSize, fontWeight, formatDate, getHighlighter, lightTheme, lineHeight, spacing, throttle, tokens, transition, useAuth, useNotification, useTheme, zIndex };

package/dist/index.js

@@ -495,6 +495,82 @@ var ReadmeViewer = ({
   ) });
 };
 var ReadmeViewer_default = ReadmeViewer;
+var NotificationContext = react.createContext(void 0);
+var NotificationProvider = ({
+  children,
+  defaultDuration = 6e3,
+  maxNotifications = 3,
+  anchorOrigin = { vertical: "top", horizontal: "right" }
+}) => {
+  const [notifications, setNotifications] = react.useState([]);
+  const showNotification = react.useCallback((message, type, duration = defaultDuration) => {
+    const id = `${Date.now()}-${Math.random()}`;
+    const newNotification = { id, message, type, duration };
+    setNotifications((prev) => {
+      const updated = [...prev, newNotification];
+      if (updated.length > maxNotifications) {
+        return updated.slice(updated.length - maxNotifications);
+      }
+      return updated;
+    });
+  }, [defaultDuration, maxNotifications]);
+  const handleClose = react.useCallback((id) => {
+    setNotifications((prev) => prev.filter((notif) => notif.id !== id));
+  }, []);
+  const success = react.useCallback((message, duration) => {
+    showNotification(message, "success", duration);
+  }, [showNotification]);
+  const error = react.useCallback((message, duration) => {
+    showNotification(message, "error", duration);
+  }, [showNotification]);
+  const warning = react.useCallback((message, duration) => {
+    showNotification(message, "warning", duration);
+  }, [showNotification]);
+  const info = react.useCallback((message, duration) => {
+    showNotification(message, "info", duration);
+  }, [showNotification]);
+  const contextValue = {
+    showNotification,
+    success,
+    error,
+    warning,
+    info
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(NotificationContext.Provider, { value: contextValue, children: [
+    children,
+    notifications.map((notification, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      material.Snackbar,
+      {
+        open: true,
+        autoHideDuration: notification.duration,
+        onClose: () => handleClose(notification.id),
+        anchorOrigin,
+        style: {
+          marginTop: index * 70
+          // Stack notifications vertically
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          material.Alert,
+          {
+            onClose: () => handleClose(notification.id),
+            severity: notification.type,
+            variant: "filled",
+            sx: { width: "100%" },
+            children: notification.message
+          }
+        )
+      },
+      notification.id
+    ))
+  ] });
+};
+var useNotification = () => {
+  const context = react.useContext(NotificationContext);
+  if (!context) {
+    throw new Error("useNotification must be used within a NotificationProvider");
+  }
+  return context;
+};
 
 // src/theme/tokens.ts
 var tokens_exports = {};
@@ -922,9 +998,12 @@ var ThemeProvider = ({
     setCustomTheme(newTheme);
   }, []);
   const toggleTheme = react.useCallback(() => {
-    const newMode = resolvedThemeMode === "light" ? "dark" : "light";
-    setThemeModeState(newMode);
-  }, [resolvedThemeMode]);
+    setThemeModeState((prevMode) => {
+      if (prevMode === "light") return "dark";
+      if (prevMode === "dark") return "system";
+      return "light";
+    });
+  }, []);
   const contextValue = react.useMemo(() => ({
     theme,
     themeMode,
@@ -972,12 +1051,37 @@ var useTheme = () => {
 };
 var ThemeToggle = ({
   lightModeTooltip = "Switch to dark mode",
-  darkModeTooltip = "Switch to light mode",
+  darkModeTooltip = "Switch to system theme",
+  systemModeTooltip = "Switch to light theme",
   showTooltip = true,
   sx,
   ...props
 }) => {
-  const { resolvedThemeMode, toggleTheme } = useTheme();
+  const { themeMode, toggleTheme } = useTheme();
+  const getIcon = () => {
+    switch (themeMode) {
+      case "light":
+        return /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.LightMode, {});
+      case "dark":
+        return /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.DarkMode, {});
+      case "system":
+        return /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.BrightnessAuto, {});
+      default:
+        return /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.BrightnessAuto, {});
+    }
+  };
+  const getTooltip = () => {
+    switch (themeMode) {
+      case "light":
+        return lightModeTooltip;
+      case "dark":
+        return darkModeTooltip;
+      case "system":
+        return systemModeTooltip;
+      default:
+        return lightModeTooltip;
+    }
+  };
   const button = /* @__PURE__ */ jsxRuntime.jsx(
     material.IconButton,
     {
@@ -988,20 +1092,13 @@ var ThemeToggle = ({
         ...sx
       },
       ...props,
-      children: resolvedThemeMode === "light" ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.LightMode, {}) : /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.DarkMode, {})
+      children: getIcon()
     }
   );
   if (!showTooltip) {
     return button;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    material.Tooltip,
-    {
-      title: resolvedThemeMode === "light" ? lightModeTooltip : darkModeTooltip,
-      arrow: true,
-      children: button
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: getTooltip(), arrow: true, children: button });
 };
 
 // src/http/HttpClient.ts
@@ -1277,6 +1374,7 @@ PermissionManager.cachedPermissions = null;
 exports.AuthProvider = AuthProvider;
 exports.HttpClient = HttpClient;
 exports.LocalStorage = LocalStorage;
+exports.NotificationProvider = NotificationProvider;
 exports.PermissionManager = PermissionManager;
 exports.ReadmeViewer = ReadmeViewer_default;
 exports.SidebarLayout = SidebarLayout;
@@ -1298,6 +1396,7 @@ exports.throttle = throttle;
 exports.tokens = tokens_exports;
 exports.transition = transition;
 exports.useAuth = useAuth;
+exports.useNotification = useNotification;
 exports.useTheme = useTheme;
 exports.zIndex = zIndex;
 //# sourceMappingURL=index.js.map