cynx-ui 1.2.6 → 1.2.8

package/components/StatsCard.jsx

@@ -1,25 +1,26 @@
 import CircularProgress from './CircularProgress';
 
-const STYLES = `
-.scard{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;min-height:68px;border-radius:var(--rad,10px);background:var(--surface,#fff);border:1px solid var(--border);box-shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);min-width:0;transition:border-color .15s}
-.scard:hover{border-color:var(--border,#d7d8e0)}
-.scard-left{display:flex;flex-direction:column;min-width:0;flex:1}
-.scard-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
-.scard-head-left{display:flex;align-items:center;gap:6px}
-.scard-icon{width:24px;height:24px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
-.scard-icon svg{width:12px;height:12px}
-.scard-title{font-size:.58rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted,#9b9daa)}
-.scard-value{font-size:1.1rem;font-weight:800;letter-spacing:-.02em;color:var(--primary-text,#0f111c);line-height:1.2;min-height:1.32em}
-.scard-sub{font-size:.62rem;color:var(--muted,#9b9daa);font-weight:500;margin-top:1px;min-height:1em}
-.scard-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
-.scard-simple{padding:12px 14px;flex-direction:column;align-items:flex-start;justify-content:flex-start}
-.scard-simple .scard-head{width:100%;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}
-.scard-simple .scard-icon-simple{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
-.scard-simple .scard-icon-simple svg{width:14px;height:14px}
-.scard-simple .scard-value{font-size:1.25rem;font-weight:800;letter-spacing:-.03em;line-height:1.1;min-height:1.375em}
-`;
+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',
+};
 
