ml-ui-lib 1.0.46 → 1.0.48

package/dist/components/Navbar/Navbar.css

@@ -561,7 +561,7 @@
 
     background: white;
     /* important so it covers */
-    border-radius: 20px;
+    /* border-radius: 20px; */
 
     transition: width 0.35s ease;
     z-index: 10;
@@ -581,16 +581,18 @@
     padding: 0 10px;
     opacity: 0;
     transition: opacity 0.2s ease;
-    border: solid #f3f3f3 1px;
-    padding: 10px 10px;
+    border: solid #9b9b9ba5 1px;
+    padding: 10px 35px 10px 10px;
     font-size: 15px;
     border-radius: 15px;
+    pointer-events: auto;
     /* margin-left: -15px; */
 }
 
 .navbar-search-container.open .navbar-search-input {
     opacity: 1;
     margin-left: -15px;
+    margin-right: -30px;
 }
 
 .navbar-search-btn {
@@ -601,8 +603,9 @@
     align-items: center;
     justify-content: center;
     padding: 5px;
-    margin-left: -15px !important;
+    margin-left: -35px !important;
     color: #fff;
+    z-index: 2;
 }
 
 .navbar-search-container.open .navbar-search-btn {
@@ -622,6 +625,7 @@
     display: flex;
     align-items: center;
     gap: 10px;
+    padding-right: 40px;
     transition: opacity 0.25s ease, transform 0.25s ease;
 }
 
@@ -641,7 +645,7 @@
 /* Search expands more when active */
 .navbar-search-container.open {
     width: 350px;
-    border-left: solid #f3f3f3 1px;
+    border-left: solid #999 1px;
     /* increase if needed */
 }
 

package/dist/components/Navbar/Navbar.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import './Navbar.css';
 import { SlidingPanel } from '../SlidingPanel/SlidingPanel';
 export const Navbar = ({ siteUrl, items, products, logoSrc = '', logoAlt = 'Logo', logoWidth = 220, logoHeight = 40, className = '', login = false, logedinData = null, loginContent, otherContent, onClose, }) => {
@@ -14,6 +14,8 @@ export const Navbar = ({ siteUrl, items, products, logoSrc = '', logoAlt = 'Logo
     const [lastScrollY, setLastScrollY] = useState(0);
     const [searchOpen, setSearchOpen] = useState(false);
     const [searchQuery, setSearchQuery] = useState('');
+    const searchContainerRef = useRef(null);
+    const hasValue = searchQuery.trim().length > 0;
     const handleSearch = () => {
         if (!searchQuery.trim())
             return;
@@ -89,6 +91,28 @@ export const Navbar = ({ siteUrl, items, products, logoSrc = '', logoAlt = 'Logo
         window.addEventListener('scroll', handleScroll, { passive: true });
         return () => window.removeEventListener('scroll', handleScroll);
     }, [lastScrollY, menuOpen]);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (searchContainerRef.current &&
+                !searchContainerRef.current.contains(event.target)) {
+                setSearchOpen(false);
+            }
+        };
+        if (searchOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [searchOpen]);
+    useEffect(() => {
+        const handleEsc = (e) => {
+            if (e.key === 'Escape')
+                setSearchOpen(false);
+        };
+        document.addEventListener('keydown', handleEsc);
+        return () => document.removeEventListener('keydown', handleEsc);
+    }, []);
     return (_jsxs(_Fragment, { children: [_jsx("nav", { className: `navbar ${hideNavbar ? 'navbar--hidden' : ''} ${className}`, children: _jsxs("div", { className: "navbar-container", 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", { style: { display: 'flex', flexDirection: 'row', gap: '10px', alignItems: 'center' }, children: [_jsxs("div", { className: "navbar-actions", children: [_jsx("div", { className: `navbar-links ${menuOpen ? 'open' : ''}`, children: _jsx("div", { className: "nav-items", children: items.map(item => {
                                                     const hasSubLinks = item.subLinks && item.subLinks.length > 0;
                                                     const linkPath = new URL(item.link || '#', 'https://dummybase').pathname;
@@ -111,10 +135,21 @@ export const Navbar = ({ siteUrl, items, products, logoSrc = '', logoAlt = 'Logo
                                                                                     }, children: _jsx("div", { className: 'navbar-services-item', children: _jsx("span", { style: {
                                                                                                 textAlign: 'center'
                                                                                             }, children: product.name }) }) }, product.name))) }) })] }) }))] }, item.name));
