cynx-ui 1.2.16 → 1.2.18

package/components/Spinner.jsx

@@ -1,52 +1,52 @@
-const STYLES = `.spin{animation:cx-spin .7s linear infinite}@keyframes cx-spin{to{transform:rotate(360deg)}}`;
-
-let _id = 'cynx-spinner-styles';
-function ensureStyles() {
-  if (typeof document === 'undefined') return;
-  if (document.getElementById(_id)) return;
-  const tag = document.createElement('style');
-  tag.id = _id;
-  tag.textContent = STYLES;
-  document.head.appendChild(tag);
-}
-
-// Auto-inject on module load
-if (typeof document !== 'undefined') ensureStyles();
-
-export function Spinner({ size = 20, inline = false, color = 'currentColor', fullPage = false }) {
-  ensureStyles();
-  const s = inline ? 14 : size;
-  const svg = (
-    <svg className="spin" width={s} height={s} viewBox="0 0 24 24" fill="none"
-      stroke={color} strokeWidth="2.5" strokeLinecap="round">
-      <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/>
-    </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,
-      }}>
-        {svg}
-        <div style={{ fontSize: '.75rem', fontFamily: 'var(--mono)', color: 'var(--muted)' }}>
-          Loading...
-        </div>
-      </div>
-    );
-  }
-
-  if (inline) return svg;
-
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '48px 0' }}>
-      {svg}
-    </div>
-  );
-}
-
-export default Spinner;
+const STYLES = `.spin{animation:cx-spin .7s linear infinite}@keyframes cx-spin{to{transform:rotate(360deg)}}`;
+
+let _id = 'cynx-spinner-styles';
+function ensureStyles() {
+  if (typeof document === 'undefined') return;
+  if (document.getElementById(_id)) return;
+  const tag = document.createElement('style');
+  tag.id = _id;
+  tag.textContent = STYLES;
+  document.head.appendChild(tag);
+}
+
+// Auto-inject on module load
+if (typeof document !== 'undefined') ensureStyles();
+
+export function Spinner({ size = 20, inline = false, color = 'currentColor', fullPage = false }) {
+  ensureStyles();
+  const s = inline ? 14 : size;
+  const svg = (
+    <svg className="spin" width={s} height={s} viewBox="0 0 24 24" fill="none"
+      stroke={color} strokeWidth="2.5" strokeLinecap="round">
+      <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/>
+    </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,
+      }}>
+        {svg}
+        <div style={{ fontSize: '.75rem', fontFamily: 'var(--mono)', color: 'var(--muted)' }}>
+          Loading...
+        </div>
+      </div>
+    );
+  }
+
+  if (inline) return svg;
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '48px 0' }}>
+      {svg}
+    </div>
+  );
+}
+
+export default Spinner;

package/components/StatBarCard.jsx

