react-notify-sdk 1.0.22 → 1.0.24

package/dist/FadeWrapper.js

@@ -10,6 +10,6 @@ top: ${(props) => props.message?.position === 'top' ? '24px' : ''};
 bottom: ${(props) => props.message?.position === 'bottom' ? '24px' : ''};
 left: 50%;
 transform: translateX(-50%);
-z-index: 5;
+z-index: 5000;
 `;
 export default FadeWrapper;

package/dist/NotifyMessage.js

@@ -1,5 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const NotificationMessage = ({ message }) => {
+    function hexToRgba(hex, alpha) {
+        // Remove leading #
+        hex = hex.replace(/^#/, "");
+        // Expand shorthand form (#03F → #0033FF)
+        if (hex.length === 3) {
+            hex = hex.split("").map(x => x + x).join("");
+        }
+        // Parse into r, g, b
+        const bigint = parseInt(hex, 16);
+        const r = (bigint >> 16) & 255;
+        const g = (bigint >> 8) & 255;
+        const b = bigint & 255;
+        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    }
     return (_jsxs("div", { style: {
             width: '100%',
             paddingTop: '4px', // p-4 = 1rem
@@ -7,8 +21,10 @@ const NotificationMessage = ({ message }) => {
             paddingLeft: '12px',
             paddingRight: '12px',
             backgroundColor: message?.backgroundColor,
-            border: `1px solid ${message?.textColor}`, // Completed border style
-            borderRadius: "8px"
+            borderRadius: "8px",
+            borderWidth: "1px",
+            borderColor: `${hexToRgba(message.borderColor, 0.3)}`,
+            boxShadow: `0 10px 15px -3px ${hexToRgba(message.borderColor, 0.4)}, 0 4px 6px -4px ${hexToRgba(message.borderColor, 0.4)}`
         }, children: [_jsxs("div", { className: 'w-full flex flex-row', style: {
                     width: '100%',
                     display: 'flex',

package/dist/NotifyProvider.d.ts

@@ -1,2 +1,2 @@
 import { NotifyMessageProviderProps } from './types';
-export declare const NotifyProvider: ({ projectKey, onClear, }: NotifyMessageProviderProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const NotifyProvider: ({ projectKey, }: NotifyMessageProviderProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/NotifyProvider.js

@@ -19,7 +19,7 @@ const routeMatches = (pattern, path) => {
         return false;
     }
 };
-export const NotifyProvider = ({ projectKey, onClear,
+export const NotifyProvider = ({ projectKey,
 //className,
 //style,
 //disableDefaultStyles = true,
@@ -28,10 +28,6 @@ export const NotifyProvider = ({ projectKey, onClear,
     const [visible, setVisible] = useState(false);
     const location = useLocation();
     const device = useDeviceDetection();
-    const clearMessage = () => {
-        setVisible(false);
-        setMessage(null);
-    };
     useEffect(() => {
         if (typeof window === 'undefined')
             return; // Skip on server
@@ -75,13 +71,10 @@ export const NotifyProvider = ({ projectKey, onClear,
             }
         })
             .subscribe();
-        if (onClear) {
-            clearMessage;
-        }
         return () => {
             supabase.removeChannel(subscription);
         };
-    }, [location.pathname, projectKey, onClear]);
+    }, [location.pathname, projectKey]);
     if (!message)
         return null;
     //const defaultClasses = `absolute ${message?.position}-6 left-1/2 transform -translate-x-1/2 z-20 w-full md:w-[${message?.width}%] px-3 py-1 bg-[${message?.backgroundColor}] border border-[${message?.borderColor}] text-[${message?.textColor}] rounded-lg shadow`;

package/dist/types.d.ts

@@ -17,5 +17,4 @@ export type NotifyMessage = {
 };
 export type NotifyMessageProviderProps = {
     projectKey: string;
-    onClear: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-notify-sdk",
-  "version": "1.0.22",
+  "version": "1.0.24",
   "description": "SDK for displaying real-time route-specific messages in React apps",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -17,7 +17,8 @@
   "dependencies": {
     "@supabase/supabase-js": "^2.50.0",
     "clsx": "^2.1.1",
-    "goober": "^2.1.16"
+    "goober": "^2.1.16",
+    "lucide-react": "^0.541.0"
   },
   "devDependencies": {
     "@types/react": "^19.1.8",