-                                                }) }) }), isMobile && login && !logedinData && (_jsx("div", { className: 'navbar-item', style: { background: '#ffffff' }, children: _jsx("button", { className: "mobile-login-btn", onClick: toggleLogin, children: "Login" }) }))] }), _jsxs("div", { className: `navbar-right ${searchOpen ? 'search-active' : ''}`, children: [_jsxs("button", { className: `burger ${menuOpen ? 'active' : ''}`, onClick: toggleMenu, children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }), !isMobile && login && !logedinData && (_jsx("span", { className: "login-btn", onClick: toggleLogin, children: "Login" })), _jsxs("div", { className: `navbar-search-container ${searchOpen ? 'open' : ''}`, children: [_jsx("input", { type: "text", className: "navbar-search-input", placeholder: "Search...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), onKeyDown: (e) => {
+                                                }) }) }), isMobile && login && !logedinData && (_jsx("div", { className: 'navbar-item', style: { background: '#ffffff' }, children: _jsx("button", { className: "mobile-login-btn", onClick: toggleLogin, children: "Login" }) }))] }), _jsxs("div", { className: `navbar-right ${searchOpen ? 'search-active' : ''}`, children: [_jsxs("button", { className: `burger ${menuOpen ? 'active' : ''}`, onClick: toggleMenu, children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }), !isMobile && login && !logedinData && (_jsx("span", { className: "login-btn", onClick: toggleLogin, children: "Login" })), _jsxs("div", { ref: searchContainerRef, className: `navbar-search-container ${searchOpen ? 'open' : ''}`, children: [_jsx("input", { type: "text", className: "navbar-search-input", placeholder: "Search...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), onKeyDown: (e) => {
                                                         if (e.key === 'Enter') {
                                                             handleSearch();
                                                         }
-                                                    } }), _jsx("button", { className: "navbar-search-btn", onClick: () => setSearchOpen(prev => !prev), children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "red", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("circle", { cx: "11", cy: "11", r: "8" }), _jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })] }) })] })] })] })] }) }), 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("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("button", { className: `navbar-search-btn ${searchOpen && hasValue ? 'active' : ''}`, onClick: () => {
+                                                        if (!searchOpen) {
+                                                            setSearchOpen(true);
+                                                            return;
+                                                        }
+                                                        if (hasValue) {
+                                                            handleSearch(); // trigger search
+                                                        }
+                                                        else {
+                                                            setSearchOpen(false); // close if empty
+                                                        }
+                                                    }, children: searchOpen && hasValue ? (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "red", strokeWidth: "2", children: [_jsx("circle", { cx: "11", cy: "11", r: "8" }), _jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })] })) : (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "red", strokeWidth: "2", children: [_jsx("circle", { cx: "11", cy: "11", r: "8" }), _jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })] })) })] })] })] })] }) }), 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("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 })] }) })) }))] }));
 };
 export default Navbar;

package/dist/components/SlidingPanel/SlidingPanel.css

@@ -119,10 +119,10 @@
 .spb-header {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: end;
     padding: 12px 16px;
-    border-bottom: 1px solid #f1f1f1;
-    min-height: 48px;
+    /* border-bottom: 1px solid #f1f1f1; */
+    min-height: 0px;
 }
 
 .spb-title {
@@ -136,19 +136,30 @@
     padding: 16px;
     overflow-y: auto;
     flex: 1 1 auto;
+
+    /* ✅ hide scrollbar (Firefox) */
+    scrollbar-width: none;
+
+    /* ✅ prevent layout shift on some browsers */
+    -ms-overflow-style: none;
+}
+
+/* ✅ Chrome, Safari, Edge */
+.spb-body::-webkit-scrollbar {
+    display: none;
 }
 
 /* Desktop close button */
 .spb-close-btn {
     background: none;
     border: none;
-    font-size: 20px;
+    font-size: 25px;
     line-height: 1;
     cursor: pointer;
-    padding: 5px 10px;
+    padding: 30px 0px 25px 10px;
     border-radius: 6px;
     color: #111827;
-    margin-right: 7px;
+    margin-right: 0px;
 }
 
 .spb-close-btn:hover {
@@ -188,9 +199,9 @@
         cursor: grabbing;
     }
 
