ml-ui-lib 1.0.23 → 1.0.25

package/dist/components/Button/Button.d.ts

@@ -2,8 +2,12 @@ import React from "react";
 import "./Button.css";
 export interface ButtonProps {
     label: string;
-    variant?: "default" | "white" | "red" | "black" | "tranparent-white";
+    variant?: "default" | "white" | "red" | "black" | "transparent-white";
     onClick?: () => void;
     disabled?: boolean;
+    /** Optional custom colors */
+    bgColor?: string;
+    textColor?: string;
+    borderColor?: string;
 }
 export declare const Button: React.FC<ButtonProps>;

package/dist/components/Button/Button.js

@@ -1,5 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "./Button.css";
-export const Button = ({ label, variant = "default", onClick, disabled = false }) => {
-    return (_jsx("button", { className: `btn btn-${variant}`, onClick: onClick, disabled: disabled, children: label }));
+export const Button = ({ label, variant = "default", onClick, disabled = false, bgColor, textColor, borderColor }) => {
+    const customStyle = {
+        background: bgColor,
+        color: textColor,
+        border: borderColor ? `1px solid ${borderColor}` : undefined
+    };
+    return (_jsx("button", { className: `btn btn-${variant}`, onClick: onClick, disabled: disabled, style: customStyle, children: label }));
 };

package/dist/components/Footer/Footer.js

@@ -15,18 +15,18 @@ export const Footer = ({ footerItems, logoSrc = '', logoAlt = 'M Lhuillier Logo'
         { url: '/images/google-play.svg', link: 'https://play.google.com/store/apps/details?id=com.mlhuillier.mlwallet&pli=1' },
         { url: '/images/app-gallery.svg', link: 'https://appgallery.huawei.com/app/C102221791?source=qrCodeShare&referrer=PCWebAG&callType=SHARE&shareTo=qrcode&shareFrom=appmarket&reportEventLabel=appdetailpage' },
     ];
-    return (_jsxs("footer", { className: `footer ${className}`, style: { backgroundColor, color: textColor }, children: [_jsx("div", { className: "footer-container", children: _jsxs("div", { className: "footer-columns", children: [footerItems.map((group, i) => {
-                            // Format the display name
-                            const displayName = group.name
-                                .split('-')
-                                .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-                                .join(' & ');
-                            return (_jsxs("div", { className: `footer-column footer-column-${i + 1}`, children: [_jsx("h4", { className: "footer-title", children: displayName }), _jsx("ul", { className: "footer-links", children: group.items.map((item, idx) => (_jsx("li", { children: _jsx("a", { href: item.link, target: item.target || '_self', rel: item.target === '_blank' ? 'noopener noreferrer' : undefined, children: item.name }) }, idx))) })] }, i));
-                        }), _jsxs("div", { className: "footer-column socials-and-apps", children: [_jsxs("div", { className: "socials", children: [_jsx("h4", { children: "Social Media" }), _jsx("div", { className: "socials-items", children: [
-                                                { name: 'fb', link: 'https://www.facebook.com/mlhuillier.official/' },
-                                                { name: 'ig', link: 'https://www.instagram.com/mlhuillier_official/' },
-                                                { name: 'x', link: 'https://x.com/KaMLhuillier' },
-                                                { name: 'yt', link: 'https://www.youtube.com/user/MLhuillierInc' },
-                                            ].map((icon) => (_jsx("a", { href: icon.link, target: "_blank", rel: "noopener noreferrer", children: _jsx("img", { src: `/icons/${icon.name}.svg`, alt: icon.name }) }, icon.name))) })] }), _jsxs("div", { className: "apps", children: [_jsx("h4", { children: "Get the MCash App" }), _jsx("div", { className: "app-items", children: appLinksArr.map((item, index) => (_jsx("a", { href: item.link, children: _jsx("img", { src: item.url, alt: "App download" }) }, index))) })] })] })] }) }), _jsxs("div", { className: 'others', children: [_jsxs("div", { className: "footer-logo", children: [_jsx("a", { href: "/", children: _jsx("img", { src: logoSrc, alt: logoAlt, width: logoWidth, height: logoHeight, style: { display: 'block' } }) }), _jsx("span", { children: "FINANCIAL SERVICES, INC." }), _jsx("br", {}), _jsx("span", { children: "M.Lhuillier Financial Services, Inc. is regulated by the Bangko Sentral ng Pilipinas (BSP). For inquiries or assistance, you may reach us via:" }), _jsx("span", { children: _jsxs("ul", { children: [_jsx("li", { children: "Email: customercare@mlhuillier.com" }), _jsx("li", { children: "Or through our official Social media channels: consumeraaffairs@bsp.gov.ph" })] }) })] }), _jsx("div", { className: 'emblems', children: empblemArr.map((item, index) => (_jsxs("div", { className: "emblem-item", children: [_jsx("img", { src: item.url, alt: item.name }), _jsx("span", { children: item.name })] }, index))) })] }), _jsxs("div", { className: "footer-bottom", children: [_jsxs("p", { children: ["Copyright \u00A9 ", new Date().getFullYear(), " M.Lhuillier Financial Services, Inc."] }), " ", _jsx("p", { children: "All rights reserved." })] })] }));
+    return (_jsx("footer", { className: `footer ${className}`, style: { backgroundColor, color: textColor }, children: _jsxs("div", { style: { maxWidth: '1200px', margin: '0 auto' }, children: [_jsx("div", { className: "footer-container", children: _jsxs("div", { className: "footer-columns", children: [footerItems.map((group, i) => {
+                                // Format the display name
+                                const displayName = group.name
+                                    .split('-')
+                                    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+                                    .join(' & ');
+                                return (_jsxs("div", { className: `footer-column footer-column-${i + 1}`, children: [_jsx("h4", { className: "footer-title", children: displayName }), _jsx("ul", { className: "footer-links", children: group.items.map((item, idx) => (_jsx("li", { children: _jsx("a", { href: item.link, target: item.target || '_self', rel: item.target === '_blank' ? 'noopener noreferrer' : undefined, children: item.name }) }, idx))) })] }, i));
+                            }), _jsxs("div", { className: "footer-column socials-and-apps", children: [_jsxs("div", { className: "socials", children: [_jsx("h4", { children: "Social Media" }), _jsx("div", { className: "socials-items", children: [
+                                                    { name: 'fb', link: 'https://www.facebook.com/mlhuillier.official/' },
+                                                    { name: 'ig', link: 'https://www.instagram.com/mlhuillier_official/' },
+                                                    { name: 'x', link: 'https://x.com/KaMLhuillier' },
+                                                    { name: 'yt', link: 'https://www.youtube.com/user/MLhuillierInc' },
+                                                ].map((icon) => (_jsx("a", { href: icon.link, target: "_blank", rel: "noopener noreferrer", children: _jsx("img", { src: `/icons/${icon.name}.svg`, alt: icon.name }) }, icon.name))) })] }), _jsxs("div", { className: "apps", children: [_jsx("h4", { children: "Get the MCash App" }), _jsx("div", { className: "app-items", children: appLinksArr.map((item, index) => (_jsx("a", { href: item.link, children: _jsx("img", { src: item.url, alt: "App download" }) }, index))) })] })] })] }) }), _jsxs("div", { className: 'others', children: [_jsxs("div", { className: "footer-logo", children: [_jsx("a", { href: "/", children: _jsx("img", { src: logoSrc, alt: logoAlt, width: logoWidth, height: logoHeight, style: { display: 'block' } }) }), _jsx("span", { children: "FINANCIAL SERVICES, INC." }), _jsx("br", {}), _jsx("span", { children: "M.Lhuillier Financial Services, Inc. is regulated by the Bangko Sentral ng Pilipinas (BSP). For inquiries or assistance, you may reach us via:" }), _jsx("span", { children: _jsxs("ul", { children: [_jsx("li", { children: "Email: customercare@mlhuillier.com" }), _jsx("li", { children: "Or through our official Social media channels: consumeraaffairs@bsp.gov.ph" })] }) })] }), _jsx("div", { className: 'emblems', children: empblemArr.map((item, index) => (_jsxs("div", { className: "emblem-item", children: [_jsx("img", { src: item.url, alt: item.name }), _jsx("span", { children: item.name })] }, index))) })] }), _jsxs("div", { className: "footer-bottom", children: [_jsxs("p", { children: ["Copyright \u00A9 ", new Date().getFullYear(), " M.Lhuillier Financial Services, Inc."] }), " ", _jsx("p", { children: "All rights reserved." })] })] }) }));
 };
 export default Footer;

package/dist/components/Navbar/Navbar.css

@@ -10,8 +10,8 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    /* max-width: 1200px; */
-    margin: 0 50px;
+    max-width: 1200px;
+    margin: 0 auto;
 }
 
 .navbar-logo img {
@@ -43,17 +43,17 @@
 
 .navbar-links a:hover {
     transition: all 0.5s ease;
-    background: #ff0000;
-    color: #fff;
+    background: #fff;
+    color: #ff0000;
 }
 
 .navbar-links a.active {
     color: #ff0000;
 }
 
-.navbar-links a.active:hover {
+/* .navbar-links a.active:hover {
     color: #fff;
-}
+} */
 
 
 /* Burger Icon */
@@ -131,6 +131,7 @@
     }
 
     .navbar-container {
+        margin: 0 20px;
         padding: 1rem 1.5rem;
         justify-content: space-between;
     }
@@ -166,6 +167,16 @@
         font-size: 1.2rem;
     }
 
