cynx-ui 1.2.22 → 1.2.24

package/components/Card.jsx

@@ -32,7 +32,7 @@ export function TableCardFooter({ total, page, limit, pages, onChange }) {
 
 export function CardHdr({ title, icon: Icon, tabs, children }) {
   return (
-    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '13px 0', borderBottom: '1px solid var(--border-light, #ebebf0)' }}>
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0', height: 48, borderBottom: '1px solid var(--border-light, #ebebf0)' }}>
       <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: '.85rem', fontWeight: 600, color: 'var(--primary-text, #0f111c)' }}>
         {Icon && <Icon size={14} />}
         {title}

package/components/Modal.jsx

@@ -30,8 +30,8 @@ const STYLES = `
 }
 .modal-card {
   background: var(--surface); border: 1px solid var(--border);
-  border-radius: 14px; width: 100%; max-width: 480px;
-  box-shadow: var(--shadow-lg); overflow: visible;
+  border-radius: 14px; width: 100%; max-width: 480px; max-height: 60vh;
+  box-shadow: var(--shadow-lg); overflow: hidden;
   display: flex; flex-direction: column;
 }
 .modal-close {
@@ -148,9 +148,9 @@ 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,
+          borderRadius: 14, width: '100%', maxWidth, maxHeight: '60vh',
           boxShadow: '0 20px 60px rgba(0,0,0,.25)',
-          overflow: 'visible', display: 'flex', flexDirection: 'column',
+          overflow: 'hidden', display: 'flex', flexDirection: 'column',
           animation: `${closing ? 'modalCardOut' : 'modalCardIn'} .26s cubic-bezier(.4,0,.2,1) forwards`,
         }}
         onMouseDown={e => e.stopPropagation()}

package/components/Spinner.jsx

@@ -1,4 +1,4 @@
-const STYLES = `.spin{animation:cx-spin .7s linear infinite}@keyframes cx-spin{to{transform:rotate(360deg)}}`;
+const STYLES = `.spin{animation:cx-spin .7s linear infinite}@keyframes cx-spin{to{transform:rotate(360deg)}}.v-progress-circular--indeterminate>svg{animation:progress-circular-rotate .8s linear infinite;transform-origin:center center;transition:all .2s ease-in-out}.v-progress-circular>svg{width:100%;height:100%;margin:auto;position:absolute;inset:0;z-index:0}@keyframes progress-circular-rotate{100%{transform:rotate(270deg)}}@keyframes progress-circular-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}.v-progress-circular--indeterminate .v-progress-circular__overlay{animation:progress-circular-dash 1.4s ease-in-out infinite;stroke-linecap:round}`;
 
 let _id = 'cynx-spinner-styles';
 function ensureStyles() {
@@ -13,7 +13,7 @@ function ensureStyles() {
 // Auto-inject on module load
 if (typeof document !== 'undefined') ensureStyles();
 
-export function Spinner({ size = 20, inline = false, color = 'currentColor', fullPage = false }) {
+export function SpinnerClassic({ size = 20, inline = false, color = 'currentColor', fullPage = false }) {
   ensureStyles();
   const s = inline ? 14 : size;
   const svg = (
@@ -49,4 +49,60 @@ export function Spinner({ size = 20, inline = false, color = 'currentColor', ful
   );
 }
 
+export function Spinner({ size = 20, inline = false, color = 'currentColor', fullPage = false }) {
+  ensureStyles();
+  const s = inline ? 14 : size;
+
+  const svg = (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42.42 42.42"
+      style={{ width: s, height: s, transform: 'rotate(-90deg)' }}>
+      <circle fill="transparent" cx="50%" cy="50%" r="20"
+        stroke="var(--grey-2, #e0e0e0)" strokeWidth="2.42" strokeDasharray="125.66" strokeDashoffset="0" />
+      <circle className="v-progress-circular__overlay" fill="transparent" cx="50%" cy="50%" r="20"
+        stroke={color} strokeWidth="2.42" strokeDasharray="125.66" strokeDashoffset="125.66" />
+    </svg>
+  );
+
+  if (fullPage) {
+    return (
+      <div style={{
+        position: 'fixed', inset: 0,
+        background: 'var(--bg)',
+        display: 'flex', flexDirection: 'column',
+        alignItems: 'center', justifyContent: 'center', gap: 16,
+        zIndex: 9999,
+      }}>
+        <div className="v-progress-circular v-progress-circular--indeterminate" style={{ width: s, height: s }}>
+          {svg}
+        </div>
+        <div style={{ fontSize: '.75rem', fontFamily: 'var(--mono)', color: 'var(--muted)' }}>
+          Loading...
+        </div>
+      </div>
+    );
+  }
+
+  if (inline) {
+    return (
+      <div className="v-progress-circular v-progress-circular--indeterminate"
+        style={{ width: s, height: s, position: 'relative', display: 'inline-flex', flexShrink: 0 }}>
+        <svg viewBox="0 0 42.42 42.42"
+          style={{ width: '100%', height: '100%', transform: 'rotate(-90deg)' }}>
+          <circle className="v-progress-circular__overlay" fill="transparent" cx="50%" cy="50%" r="20"
+            stroke={color} strokeWidth="2.42" strokeDasharray="125.66" strokeDashoffset="125.66" />
+        </svg>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '48px 0' }}>
+      <div className="v-progress-circular v-progress-circular--indeterminate" style={{ width: s, height: s }}>
+        {svg}
+      </div>
+    </div>
+  );
+}
+
+export { Spinner as SpinnerNew };
 export default Spinner;

package/package.json

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