cynx-ui 1.2.5 → 1.2.7

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,57 +1,57 @@
-import { useState, useEffect, useCallback } from 'react';
-import { createPortal } from 'react-dom';
-
-// ── Module-level state ────────────────────────────────────────────────────────
-let _toasts = [];
-let _listeners = new Set();
-
-function notify() {
-  const snapshot = [..._toasts];
-  _listeners.forEach(fn => fn(snapshot));
-}
-
-// Global toast — call from anywhere, no hook needed
-export function toast(msg, type = 'ok') {
-  const id = Date.now() + Math.random();
-  _toasts = [..._toasts, { id, msg, type }];
-  notify();
-  setTimeout(() => {
-    _toasts = _toasts.filter(t => t.id !== id);
-    notify();
-  }, 3500);
-}
-
-// ── Hook — for components that want reactive state ────────────────────────────
-export function useToast() {
-  const [toasts, setToasts] = useState(_toasts);
-
-  useEffect(() => {
-    _listeners.add(setToasts);
-    return () => _listeners.delete(setToasts);
-  }, []);
-
-  const remove = useCallback(id => {
-    _toasts = _toasts.filter(t => t.id !== id);
-    notify();
-  }, []);
-
-  return { toasts, toast, remove };
-}
-
-// ── Render component ──────────────────────────────────────────────────────────
-export function Toast({ toasts, remove }) {
-  return createPortal(
-    <div id="toast-root">
-      {toasts.map(t => (
-        <div key={t.id} className={`toast ${t.type}`} onClick={() => remove(t.id)}>
-          {t.type === 'ok'
-            ? <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--success)" strokeWidth="2.5" strokeLinecap="round"><polyline points="20 6 9 17 4 12"/></svg>
-            : <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--danger)" strokeWidth="2.5" strokeLinecap="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
-          }
-          {t.msg}
-        </div>
-      ))}
-    </div>,
-    document.body
-  );
-}
+import { useState, useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+
+// ── Module-level state ────────────────────────────────────────────────────────
+let _toasts = [];
+let _listeners = new Set();
+
+function notify() {
+  const snapshot = [..._toasts];
+  _listeners.forEach(fn => fn(snapshot));
+}
+
+// Global toast — call from anywhere, no hook needed
+export function toast(msg, type = 'ok') {
+  const id = Date.now() + Math.random();
+  _toasts = [..._toasts, { id, msg, type }];
+  notify();
+  setTimeout(() => {
+    _toasts = _toasts.filter(t => t.id !== id);
+    notify();
+  }, 3500);
+}
+
+// ── Hook — for components that want reactive state ────────────────────────────
+export function useToast() {
+  const [toasts, setToasts] = useState(_toasts);
+
+  useEffect(() => {
+    _listeners.add(setToasts);
+    return () => _listeners.delete(setToasts);
+  }, []);
+
+  const remove = useCallback(id => {
+    _toasts = _toasts.filter(t => t.id !== id);
+    notify();
+  }, []);
+
+  return { toasts, toast, remove };
+}
+
+// ── Render component ──────────────────────────────────────────────────────────
+export function Toast({ toasts, remove }) {
+  return createPortal(
+    <div id="toast-root">
+      {toasts.map(t => (
+        <div key={t.id} className={`toast ${t.type}`} onClick={() => remove(t.id)}>
+          {t.type === 'ok'
+            ? <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--success)" strokeWidth="2.5" strokeLinecap="round"><polyline points="20 6 9 17 4 12"/></svg>
+            : <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--danger)" strokeWidth="2.5" strokeLinecap="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
+          }
+          {t.msg}
+        </div>
+      ))}
+    </div>,
+    document.body
+  );
+}

package/components/Toggle.jsx

@@ -1,58 +1,56 @@
-const STYLES = `
-.tgl{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
-.tgl input{position:absolute;opacity:0;width:0;height:0}
-.tgl-tr{position:relative;border-radius:var(--rfull,99px);transition:background .2s ease;flex-shrink:0;box-shadow:var(--shadow,0 1px 3px rgba(20,22,41,.1))}
-.tgl-th{position:absolute;top:50%;transform:translateY(-50%);background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .25s cubic-bezier(.34,1.56,.64,1)}
-.tgl-sm .tgl-tr{width:28px;height:16px}
-.tgl-sm .tgl-th{width:12px;height:12px;left:2px}
-.tgl-sm.on .tgl-th{left:14px}
-.tgl-md .tgl-tr{width:34px;height:18px}
-.tgl-md .tgl-th{width:14px;height:14px;left:2px}
-.tgl-md.on .tgl-th{left:18px}
-.tgl-lg .tgl-tr{width:44px;height:24px}
-.tgl-lg .tgl-th{width:18px;height:18px;left:3px}
-.tgl-lg.on .tgl-th{left:23px}
-.tgl:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
-`;
-
-const COLORS = {
-  primary: 'var(--accent)',
-  success: 'var(--success)',
-  warning: '#f59e0b',
-  danger:  'var(--danger)',
-};
-
-let styleInjected = false;
-
-export default function Toggle({
-  checked = false,
-  onChange,
-  disabled = false,
-  size = 'md',
-  color = 'primary',
-  label = null,
-  labelStyle = {},
-  onClick = null,
-  className = '',
-  style = {},
-}) {
-  if (!styleInjected && typeof document !== 'undefined') {
-    const tag = document.createElement('style');
-    tag.textContent = STYLES;
-    document.head.appendChild(tag);
-    styleInjected = true;
-  }
-
-  const sizeClass = ` tgl-${size}`;
-  const classes = `tgl${sizeClass}${checked ? ' on' : ''}${className ? ' ' + className : ''}`;
-  const trackColor = checked ? (COLORS[color] || COLORS.primary) : 'var(--bd2,#d7d8e0)';
-
-  return (
-    <label className={classes} style={style} onClick={onClick}>
-      <input type="checkbox" checked={checked} disabled={disabled}
-        onChange={e => onChange?.(e.target.checked)} />
-      <span className="tgl-tr" style={{ background: trackColor }}><span className="tgl-th" /></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>
+  );
+}