-let styleInjected = false;
+const SIMPLE_BASE = {
+  ...BASE,
+  padding: '12px 14px',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  justifyContent: 'flex-start',
+};
 
 export default function StatsCard({
   variant = 'default',
@@ -38,49 +39,122 @@ export default function StatsCard({
   style = {},
   children,
 }) {
-  if (!styleInjected && typeof document !== 'undefined') {
-    const tag = document.createElement('style');
-    tag.textContent = STYLES;
-    document.head.appendChild(tag);
-    styleInjected = true;
-  }
-
   if (variant === 'simple') {
     return (
-      <div className={`scard scard-simple${className ? ' ' + className : ''}`} style={style}>
-        <div className="scard-head">
-          {title && <div className="scard-title">{title}</div>}
+      <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 className="scard-icon-simple" style={{ color: iconColor }}>
+            <div style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              flexShrink: 0,
+              color: iconColor,
+            }}>
               {icon}
             </div>
           )}
         </div>
-        {value !== undefined && <div className="scard-value">{value}</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={`scard${className ? ' ' + className : ''}`} style={style}>
-      <div className="scard-left">
-        <div className="scard-head">
-          <div className="scard-head-left">
+    <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 className="scard-icon" style={{ background: iconBg, color: iconColor }}>
+              <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 className="scard-title">{title}</div>}
+            {title && (
+              <div style={{
+                fontSize: '.58rem',
+                fontWeight: 600,
+                textTransform: 'uppercase',
+                letterSpacing: '.08em',
+                color: 'var(--muted,#9b9daa)',
+              }}>{title}</div>
+            )}
           </div>
           {headRight}
         </div>
-        {value !== undefined && <div className="scard-value">{value}</div>}
-        <div className="scard-sub" style={{ minHeight: 14 }}>{subtitle || '\u00A0'}</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 className="scard-right">
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+        flexShrink: 0,
+      }}>
         {percent !== undefined && (
           <CircularProgress
             value={percent}

package/components/Tabs.jsx

@@ -1,16 +1,16 @@
-export function Tabs({ tabs, value, onChange, style }) {
-  return (
-    <div className="xtabs" style={style}>
-      {tabs.map(t => {
-        const label = typeof t === 'string' ? t : t.label;
-        const key   = typeof t === 'string' ? t : t.value;
-        const active = key === value;
-        return (
-          <button key={key} className={`xtab${active ? ' active' : ''}`} onClick={() => onChange(key)}>
-            {label}
-          </button>
-        );
-      })}
-    </div>
-  );
-}
+export function Tabs({ tabs, value, onChange, style }) {
+  return (
+    <div className="xtabs" style={style}>
+      {tabs.map(t => {
+        const label = typeof t === 'string' ? t : t.label;
+        const key   = typeof t === 'string' ? t : t.value;
+        const active = key === value;
+        return (
+          <button key={key} className={`xtab${active ? ' active' : ''}`} onClick={() => onChange(key)}>
+            {label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/components/Toast.jsx

@@ -1,6 +1,31 @@
 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 {
+  background: var(--surface, #fff); border: 1px solid var(--border, #d7d8e0);
+  border-radius: var(--rads, 8px); padding: 10px 14px;
+  font-size: .78rem; display: flex; align-items: center; gap: 8px;
+  box-shadow: 0px 40px 100px 0px rgba(0,0,0,.15); max-width: 300px;
+  color: var(--primary-text, #0f111c); font-weight: 500;
+  animation: cx-toastSlide .18s ease;
+  cursor: pointer;
+}
+.toast.ok  { border-left: 3px solid var(--success, #27ae60); }
+.toast.err { border-left: 3px solid var(--danger, #f64747); }
+@keyframes cx-toastSlide { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
+`;
+
+let injected = false;
+function ensureStyles() {
+  if (injected || typeof document === 'undefined') return;
+  const tag = document.createElement('style');
+  tag.textContent = STYLES;
+  document.head.appendChild(tag);
+  injected = true;
+}
+
 // ── Module-level state ────────────────────────────────────────────────────────
 let _toasts = [];
 let _listeners = new Set();
@@ -12,6 +37,7 @@ function notify() {
 
 // Global toast — call from anywhere, no hook needed
 export function toast(msg, type = 'ok') {
+  ensureStyles();
   const id = Date.now() + Math.random();
   _toasts = [..._toasts, { id, msg, type }];
   notify();
@@ -40,6 +66,7 @@ export function useToast() {
 
 // ── Render component ──────────────────────────────────────────────────────────
 export function Toast({ toasts, remove }) {
+  ensureStyles();
   return createPortal(
     <div id="toast-root">
       {toasts.map(t => (

package/components/Toggle.jsx

@@ -1,56 +1,56 @@
-const SIZES = {
-  sm: { w: 28, h: 16, r: 8, dot: 12, off: 2, on: 14 },
-  md: { w: 34, h: 18, r: 9, dot: 14, off: 2, on: 18 },
-  lg: { w: 44, h: 24, r: 12, dot: 18, off: 3, on: 23 },
-};
-
-const COLORS = {
-  primary: 'var(--accent)',
-  success: 'var(--success)',
-  warning: '#f59e0b',
-  danger:  'var(--danger)',
-};
-
-export default function Toggle({
-  checked = false,
-  onChange,
-  disabled = false,
-  size = 'md',
-  color = 'primary',
-  label = null,
-  labelStyle = {},
-  onClick = null,
-  className = '',
-  style = {},
-}) {
-  const s = SIZES[size] || SIZES.md;
-  const trackBg = checked ? (COLORS[color] || COLORS.primary) : 'var(--bd2,#d7d8e0)';
-
-  return (
-    <label
-      className={className}
-      style={{ display:'inline-flex', alignItems:'center', gap:8, cursor: disabled ? 'not-allowed' : 'pointer', userSelect:'none', opacity: disabled ? .4 : 1, ...style }}
-      onClick={onClick}
-    >
-      <input type="checkbox" checked={checked} disabled={disabled}
-        onChange={e => onChange?.(e.target.checked)}
-        style={{ position:'absolute', opacity:0, width:0, height:0 }} />
-      <span style={{
-        position:'relative', width: s.w, height: s.h, borderRadius: s.r,
-        background: trackBg, flexShrink:0, transition:'background .2s ease',
-        boxShadow:'0 1px 3px rgba(20,22,41,.1)',
-      }}>
-        <span style={{
-          position:'absolute', top:'50%',
-          transform:'translateY(-50%)',
-          left: checked ? s.on : s.off,
-          width: s.dot, height: s.dot,
-          background:'#fff', borderRadius:'50%',
-          boxShadow:'0 1px 3px rgba(0,0,0,.25)',
-          transition:'left .25s cubic-bezier(.34,1.56,.64,1)',
-        }} />
-      </span>
-      {label && <span style={labelStyle}>{label}</span>}
-    </label>
-  );
-}
+const SIZES = {
+  sm: { w: 28, h: 16, r: 8, dot: 12, off: 2, on: 14 },
+  md: { w: 34, h: 18, r: 9, dot: 14, off: 2, on: 18 },
+  lg: { w: 44, h: 24, r: 12, dot: 18, off: 3, on: 23 },
+};
+
+const COLORS = {
+  primary: 'var(--accent)',
+  success: 'var(--success)',
+  warning: '#f59e0b',
+  danger:  'var(--danger)',
+};
+
+export default function Toggle({
+  checked = false,
+  onChange,
+  disabled = false,
+  size = 'md',
+  color = 'primary',
+  label = null,
+  labelStyle = {},
+  onClick = null,
+  className = '',
+  style = {},
+}) {
+  const s = SIZES[size] || SIZES.md;
+  const trackBg = checked ? (COLORS[color] || COLORS.primary) : 'var(--bd2,#d7d8e0)';
+
+  return (
+    <label
+      className={className}
+      style={{ display:'inline-flex', alignItems:'center', gap:8, cursor: disabled ? 'not-allowed' : 'pointer', userSelect:'none', opacity: disabled ? .4 : 1, ...style }}
+      onClick={onClick}
+    >
+      <input type="checkbox" checked={checked} disabled={disabled}
+        onChange={e => onChange?.(e.target.checked)}
+        style={{ position:'absolute', opacity:0, width:0, height:0 }} />
+      <span style={{
+        position:'relative', width: s.w, height: s.h, borderRadius: s.r,
+        background: trackBg, flexShrink:0, transition:'background .2s ease',
+        boxShadow:'0 1px 3px rgba(20,22,41,.1)',
+      }}>
+        <span style={{
+          position:'absolute', top:'50%',
+          transform:'translateY(-50%)',
+          left: checked ? s.on : s.off,
+          width: s.dot, height: s.dot,
+          background:'#fff', borderRadius:'50%',
+          boxShadow:'0 1px 3px rgba(0,0,0,.25)',
+          transition:'left .25s cubic-bezier(.34,1.56,.64,1)',
+        }} />
+      </span>
+      {label && <span style={labelStyle}>{label}</span>}
+    </label>
+  );
+}