cynx-ui 1.3.17 → 1.3.18

package/components/Modal.jsx

@@ -20,13 +20,15 @@ const STYLES = `
   display: flex; align-items: center; justify-content: space-between;
   padding: 15px 20px; border-bottom: 1px solid var(--border-light);
   border-radius: 14px 14px 0 0;
+  flex-shrink: 0;
 }
 .modal-title { font-size: .88rem; font-weight: 700; letter-spacing: -.01em; }
-.modal-body  { padding: 20px; overflow: visible; }
+.modal-body  { padding: 20px; overflow-x: hidden; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
 .modal-footer {
   display: flex; justify-content: flex-end; gap: 8px;
   padding: 13px 20px; border-top: 1px solid var(--border-light);
   background: var(--grey-1); border-radius: 0 0 14px 14px;
+  flex-shrink: 0;
 }
 .modal-card {
   background: var(--surface); border: 1px solid var(--border);
@@ -94,7 +96,7 @@ function ensureStyles() {
 // Auto-inject on module load
 if (typeof document !== 'undefined') ensureStyles();
 
-export function Modal({ open, onClose, onBeforeClose, title, children, footer, maxWidth = 520, bodyStyle }) {
+export function Modal({ open, onClose, onBeforeClose, title, children, footer, maxWidth = 520, maxHeight, bodyStyle, style }) {
   const [closing, setClosing] = useState(false);
   const mounted = useRef(open);
 
@@ -131,6 +133,7 @@ export function Modal({ open, onClose, onBeforeClose, title, children, footer, m
 
   const resolvedFooter = typeof footer === 'function' ? footer(close) : footer;
   const resolvedChildren = typeof children === 'function' ? children(close) : children;
+  const resolvedMaxHeight = style?.maxHeight || maxHeight || '60vh';
 
   return createPortal(
     <div
@@ -138,7 +141,7 @@ export function Modal({ open, onClose, onBeforeClose, title, children, footer, m
       style={{
         position: 'fixed', inset: 0,
         background: 'rgba(20,22,41,.45)',
-        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        display: 'flex', alignItems: 'center', justifyItems: 'center', justifyContent: 'center',
         zIndex: 8000, padding: 20,
         animation: `${closing ? 'modalFadeOut' : 'modalFadeIn'} .26s ease forwards`,
       }}
@@ -148,25 +151,28 @@ export function Modal({ open, onClose, onBeforeClose, title, children, footer, m
         className="modal-card"
         style={{
           background: 'var(--surface)', border: '1px solid var(--border)',
-          borderRadius: 14, width: '100%', maxWidth, maxHeight: '60vh',
+          borderRadius: 14, width: '100%',
+          maxWidth: style?.maxWidth || maxWidth,
+          maxHeight: resolvedMaxHeight,
           boxShadow: 'var(--slg, 0 20px 60px rgba(0,0,0,.25))',
           overflow: 'hidden', display: 'flex', flexDirection: 'column',
           animation: `${closing ? 'modalCardOut' : 'modalCardIn'} .26s cubic-bezier(.4,0,.2,1) forwards`,
+          ...style,
         }}
         onMouseDown={e => e.stopPropagation()}
       >
         <div className="modal-hdr" style={{
           display: 'flex', alignItems: 'center', justifyContent: 'space-between',
           padding: '15px 20px', borderBottom: '1px solid var(--border-light)',
-          borderRadius: '14px 14px 0 0',
+          borderRadius: '14px 14px 0 0', flexShrink: 0,
         }}>
           <span className="modal-title" style={{ fontSize: '.88rem', fontWeight: 700, letterSpacing: '-.01em' }}>{title}</span>
         </div>
-        <div className="modal-body" style={{ padding: 20, overflowX: 'hidden', overflowY: 'auto', flex: 1, minHeight: 0, ...bodyStyle }}>{resolvedChildren}</div>
+        <div className="modal-body" style={{ padding: 20, overflowX: 'hidden', overflowY: 'auto', flex: '1 1 auto', minHeight: 0, ...bodyStyle }}>{resolvedChildren}</div>
         {resolvedFooter && <div className="modal-footer" style={{
           display: 'flex', justifyContent: 'flex-end', gap: 8,
           padding: '13px 20px', borderTop: '1px solid var(--border-light)',
-          background: 'var(--grey-1)', borderRadius: '0 0 14px 14px',
+          background: 'var(--grey-1)', borderRadius: '0 0 14px 14px', flexShrink: 0,
         }}>{resolvedFooter}</div>}
       </div>
     </div>,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cynx-ui",
-  "version": "1.3.17",
+  "version": "1.3.18",
   "type": "module",
   "exports": {
     ".": "./index.js"