ml-ui-lib 1.0.50 → 1.0.51

package/dist/components/Modal/Modal.css

@@ -34,7 +34,7 @@
   background: transparent;
   border: none;
   font-size: 26px;
-  color: #666;
+  color: #555;
   cursor: pointer;
   line-height: 1;
   transition: color 0.2s ease, transform 0.15s ease;
@@ -74,8 +74,7 @@
 }
 
 .modal-title {
-  font-size: 20px;
-  font-weight: 600;
+  margin: 0px;
 }
 
 /* Animations */

package/dist/components/Modal/Modal.js

@@ -15,5 +15,5 @@ export const Modal = ({ open, onClose, title, children, zIndex = 1000, variant =
                 zIndex: zIndex + 1,
                 width: `${width}%`,
                 maxWidth: "95vw",
-            }, children: [_jsx("button", { className: "modal-close", onClick: onClose, "aria-label": "Close modal", children: "\u00D7" }), title && (_jsx("div", { className: "modal-header", children: _jsx("h2", { className: "modal-title", children: title }) })), _jsx("div", { className: "modal-content", children: children })] }) }));
+            }, children: [title && (_jsxs("div", { className: "modal-header", children: [_jsx("h3", { className: "modal-title", children: title }), _jsx("button", { className: "modal-close", onClick: onClose, "aria-label": "Close modal", children: "\u00D7" })] })), _jsx("div", { className: "modal-content", children: children })] }) }));
 };

package/dist/components/SlidingPanel/SlidingPanel.css

@@ -118,11 +118,11 @@
 /* Header + body */
 .spb-header {
     display: flex;
+    justify-content: space-between;
     align-items: center;
-    justify-content: end;
-    padding: 12px 16px;
-    /* border-bottom: 1px solid #f1f1f1; */
-    min-height: 0px;
+    gap: 10px;
+    /* margin-bottom: 16px; */
+    padding: 0px 10px;
 }
 
 .spb-title {
@@ -151,19 +151,21 @@
 
 /* Desktop close button */
 .spb-close-btn {
-    background: none;
+    position: absolute;
+    top: 12px;
+    right: 14px;
+    background: transparent;
     border: none;
-    font-size: 25px;
-    line-height: 1;
+    font-size: 26px;
+    color: #555;
     cursor: pointer;
-    padding: 30px 0px 25px 10px;
-    border-radius: 6px;
-    color: #111827;
-    margin-right: 0px;
+    line-height: 1;
+    transition: color 0.2s ease, transform 0.15s ease;
 }
 
 .spb-close-btn:hover {
-    background: rgb(255 0 0 / 27%);
+    color: #000;
+    transform: scale(1.1);
 }
 
 /* Handle (mobile) */

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

@@ -8,6 +8,7 @@ export interface SlidingPanelProps {
     width?: string;
     closeOnOverlayClick?: boolean;
     position?: "bottom" | "top" | "left" | "right";
+    title?: string;
 }
 export declare const SlidingPanel: React.FC<SlidingPanelProps>;
 export default SlidingPanel;

package/dist/components/SlidingPanel/SlidingPanel.js

@@ -2,7 +2,7 @@
 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%", closeOnOverlayClick = true, position = "bottom", }) => {
+export const SlidingPanel = ({ isOpen, onClose, children, height = "80%", width = "100%", closeOnOverlayClick = true, position = "bottom", title = "" }) => {
     const [visible, setVisible] = useState(false);
     const [animateOpen, setAnimateOpen] = useState(false);
     const panelRef = useRef(null);
@@ -176,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"}`, 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 })] })] }));
+    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: [_jsxs("div", { ref: headerRef, className: "spb-header", children: [_jsx("h3", { children: title }), _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.50",
+  "version": "1.0.51",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",