@@ -1,25 +1,25 @@
-import LineProgress from './LineProgress';
-
-export default function StatBarCard({ title, icon, items, style }) {
-  const total = items.reduce((s, i) => s + (i.value || 0), 0);
-
-  return (
-    <div style={{
-      background: '#fff', border: '1px solid var(--border)', borderRadius: 'var(--rad)',
-      boxShadow: '0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04)',
-      padding: '12px 14px', minWidth: 220, ...style,
-    }}>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
-        <div style={{ fontSize: '.58rem', fontWeight: 700, color: 'var(--muted, #9ca3af)', textTransform: 'uppercase', letterSpacing: '.08em' }}>
-          {title}{total ? ` (${total})` : ''}
-        </div>
-        {icon && <span style={{ color: 'var(--muted, #9ca3af)' }}>{icon}</span>}
-      </div>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-        {items.map((item, i) => (
-          <LineProgress key={i} value={item.value} total={total} color={item.color} label={item.label} size="sm" />
-        ))}
-      </div>
-    </div>
-  );
-}
+import LineProgress from './LineProgress';
+
+export default function StatBarCard({ title, icon, items, style }) {
+  const total = items.reduce((s, i) => s + (i.value || 0), 0);
+
+  return (
+    <div style={{
+      background: '#fff', border: '1px solid var(--border)', borderRadius: 'var(--rad)',
+      boxShadow: '0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04)',
+      padding: '12px 14px', minWidth: 220, ...style,
+    }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
+        <div style={{ fontSize: '.58rem', fontWeight: 700, color: 'var(--muted, #9ca3af)', textTransform: 'uppercase', letterSpacing: '.08em' }}>
+          {title}{total ? ` (${total})` : ''}
+        </div>
+        {icon && <span style={{ color: 'var(--muted, #9ca3af)' }}>{icon}</span>}
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+        {items.map((item, i) => (
+          <LineProgress key={i} value={item.value} total={total} color={item.color} label={item.label} size="sm" />
+        ))}
+      </div>
+    </div>
+  );
+}

package/components/StatsCard.jsx

@@ -1,171 +1,171 @@
-import CircularProgress from './CircularProgress';
-
-const BASE = {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  padding: '10px 14px',
-  minHeight: 68,
-  borderRadius: 'var(--rad,10px)',
-  background: 'var(--surface,#fff)',
-  border: '1px solid var(--border)',
-  boxShadow: '0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04)',
-  minWidth: 0,
-  transition: 'border-color .15s',
-};
-
-const SIMPLE_BASE = {
-  ...BASE,
-  padding: '12px 14px',
-  flexDirection: 'column',
-  alignItems: 'flex-start',
-  justifyContent: 'flex-start',
-};
-
-export default function StatsCard({
-  variant = 'default',
-  icon,
-  iconColor = 'var(--blue)',
-  iconBg = 'rgba(39,130,228,.1)',
-  title,
-  value,
-  subtitle,
-  percent,
-  percentColor,
-  progressSize = 'sm',
-  progressTrackColor = '#e8e8ec',
-  headRight,
-  className = '',
-  style = {},
-  children,
-}) {
-  if (variant === 'simple') {
-    return (
-      <div className={className} style={{ ...SIMPLE_BASE, ...style }}>
-        <div style={{
-          width: '100%',
-          marginBottom: 8,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-        }}>
-          {title && (
-            <div style={{
-              fontSize: '.58rem',
-              fontWeight: 600,
-              textTransform: 'uppercase',
-              letterSpacing: '.08em',
-              color: 'var(--muted,#9b9daa)',
-            }}>{title}</div>
-          )}
-          {icon && (
-            <div style={{
-              display: 'inline-flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              flexShrink: 0,
-              color: iconColor,
-            }}>
-              {icon}
-            </div>
-          )}
-        </div>
-        {value !== undefined && (
-          <div style={{
-            fontSize: '1.25rem',
-            fontWeight: 800,
-            letterSpacing: '-.03em',
-            lineHeight: 1.1,
-            minHeight: '1.375em',
-          }}>{value}</div>
-        )}
-        {children}
-      </div>
-    );
-  }
-
-  return (
-    <div className={className} style={{ ...BASE, ...style }}>
-      <div style={{
-        display: 'flex',
-        flexDirection: 'column',
-        minWidth: 0,
-        flex: 1,
-      }}>
-        <div style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          marginBottom: 8,
-        }}>
-          <div style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: 6,
-          }}>
-            {icon && (
-              <div style={{
-                width: 24,
-                height: 24,
-                borderRadius: 6,
-                display: 'inline-flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                flexShrink: 0,
-                background: iconBg,
-                color: iconColor,
-              }}>
-                {icon}
-              </div>
-            )}
-            {title && (
-              <div style={{
-                fontSize: '.58rem',
-                fontWeight: 600,
-                textTransform: 'uppercase',
-                letterSpacing: '.08em',
-                color: 'var(--muted,#9b9daa)',
-              }}>{title}</div>
-            )}
-          </div>
-          {headRight}
-        </div>
-        {value !== undefined && (
-          <div style={{
-            fontSize: '1.1rem',
-            fontWeight: 800,
-            letterSpacing: '-.02em',
-            color: 'var(--primary-text,#0f111c)',
-            lineHeight: 1.2,
-            minHeight: '1.32em',
-          }}>{value}</div>
-        )}
-        <div style={{
-          fontSize: '.62rem',
-          color: 'var(--muted,#9b9daa)',
-          fontWeight: 500,
-          marginTop: 1,
-          minHeight: 14,
-        }}>{subtitle || '\u00A0'}</div>
-        {children}
-      </div>
-      <div style={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: 8,
-        flexShrink: 0,
-      }}>
-        {percent !== undefined && (
-          <CircularProgress
-            value={percent}
-            size={progressSize}
-            color={percentColor}
-            trackColor={progressTrackColor}
-            showPercent
-            rounded
-          />
-        )}
-      </div>
-    </div>
-  );
-}
+import CircularProgress from './CircularProgress';
+
+const BASE = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '10px 14px',
+  minHeight: 68,
+  borderRadius: 'var(--rad,10px)',
+  background: 'var(--surface,#fff)',
+  border: '1px solid var(--border)',
+  boxShadow: '0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04)',
+  minWidth: 0,
+  transition: 'border-color .15s',
+};
+
+const SIMPLE_BASE = {
+  ...BASE,
+  padding: '12px 14px',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  justifyContent: 'flex-start',
+};
+
+export default function StatsCard({
+  variant = 'default',
+  icon,
+  iconColor = 'var(--blue)',
+  iconBg = 'rgba(39,130,228,.1)',
+  title,
+  value,
+  subtitle,
+  percent,
+  percentColor,
+  progressSize = 'sm',
+  progressTrackColor = '#e8e8ec',
+  headRight,
+  className = '',
+  style = {},
+  children,
+}) {
+  if (variant === 'simple') {
+    return (
+      <div className={className} style={{ ...SIMPLE_BASE, ...style }}>
+        <div style={{
+          width: '100%',
+          marginBottom: 8,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}>
+          {title && (
+            <div style={{
+              fontSize: '.58rem',
+              fontWeight: 600,
+              textTransform: 'uppercase',
+              letterSpacing: '.08em',
+              color: 'var(--muted,#9b9daa)',
+            }}>{title}</div>
+          )}
+          {icon && (
+            <div style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              flexShrink: 0,
+              color: iconColor,
+            }}>
+              {icon}
+            </div>
+          )}
+        </div>
+        {value !== undefined && (
+          <div style={{
+            fontSize: '1.25rem',
+            fontWeight: 800,
+            letterSpacing: '-.03em',
+            lineHeight: 1.1,
+            minHeight: '1.375em',
+          }}>{value}</div>
+        )}
+        {children}
+      </div>
+    );
+  }
+
+  return (
+    <div className={className} style={{ ...BASE, ...style }}>
+      <div style={{
+        display: 'flex',
+        flexDirection: 'column',
+        minWidth: 0,
+        flex: 1,
+      }}>
+        <div style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          marginBottom: 8,
+        }}>
+          <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 6,
+          }}>
+            {icon && (
+              <div style={{
+                width: 24,
+                height: 24,
+                borderRadius: 6,
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                flexShrink: 0,
+                background: iconBg,
+                color: iconColor,
+              }}>
+                {icon}
+              </div>
+            )}
+            {title && (
+              <div style={{
+                fontSize: '.58rem',
+                fontWeight: 600,
+                textTransform: 'uppercase',
+                letterSpacing: '.08em',
+                color: 'var(--muted,#9b9daa)',
+              }}>{title}</div>
+            )}
+          </div>
+          {headRight}
+        </div>
+        {value !== undefined && (
+          <div style={{
+            fontSize: '1.1rem',
+            fontWeight: 800,
+            letterSpacing: '-.02em',
+            color: 'var(--primary-text,#0f111c)',
+            lineHeight: 1.2,
+            minHeight: '1.32em',
+          }}>{value}</div>
+        )}
+        <div style={{
+          fontSize: '.62rem',
+          color: 'var(--muted,#9b9daa)',
+          fontWeight: 500,
+          marginTop: 1,
+          minHeight: 14,
+        }}>{subtitle || '\u00A0'}</div>
+        {children}
+      </div>
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+        flexShrink: 0,
+      }}>
+        {percent !== undefined && (
+          <CircularProgress
+            value={percent}
+            size={progressSize}
+            color={percentColor}
+            trackColor={progressTrackColor}
+            showPercent
+            rounded
+          />
+        )}
+      </div>
+    </div>
+  );
+}