+    .navbar-links a:hover {
+        background: #ff0000;
+        color: #fff;
+    }
+
+    .navbar-links a.active:hover {
+        color: #fff;
+    }
+
+
     /* ⭐ MOBILE LOGIN FIXED AT BOTTOM */
     .mobile-login-btn {
         position: absolute;

package/dist/components/Navbar/Navbar.js

@@ -6,6 +6,7 @@ import { SlidingPanel } from '../SlidingPanel/SlidingPanel';
 export const Navbar = ({ siteUrl, items, logoSrc = '', logoAlt = 'M Lhuillier Logo', logoWidth = 220, logoHeight = 40, className = '', login = false, logedinData = null, loginContent, otherContent, onClose, }) => {
     const [menuOpen, setMenuOpen] = useState(false);
     const [showLogin, setShowLogin] = useState(false);
+    const [isClosing, setIsClosing] = useState(false);
     const [isMobile, setIsMobile] = useState(false);
     const [currentPath, setCurrentPath] = useState(null);
     useEffect(() => {
@@ -16,11 +17,18 @@ export const Navbar = ({ siteUrl, items, logoSrc = '', logoAlt = 'M Lhuillier Lo
         return () => window.removeEventListener('resize', handleResize);
     }, []);
     const toggleMenu = () => setMenuOpen((prev) => !prev);
-    const toggleLogin = () => setShowLogin((prev) => !prev);
+    const toggleLogin = () => {
+        setMenuOpen(false);
+        setShowLogin((prev) => !prev);
+    };
     const handleInternalClose = () => {
-        setShowLogin(false);
-        document.body.style.overflow = '';
-        onClose?.();
+        setIsClosing(true);
+        setTimeout(() => {
+            setShowLogin(false);
+            setIsClosing(false);
+            document.body.style.overflow = '';
+            onClose?.();
+        }, 350); // match CSS transition
     };
     return (_jsxs(_Fragment, { children: [_jsx("nav", { className: `navbar ${className}`, children: _jsxs("div", { className: "navbar-container", children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: '10px', alignItems: 'center' }, children: [_jsx("div", { className: "navbar-logo", children: _jsx("a", { href: siteUrl, className: "navbar-brand", children: _jsx("img", { src: logoSrc, alt: logoAlt, width: logoWidth, height: logoHeight, style: { cursor: 'pointer', display: 'block' } }) }) }), _jsxs("div", { className: `navbar-links ${menuOpen ? 'open' : ''}`, children: [_jsx("div", { className: 'nav-items', children: items.map((item) => {
                                                 const linkPath = new URL(item.link, 'https://dummybase').pathname;
@@ -31,6 +39,6 @@ export const Navbar = ({ siteUrl, items, logoSrc = '', logoAlt = 'M Lhuillier Lo
                                                             .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
                                                             .join(' & ')
                                                         : item.name }, item.name));
-                                            }) }), _jsx("button", { className: "mobile-login-btn", onClick: toggleLogin, children: "Login" })] })] }), _jsxs("div", { className: "navbar-right", children: [_jsxs("button", { className: `burger ${menuOpen ? 'active' : ''}`, onClick: toggleMenu, "aria-label": "Toggle menu", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }), !isMobile && login && !logedinData && (_jsx("span", { className: "login-btn", onClick: toggleLogin, children: "Login" }))] })] }) }), login && !logedinData && (_jsx(_Fragment, { children: !isMobile ? (showLogin && (_jsxs(_Fragment, { children: [_jsx("div", { className: "overlay-side-content", children: otherContent }), _jsx("div", { className: "navbar-login-panel", children: _jsxs(SlidingPanel, { isOpen: showLogin, width: "400px", height: "100%", position: "right", closeOnOverlayClick: false, onClose: handleInternalClose, children: [_jsx("div", { className: "navbar-panel-header" }), _jsx("div", { className: "navbar-panel-content", children: loginContent || _jsx("p", { children: "Login form goes here" }) })] }) })] }))) : (_jsx("div", { className: "navbar-login-panel", children: _jsxs(SlidingPanel, { isOpen: showLogin, height: "70%", position: "bottom", onClose: handleInternalClose, children: [_jsx("div", { className: "navbar-panel-header" }), _jsx("div", { className: "navbar-panel-content", children: loginContent || _jsx("p", { children: "Login form goes here" }) })] }) })) }))] }));
+                                            }) }), _jsx("button", { className: "mobile-login-btn", onClick: toggleLogin, children: "Login" })] })] }), _jsxs("div", { className: "navbar-right", children: [_jsxs("button", { className: `burger ${menuOpen ? 'active' : ''}`, onClick: toggleMenu, "aria-label": "Toggle menu", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }), !isMobile && login && !logedinData && (_jsx("span", { className: "login-btn", onClick: toggleLogin, children: "Login" }))] })] }) }), login && !logedinData && (_jsx(_Fragment, { children: !isMobile ? (showLogin && (_jsxs(_Fragment, { children: [_jsx("div", { className: "overlay-side-content", children: otherContent }), _jsx("div", { className: "navbar-login-panel", children: _jsxs(SlidingPanel, { isOpen: showLogin && !isClosing, width: "400px", height: "100%", position: "right", closeOnOverlayClick: false, onClose: handleInternalClose, children: [_jsx("div", { className: "navbar-panel-header" }), _jsx("div", { className: "navbar-panel-content", children: loginContent || _jsx("p", { children: "Login form goes here" }) })] }) })] }))) : (_jsx("div", { className: "navbar-login-panel", children: _jsxs(SlidingPanel, { isOpen: showLogin, height: "70%", position: "bottom", onClose: handleInternalClose, children: [_jsx("div", { className: "navbar-panel-header" }), _jsx("div", { className: "navbar-panel-content", children: loginContent || _jsx("p", { children: "Login form goes here" }) })] }) })) }))] }));
 };
 export default Navbar;

package/dist/components/SlidingPanel/SlidingPanel.css

@@ -145,13 +145,14 @@
     font-size: 20px;
     line-height: 1;
     cursor: pointer;
-    padding: 5px 15px;
+    padding: 5px 10px;
     border-radius: 6px;
     color: #111827;
+    margin-right: 7px;
 }
 
 .spb-close-btn:hover {
-    background: rgba(0, 0, 0, 0.03);
+    background: rgb(255 0 0 / 27%);
 }
 
 /* Handle (mobile) */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ml-ui-lib",
-  "version": "1.0.23",
+  "version": "1.0.25",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",