cynx-ui 1.3.16 → 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/components/Toast.jsx

@@ -2,7 +2,7 @@ import { useState, useEffect, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 
 const STYLES = `
-#toast-root { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 99999; }
+#toast-root { position: fixed; top: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 99999; }
 .toast {
   background: var(--surface, #fff); border: 1px solid var(--border, #d7d8e0);
   border-radius: var(--rads, 8px); padding: 10px 14px;
@@ -70,11 +70,23 @@ export function useToast() {
   return { toasts, toast, remove };
 }
 
+const POSITIONS = {
+  'top-right': { top: 20, right: 20, bottom: 'auto', left: 'auto' },
+  'top-left': { top: 20, left: 20, bottom: 'auto', right: 'auto' },
+  'top-center': { top: 20, left: '50%', transform: 'translateX(-50%)', bottom: 'auto', right: 'auto' },
+  'bottom-right': { bottom: 20, right: 20, top: 'auto', left: 'auto' },
+  'bottom-left': { bottom: 20, left: 20, top: 'auto', right: 'auto' },
+  'bottom-center': { bottom: 20, left: '50%', transform: 'translateX(-50%)', top: 'auto', right: 'auto' },
+  'top': { top: 20, right: 20, bottom: 'auto', left: 'auto' },
+  'bottom': { bottom: 20, right: 20, top: 'auto', left: 'auto' },
+};
+
 // ── Render component ──────────────────────────────────────────────────────────
-export function Toast({ toasts, remove }) {
+export function Toast({ toasts, remove, position = 'top-right', style = {} }) {
   ensureStyles();
+  const posStyle = POSITIONS[position] || POSITIONS['top-right'];
   return createPortal(
-    <div id="toast-root">
+    <div id="toast-root" style={{ ...posStyle, ...style }}>
       {toasts.map(t => (
         <div key={t.id} className={`toast ${t.type}`} onClick={() => remove(t.id)}>
           {t.type === 'ok' || t.type === 'success'

package/package.json

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