cynx-ui 1.0.0

package/ActionsMenu.jsx

@@ -0,0 +1,149 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+
+export function ActionsMenu({ items, align = 'right' }) {
+  const [open, setOpen] = useState(false);
+  const [closing, setClosing] = useState(false);
+  const wrapRef = useRef(null);
+  const menuRef = useRef(null);
+  const btnRef = useRef(null);
+
+  const close = useCallback(() => {
+    setClosing(true);
+    setTimeout(() => { setClosing(false); setOpen(false); }, 140);
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+    function onDocClick(e) {
+      if (wrapRef.current && !wrapRef.current.contains(e.target)) close();
+    }
+    function onScroll() { if (menuRef.current) positionMenu(); }
+    document.addEventListener('mousedown', onDocClick);
+    document.addEventListener('scroll', onScroll, true);
+    window.addEventListener('resize', onScroll);
+    return () => {
+      document.removeEventListener('mousedown', onDocClick);
+      document.removeEventListener('scroll', onScroll, true);
+      window.removeEventListener('resize', onScroll);
+    };
+  }, [open, close]);
+
+  function positionMenu() {
+    const btn = btnRef.current;
+    const menu = menuRef.current;
+    if (!btn || !menu) return;
+    const br = btn.getBoundingClientRect();
+    const mw = menu.offsetWidth || 180;
+    const mh = menu.offsetHeight || 120;
+    const spaceBelow = window.innerHeight - br.bottom;
+    const spaceAbove = br.top;
+    const openUp = spaceBelow < mh + 12 && spaceAbove > spaceBelow;
+
+    let top, left;
+    if (openUp) {
+      top = br.top + window.scrollY - mh - 6;
+    } else {
+      top = br.bottom + window.scrollY + 6;
+    }
+    if (align === 'left') {
+      left = br.left + window.scrollX;
+    } else {
+      left = br.right + window.scrollX - mw;
+    }
+    left = Math.max(8, Math.min(left, window.innerWidth - mw - 8));
+
+    menu.style.top = top + 'px';
+    menu.style.left = left + 'px';
+    menu.classList.toggle('open-up', openUp);
+  }
+
+  useEffect(() => {
+    if (open) requestAnimationFrame(positionMenu);
+  }, [open]);
+
+  function toggle() {
+    if (open) close();
+    else { setOpen(true); setClosing(false); }
+  }
+
+  const isOpen = open && !closing;
+
+  return (
+    <div ref={wrapRef} style={{ position: 'relative', display: 'inline-block' }}>
+      <button
+        ref={btnRef}
+        type="button"
+        onClick={toggle}
+        style={{
+          width: 30, height: 30, borderRadius: 'var(--rads,8px)',
+          border: isOpen ? '1px solid var(--accent,#f99e2c)' : '1px solid var(--border-light,#d7d8e0)',
+          background: '#fff',
+          cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
+          color: isOpen ? 'var(--accent)' : 'var(--muted,#797b8d)', transition: 'all .14s',
+          boxShadow: isOpen ? '0 0 0 3px rgba(249,158,44,.12)' : '0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06)',
+        }}
+      >
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+          <circle cx="5" cy="12" r="1.5" /><circle cx="12" cy="12" r="1.5" /><circle cx="19" cy="12" r="1.5" />
+        </svg>
+      </button>
+
+      {open && (
+        <div
+          ref={menuRef}
+          style={{
+            position: 'fixed', zIndex: 8100, minWidth: 180, padding: 5,
+            background: '#fff', border: '1.5px solid var(--border-light,#e2e8f0)',
+            borderRadius: 'var(--rads,8px)',
+            boxShadow: '0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.06)',
+            animation: closing
+              ? 'actionsClose .14s ease forwards'
+              : 'actionsDrop .14s cubic-bezier(.16,1,.3,1)',
+          }}
+        >
+          {items.map((item, i) => (
+            item.dividerBefore ? (
+              <div key={i} style={{ height: 1, background: 'var(--border-light,#e2e8f0)', margin: '4px 0' }} />
+            ) : (
+              <div
+                key={i}
+                onClick={() => { close(); item.onClick?.(); }}
+                style={{
+                  display: 'flex', alignItems: 'center', gap: 8,
+                  padding: '6px 10px', borderRadius: 'var(--rads,8px)',
+                  fontSize: 12, cursor: 'pointer', transition: 'all .14s',
+                  color: item.variant === 'danger' ? 'var(--danger)' : item.variant === 'success' ? 'var(--success)' : item.variant === 'warning' ? 'var(--accent)' : 'var(--text,#1a1a2e)',
+                  fontWeight: 500,
+                }}
+                onMouseEnter={e => {
+                  e.currentTarget.style.background = item.variant === 'danger' ? 'rgba(246,71,71,.08)' : item.variant === 'warning' ? 'rgba(249,158,44,.08)' : 'var(--grey-1,#f5f5f8)';
+                }}
+                onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; }}
+              >
+                {item.icon && (
+                  <span style={{
+                    width: 24, height: 24, borderRadius: 5,
+                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    flexShrink: 0, color: 'inherit', fontSize: 12,
+                  }}>{item.icon}</span>
+                )}
+                <span>{item.label}</span>
+              </div>
+            )
+          ))}
+        </div>
+      )}
+
+      <style>{`
+        @keyframes actionsDrop {
+          from { opacity: 0; transform: translateY(-6px) scaleY(.96); }
+          to { opacity: 1; transform: translateY(0) scaleY(1); }
+        }
+        @keyframes actionsClose {
+          from { opacity: 1; transform: translateY(0) scaleY(1); }
+          to { opacity: 0; transform: translateY(-4px) scaleY(.96); }
+        }
+      `}</style>
+    </div>
+  );
+}