-    .spb-close-btn {
+    /* .spb-close-btn {
         display: none;
-    }
+    } */
 
     /* ✅ Mobile top-left close */
     .spb-mobile-close-btn {

package/dist/components/SlidingPanel/SlidingPanel.d.ts

@@ -6,7 +6,6 @@ export interface SlidingPanelProps {
     children: React.ReactNode;
     height?: string;
     width?: string;
-    title?: string;
     closeOnOverlayClick?: boolean;
     position?: "bottom" | "top" | "left" | "right";
 }

package/dist/components/SlidingPanel/SlidingPanel.js

@@ -2,13 +2,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import "./SlidingPanel.css";
-export const SlidingPanel = ({ isOpen, onClose, children, height = "80%", width = "100%", title, closeOnOverlayClick = true, position = "bottom", }) => {
+export const SlidingPanel = ({ isOpen, onClose, children, height = "80%", width = "100%", closeOnOverlayClick = true, position = "bottom", }) => {
     const [visible, setVisible] = useState(false);
     const [animateOpen, setAnimateOpen] = useState(false);
     const panelRef = useRef(null);
     const headerRef = useRef(null);
     const handleRef = useRef(null);
-    // Open/close animation
+    let startPos = 0;
+    let currentPos = 0;
+    let isDragging = false;
+    const isVertical = position === "bottom" || position === "top";
+    // OPEN / CLOSE animation
     useEffect(() => {
         if (isOpen) {
             setVisible(true);
@@ -17,7 +21,6 @@ export const SlidingPanel = ({ isOpen, onClose, children, height = "80%", width
             return () => clearTimeout(id);
         }
         else {
-            // Slide out according to position
             if (panelRef.current) {
                 switch (position) {
                     case "bottom":
@@ -35,29 +38,38 @@ export const SlidingPanel = ({ isOpen, onClose, children, height = "80%", width
                 }
             }
             setAnimateOpen(false);
-            // Keep in DOM until slide completes
             const id = setTimeout(() => setVisible(false), 320);
             document.body.style.overflow = "";
             return () => clearTimeout(id);
         }
     }, [isOpen, position]);
-    // closing
+    // DRAG LOGIC
     useEffect(() => {
         const panel = panelRef.current;
         const handle = handleRef.current;
         const header = headerRef.current;
         if (!panel)
             return;
-        const dragAreaElements = [handle, header].filter(Boolean);
-        let startPos = 0;
-        let currentPos = 0;
-        let isDragging = false;
-        // Determine vertical or horizontal drag based on position
-        const isVertical = position === "bottom" || position === "top";
-        const isHorizontal = position === "left" || position === "right";
-        const getDiff = (current) => {
-            return isVertical ? current - startPos : current - startPos;
+        // ✅ CHANGE 1: whole panel is draggable
+        const dragAreaElements = [panel].filter(Boolean);
+        // ✅ NEW: scroll + boundary detection
+        const body = panel.querySelector(".spb-body");
+        let isScrollActive = false;
+        const isAtBoundary = () => {
+            if (!body)
+                return true;
+            const atTop = body.scrollTop <= 0;
+            const atBottom = body.scrollTop + body.clientHeight >= body.scrollHeight - 1;
+            return atTop || atBottom;
         };
+        body?.addEventListener("scroll", () => {
+            isScrollActive = true;
+            clearTimeout(body._scrollTimer);
+            body._scrollTimer = setTimeout(() => {
+                isScrollActive = false;
+            }, 80);
+        });
+        const getDiff = (current) => isVertical ? current - startPos : current - startPos;
         const getTransform = (diff) => {
             switch (position) {
                 case "bottom":
@@ -73,6 +85,9 @@ export const SlidingPanel = ({ isOpen, onClose, children, height = "80%", width
             }
         };
         const startDrag = (pos) => {
+            // ✅ CHANGE 2: block drag if scrolling or not at boundary
+            if (isScrollActive || !isAtBoundary())
+                return;
             startPos = pos;
             isDragging = true;
             panel.style.transition = "none";
@@ -80,6 +95,8 @@ export const SlidingPanel = ({ isOpen, onClose, children, height = "80%", width
         const moveDrag = (pos) => {
             if (!isDragging)
                 return;
+            if (isScrollActive)
+                return;
             currentPos = pos;
             const diff = getDiff(currentPos);
             panel.style.transform = getTransform(diff);
@@ -90,57 +107,51 @@ export const SlidingPanel = ({ isOpen, onClose, children, height = "80%", width
             isDragging = false;
             const diff = getDiff(currentPos);
             panel.style.transition = "transform 0.3s ease";
-            const threshold = 100; // px to trigger close
+            const threshold = 100;
             let shouldClose = false;
             switch (position) {
                 case "bottom":
                     shouldClose = diff > threshold;
-                    panel.style.transform = shouldClose
-                        ? `translate(-50%, 100%)`
-                        : `translate(-50%, 0)`;
                     break;
                 case "top":
                     shouldClose = diff < -threshold;
-                    panel.style.transform = shouldClose
-                        ? `translate(-50%, -100%)`
-                        : `translate(-50%, 0)`;
                     break;
                 case "left":
                     shouldClose = diff < -threshold;
-                    panel.style.transform = shouldClose
-                        ? `translate(-100%, -50%)`
-                        : `translate(0, -50%)`;
                     break;
                 case "right":
                     shouldClose = diff > threshold;
-                    panel.style.transform = shouldClose
-                        ? `translate(100%, -50%)`
-                        : `translate(0, -50%)`;
                     break;
             }
             if (shouldClose) {
                 switch (position) {
-                    case "right":
-                        panel.style.transform = `translate(100%, -50%)`;
-                        break;
-                    case "left":
-                        panel.style.transform = `translate(-100%, -50%)`;
+                    case "bottom":
+                        panel.style.transform = "translate(-50%, 100%)";
                         break;
                     case "top":
-                        panel.style.transform = `translate(-50%, -100%)`;
+                        panel.style.transform = "translate(-50%, -100%)";
                         break;
-                    case "bottom":
-                        panel.style.transform = `translate(-50%, 100%)`;
+                    case "left":
+                        panel.style.transform = "translate(-100%, -50%)";
+                        break;
+                    case "right":
+                        panel.style.transform = "translate(100%, -50%)";
                         break;
                 }
-                setTimeout(() => onClose(), 250); // keep in DOM while sliding
+                setTimeout(onClose, 250);
+            }
+            else {
+                panel.style.transform =
+                    position === "bottom" || position === "top"
+                        ? "translate(-50%, 0)"
+                        : "translate(0, -50%)";
             }
         };
-        // Touch events
+        // touch
         const onTouchStart = (e) => startDrag(isVertical ? e.touches[0].clientY : e.touches[0].clientX);
         const onTouchMove = (e) => moveDrag(isVertical ? e.touches[0].clientY : e.touches[0].clientX);
         const onTouchEnd = () => endDrag();
-        // Mouse events
+        // mouse
         const onMouseDown = (e) => startDrag(isVertical ? e.clientY : e.clientX);
         const onMouseMove = (e) => moveDrag(isVertical ? e.clientY : e.clientX);
         const onMouseUp = () => endDrag();
@@ -165,6 +176,6 @@ export const SlidingPanel = ({ isOpen, onClose, children, height = "80%", width
     }, [onClose, position]);
     if (!visible && !isOpen)
         return null;
-    return (_jsxs("div", { className: `spb-root ${animateOpen ? "spb-open" : "spb-close"}`, "aria-hidden": !isOpen, children: [_jsx("div", { className: "spb-backdrop", onClick: () => closeOnOverlayClick && onClose() }), _jsxs("div", { ref: panelRef, className: `spb-panel spb-panel--position-${position}`, style: { height, width }, role: "dialog", "aria-modal": "true", onClick: (e) => e.stopPropagation(), children: [_jsx("div", { ref: handleRef, className: "spb-handle" }), _jsxs("div", { ref: headerRef, className: "spb-header", children: [title ? _jsx("h3", { className: "spb-title", children: title }) : _jsx("div", {}), _jsx("button", { className: "spb-close-btn", onClick: onClose, children: "\u00D7" })] }), _jsx("div", { className: "spb-body", children: children })] })] }));
+    return (_jsxs("div", { className: `spb-root ${animateOpen ? "spb-open" : "spb-close"}`, children: [_jsx("div", { className: "spb-backdrop", onClick: () => closeOnOverlayClick && onClose() }), _jsxs("div", { ref: panelRef, className: `spb-panel spb-panel--position-${position}`, style: { height, width }, role: "dialog", "aria-modal": "true", onClick: (e) => e.stopPropagation(), children: [_jsx("div", { ref: headerRef, className: "spb-header", children: _jsx("button", { className: "spb-close-btn", onClick: onClose, children: "\u00D7" }) }), _jsx("div", { className: "spb-body", children: children })] })] }));
 };
 export default SlidingPanel;

package/package.json

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