package/ActivityCard.jsx

@@ -0,0 +1,184 @@
+import { useMemo, useState, useRef } from 'react';
+
+const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+
+function LegendDot({ color, label }) {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+      <span style={{ width: 7, height: 7, borderRadius: 2, background: color, flexShrink: 0 }} />
+      <span style={{ fontSize: '.55rem', color: 'var(--muted)', fontWeight: 500 }}>{label}</span>
+    </div>
+  );
+}
+
+/**
+ * ActivityCard — day-block bar with hover tooltip
+ */
+export default function ActivityCard({
+  title = 'Activity',
+  subtitle,
+  primary = [],
+  additional = [],
+  totalSlots = 90,
+  greenColor = 'var(--success)',
+  redColor = 'var(--danger)',
+  emptyColor = 'var(--grey-1)',
+  barHeight = 28,
+  barRadius = 3,
+  leftLabel,
+  rightLabel,
+  showDot = true,
+  dotColor,
+  style,
+}) {
+  const [hovered, setHovered] = useState(null);
+  const [tooltipPos, setTooltipPos] = useState({ x: 0, y: 0 });
+  const containerRef = useRef(null);
+
+  const bars = useMemo(() => {
+    const len = Math.max(primary.length, additional.length, totalSlots);
+    const result = [];
+    const stepS = primary.length / len;
+    const stepF = additional.length / len;
+    for (let i = 0; i < len; i++) {
+      const si = Math.min(Math.floor(i * stepS), primary.length - 1);
+      const fi = Math.min(Math.floor(i * stepF), additional.length - 1);
+      result.push({ success: primary[si] || 0, failed: additional[fi] || 0 });
+    }
+    return result;
+  }, [primary, additional, totalSlots]);
+
+  const dates = useMemo(() => {
+    const result = [];
+    const now = new Date();
+    for (let i = 0; i < bars.length; i++) {
+      const d = new Date(now);
+      d.setDate(d.getDate() - (bars.length - 1 - i));
+      result.push(d);
+    }
+    return result;
+  }, [bars.length]);
+
+  const totalSuccess = bars.reduce((a, b) => a + b.success, 0);
+  const totalFailed = bars.reduce((a, b) => a + b.failed, 0);
+  const totalAll = totalSuccess + totalFailed;
+  const uptimePercent = totalAll > 0 ? Math.round((totalSuccess / totalAll) * 100) : 100;
+
+  function handleMouseEnter(e, idx) {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const containerRect = containerRef.current.getBoundingClientRect();
+    setTooltipPos({
+      x: rect.left - containerRect.left + rect.width / 2,
+      y: rect.top - containerRect.top - 8,
+    });
+    setHovered(idx);
+  }
+
+  const h = hovered !== null ? bars[hovered] : null;
+  const hTotal = h ? h.success + h.failed : 0;
+
+  return (
+    <div ref={containerRef} 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: '14px 18px', position: 'relative', ...style,
+    }}>
+      {/* Header */}
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          {showDot && (
+            <span style={{ width: 8, height: 8, borderRadius: '50%', background: dotColor || greenColor, flexShrink: 0 }} />
+          )}
+          <span style={{ fontSize: '.78rem', fontWeight: 700, color: 'var(--primary-text)', letterSpacing: '-.01em' }}>{title}</span>
+          {subtitle && <span style={{ fontSize: '.65rem', color: 'var(--muted)', fontWeight: 500 }}>{subtitle}</span>}
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+          <LegendDot color={greenColor} label="Success" />
+          <LegendDot color={redColor} label="Failed" />
+          <LegendDot color={emptyColor} label="None" />
+        </div>
+      </div>
+
+      {/* Bars */}
+      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 2, height: barHeight, marginBottom: 6 }}>
+        {bars.map((b, i) => {
+          const total = b.success + b.failed;
+          const hasData = total > 0;
+          const successPct = hasData ? (b.success / total) * 100 : 0;
+          const failedPct = hasData ? (b.failed / total) * 100 : 0;
+
+          return (
+            <div
+              key={i}
+              onMouseEnter={(e) => handleMouseEnter(e, i)}
+              onMouseLeave={() => setHovered(null)}
+              style={{
+                flex: 1, height: '100%', borderRadius: barRadius, overflow: 'hidden',
+                display: 'flex', flexDirection: 'column',
+                background: hasData ? 'transparent' : emptyColor,
+                cursor: hasData ? 'pointer' : 'default',
+              }}
+            >
+              {hasData && (
+                <>
+                  {b.failed > 0 && <div style={{ height: `${failedPct}%`, background: redColor, marginTop: 'auto' }} />}
+                  {b.success > 0 && <div style={{ height: `${successPct}%`, background: greenColor }} />}
+                </>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Tooltip */}
+      {hovered !== null && (
+        <div style={{
+          position: 'absolute', left: tooltipPos.x, top: tooltipPos.y,
+          transform: 'translate(-50%, -100%)', background: '#fff',
+          border: '1px solid var(--border)', borderRadius: 'var(--rads, 8px)',
+          boxShadow: '0 4px 12px rgba(0,0,0,.12)', padding: '10px 14px',
+          pointerEvents: 'none', zIndex: 100, whiteSpace: 'nowrap',
+          animation: 'hoverCardIn .15s ease',
+        }}>
+          <div style={{ fontSize: '.65rem', color: 'var(--muted)', fontWeight: 500, marginBottom: 4 }}>
+            {dates[hovered]?.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
+          </div>
+          {h.success > 0 && (
+            <div style={{ fontSize: '.7rem', fontWeight: 700, color: greenColor }}>
+              {h.success} success{h.success !== 1 ? 'es' : ''}
+              {h.failed > 0 && <span style={{ fontWeight: 500, color: 'var(--muted)' }}> ({Math.round((h.success / hTotal) * 100)}%)</span>}
+            </div>
+          )}
+          {h.failed > 0 && (
+            <div style={{ fontSize: '.7rem', fontWeight: 700, color: redColor }}>
+              {h.failed} failed{h.failed !== 1 ? 's' : ''}
+              {h.success > 0 && <span style={{ fontWeight: 500, color: 'var(--muted)' }}> ({Math.round((h.failed / hTotal) * 100)}%)</span>}
+            </div>
+          )}
+          {!h.success && !h.failed && (
+            <div style={{ fontSize: '.7rem', fontWeight: 500, color: 'var(--muted)' }}>No activity</div>
+          )}
+          <div style={{
+            position: 'absolute', left: '50%', bottom: -5,
+            transform: 'translateX(-50%) rotate(45deg)',
+            width: 8, height: 8, background: '#fff',
+            borderRight: '1px solid var(--border)', borderBottom: '1px solid var(--border)',
+          }} />
+        </div>
+      )}
+
+      {/* Footer */}
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <span style={{ fontSize: '.58rem', color: 'var(--muted)', fontWeight: 500 }}>{leftLabel || ''}</span>
+        <span style={{ fontSize: '.78rem', fontWeight: 700, color: greenColor, fontFamily: 'var(--mono)' }}>{uptimePercent}%</span>
+        <span style={{ fontSize: '.58rem', color: 'var(--muted)', fontWeight: 500 }}>{rightLabel || ''}</span>
+      </div>
+      <style>{`
+        @keyframes hoverCardIn {
+          from { opacity: 0; transform: translate(-50%, -100%) translateY(4px); }
+          to { opacity: 1; transform: translate(-50%, -100%) translateY(0); }
+        }
+      `}</style>
+    </div>
+  );
+}