cynx-ui 1.2.6 → 1.2.7

package/components/ActivityCard.jsx

@@ -1,184 +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>
-  );
-}
+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>
+  );
+}

package/components/Badge.jsx

@@ -1,105 +1,129 @@
-const STYLES = `
-.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--rfull,99px);font-size:10.5px;font-weight:600;border:1px solid;white-space:nowrap;transition:all .15s}
-.badge-sm{padding:2px 7px;font-size:10px}
-.badge-lg{padding:4px 12px;font-size:12px}
-.badge-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;flex-shrink:0}
-.badge-icon svg{width:12px;height:12px}
-.badge-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:-2px}
-.badge-shape{width:0;height:0;flex-shrink:0}
-.badge-shape.circle{width:7px;height:7px;border-radius:50%;border:none}
-.badge-shape.triangle{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:7px solid;background:none;border-top:none}
-.badge-shape.diamond{width:7px;height:7px;border-radius:1px;transform:rotate(45deg);border:none}
-.badge-shape.semicircle{width:7px;height:7px;border-radius:50%;border:none;border-top:2px solid var(--bg,#fff)}
-
-.badge-ok{background:var(--success-bg,rgba(39,174,96,.1));color:var(--success,#27ae60);border-color:rgba(39,174,96,.2)}
-.badge-ok .badge-dot,.badge-ok .badge-shape.circle{background:var(--success,#27ae60)}
-.badge-err{background:var(--danger-bg,rgba(246,71,71,.1));color:var(--danger,#f64747);border-color:rgba(246,71,71,.2)}
-.badge-err .badge-dot,.badge-err .badge-shape.circle{background:var(--danger,#f64747)}
-.badge-warn{background:var(--accent-bg,rgba(249,158,44,.1));color:var(--accent,#f99e2c);border-color:var(--accent-border,rgba(249,158,44,.25))}
-.badge-warn .badge-dot,.badge-warn .badge-shape.circle{background:var(--accent,#f99e2c)}
-.badge-blue{background:var(--blue-bg,rgba(39,130,228,.1));color:var(--blue,#2782e4);border-color:rgba(39,130,228,.2)}
-.badge-blue .badge-dot,.badge-blue .badge-shape.circle{background:var(--blue,#2782e4)}
-.badge-dim{background:var(--grey-1,#f5f5f8);color:var(--grey-4,#797b8d);border-color:var(--border,#d7d8e0)}
-.badge-dim .badge-dot,.badge-dim .badge-shape.circle{background:var(--grey-4,#797b8d)}
-.badge-purple{background:rgba(139,92,246,.1);color:#8b5cf6;border-color:rgba(139,92,246,.2)}
-.badge-purple .badge-dot,.badge-purple .badge-shape.circle{background:#8b5cf6}
-.badge-teal{background:rgba(20,184,166,.1);color:#14b8a6;border-color:rgba(20,184,166,.2)}
-.badge-teal .badge-dot,.badge-teal .badge-shape.circle{background:#14b8a6}
-.badge-pink{background:rgba(236,72,153,.1);color:#ec4899;border-color:rgba(236,72,153,.2)}
-.badge-pink .badge-dot,.badge-pink .badge-shape.circle{background:#ec4899}
-.badge-ghost{background:transparent;color:var(--t2,var(--grey-4,#797b8d));border-color:var(--bd,var(--border,#d7d8e0))}
-.badge-ghost .badge-dot,.badge-ghost .badge-shape.circle{background:var(--t3,var(--grey-4,#797b8d))}
-
-.badge-paid{background:rgba(30,41,59,.08);color:#1e293b;border-color:rgba(30,41,59,.15)}
-.badge-paid .badge-shape.circle{background:#1e293b}
-.badge-invoiced{background:rgba(120,120,130,.08);color:#787882;border-color:rgba(120,120,130,.15)}
-.badge-invoiced .badge-shape.circle{background:#787882}
-.badge-verified{background:rgba(34,197,94,.08);color:#22c55e;border-color:rgba(34,197,94,.15)}
-.badge-verified .badge-shape.circle{background:#22c55e}
-.badge-partial{background:rgba(100,100,110,.08);color:#64646e;border-color:rgba(100,100,110,.15)}
-.badge-partial .badge-shape.semicircle{background:#64646e}
-.badge-deleted{background:rgba(239,68,68,.08);color:#ef4444;border-color:rgba(239,68,68,.15)}
-.badge-deleted .badge-shape.circle{background:#ef4444}
-.badge-update{background:rgba(249,115,22,.08);color:#f97316;border-color:rgba(249,115,22,.15)}
-.badge-update .badge-shape.triangle{border-bottom-color:#f97316}
-.badge-ready{background:rgba(234,179,8,.08);color:#eab308;border-color:rgba(234,179,8,.15)}
-.badge-ready .badge-shape.diamond{background:#eab308}
-.badge-new{background:rgba(59,130,246,.08);color:#3b82f6;border-color:rgba(59,130,246,.15)}
-.badge-new .badge-shape.circle{background:#3b82f6}
-
-.badge-active{background:transparent;color:#22c55e;border:none;padding:3px 0}
-.badge-active .badge-dot,.badge-active .badge-icon svg{color:#22c55e}
-.badge-inactive{background:transparent;color:#ef4444;border:none;padding:3px 0}
-.badge-inactive .badge-dot,.badge-inactive .badge-icon svg{color:#ef4444}
-.badge-pending{background:transparent;color:#d97706;border:none;padding:3px 0}
-.badge-pending .badge-dot{background:#d97706;animation:badge-pulse 1.5s ease-in-out infinite}
-.badge-pending .badge-icon svg{color:#d97706}
-@keyframes badge-pulse{0%,100%{opacity:1}50%{opacity:.4}}
-
-.badge-clickable{cursor:pointer}
-.badge-clickable:hover{filter:brightness(.92)}
-.badge-clickable:active{}
-`;
-
-const SHAPE_MAP = {
-  ok: 'circle', err: 'circle', warn: 'circle', blue: 'circle', dim: 'circle',
-  purple: 'circle', teal: 'circle', pink: 'circle', ghost: 'circle',
-  paid: 'circle', invoiced: 'circle', verified: 'circle', partial: 'semicircle',
-  deleted: 'circle', update: 'triangle', ready: 'diamond', new: 'circle',
-};
-
-let styleInjected = false;
-
-export default function Badge({
-  children,
-  variant = 'dim',
-  size = 'md',
-  dot = false,
-  shape = null,
-  icon = null,
-  onClick = null,
-  style = {},
-  className = '',
-}) {
-  if (!styleInjected && typeof document !== 'undefined') {
-    const tag = document.createElement('style');
-    tag.textContent = STYLES;
-    document.head.appendChild(tag);
-    styleInjected = true;
-  }
-
-  const sizeClass = size === 'sm' ? ' badge-sm' : size === 'lg' ? ' badge-lg' : '';
-  const clickClass = onClick ? ' badge-clickable' : '';
-  const classes = `badge badge-${variant}${sizeClass}${clickClass}${className ? ' ' + className : ''}`;
-
-  const shapeType = shape || SHAPE_MAP[variant] || null;
-
-  return (
-    <span className={classes} style={style} onClick={onClick}>
-      {dot && <span className="badge-dot" />}
-      {shapeType && !dot && <span className={`badge-shape ${shapeType}`} />}
-      {icon && <span className="badge-icon">{icon}</span>}
-      {children}
-    </span>
-  );
-}
+const VARIANTS = {
+  ok:       { bg: 'var(--success-bg,rgba(39,174,96,.1))', color: 'var(--success,#27ae60)', border: 'rgba(39,174,96,.2)', dot: 'var(--success,#27ae60)' },
+  err:      { bg: 'var(--danger-bg,rgba(246,71,71,.1))', color: 'var(--danger,#f64747)', border: 'rgba(246,71,71,.2)', dot: 'var(--danger,#f64747)' },
+  warn:     { bg: 'var(--accent-bg,rgba(249,158,44,.1))', color: 'var(--accent,#f99e2c)', border: 'var(--accent-border,rgba(249,158,44,.25))', dot: 'var(--accent,#f99e2c)' },
+  blue:     { bg: 'var(--blue-bg,rgba(39,130,228,.1))', color: 'var(--blue,#2782e4)', border: 'rgba(39,130,228,.2)', dot: 'var(--blue,#2782e4)' },
+  dim:      { bg: 'var(--grey-1,#f5f5f8)', color: 'var(--grey-4,#797b8d)', border: 'var(--border,#d7d8e0)', dot: 'var(--grey-4,#797b8d)' },
+  purple:   { bg: 'rgba(139,92,246,.1)', color: '#8b5cf6', border: 'rgba(139,92,246,.2)', dot: '#8b5cf6' },
+  teal:     { bg: 'rgba(20,184,166,.1)', color: '#14b8a6', border: 'rgba(20,184,166,.2)', dot: '#14b8a6' },
+  pink:     { bg: 'rgba(236,72,153,.1)', color: '#ec4899', border: 'rgba(236,72,153,.2)', dot: '#ec4899' },
+  ghost:    { bg: 'transparent', color: 'var(--t2,var(--grey-4,#797b8d))', border: 'var(--bd,var(--border,#d7d8e0))', dot: 'var(--t3,var(--grey-4,#797b8d))' },
+  paid:     { bg: 'rgba(30,41,59,.08)', color: '#1e293b', border: 'rgba(30,41,59,.15)', dot: '#1e293b' },
+  invoiced: { bg: 'rgba(120,120,130,.08)', color: '#787882', border: 'rgba(120,120,130,.15)', dot: '#787882' },
+  verified: { bg: 'rgba(34,197,94,.08)', color: '#22c55e', border: 'rgba(34,197,94,.15)', dot: '#22c55e' },
+  partial:  { bg: 'rgba(100,100,110,.08)', color: '#64646e', border: 'rgba(100,100,110,.15)', dot: '#64646e' },
+  deleted:  { bg: 'rgba(239,68,68,.08)', color: '#ef4444', border: 'rgba(239,68,68,.15)', dot: '#ef4444' },
+  update:   { bg: 'rgba(249,115,22,.08)', color: '#f97316', border: 'rgba(249,115,22,.15)', dot: '#f97316' },
+  ready:    { bg: 'rgba(234,179,8,.08)', color: '#eab308', border: 'rgba(234,179,8,.15)', dot: '#eab308' },
+  new:      { bg: 'rgba(59,130,246,.08)', color: '#3b82f6', border: 'rgba(59,130,246,.15)', dot: '#3b82f6' },
+  active:   { bg: 'transparent', color: '#22c55e', border: 'none', dot: '#22c55e', noPad: true },
+  inactive: { bg: 'transparent', color: '#ef4444', border: 'none', dot: '#ef4444', noPad: true },
+  pending:  { bg: 'transparent', color: '#d97706', border: 'none', dot: '#d97706', noPad: true, pulse: true },
+};
+
+const SHAPES = {
+  ok: 'circle', err: 'circle', warn: 'circle', blue: 'circle', dim: 'circle',
+  purple: 'circle', teal: 'circle', pink: 'circle', ghost: 'circle',
+  paid: 'circle', invoiced: 'circle', verified: 'circle', partial: 'semicircle',
+  deleted: 'circle', update: 'triangle', ready: 'diamond', new: 'circle',
+};
+
+const KEYFRAMES = `@keyframes badge-pulse{0%,100%{opacity:1}50%{opacity:.4}}`;
+let styleInjected = false;
+
+function ensureStyles() {
+  if (styleInjected || typeof document === 'undefined') return;
+  const tag = document.createElement('style');
+  tag.textContent = KEYFRAMES;
+  document.head.appendChild(tag);
+  styleInjected = true;
+}
+
+const SIZE_MAP = {
+  sm: { padding: '2px 7px', fontSize: '10px' },
+  md: { padding: '3px 9px', fontSize: '10.5px' },
+  lg: { padding: '4px 12px', fontSize: '12px' },
+};
+
+const SHAPE_STYLE = {
+  circle:   (c) => ({ width: 7, height: 7, borderRadius: '50%', background: c, border: 'none' }),
+  triangle: (c) => ({ width: 0, height: 0, borderLeft: '4px solid transparent', borderRight: '4px solid transparent', borderBottom: `7px solid ${c}`, background: 'none', borderTop: 'none' }),
+  diamond:  (c) => ({ width: 7, height: 7, borderRadius: 1, transform: 'rotate(45deg)', background: c, border: 'none' }),
+  semicircle:(c) => ({ width: 7, height: 7, borderRadius: '50%', border: 'none', borderTop: '2px solid var(--bg,#fff)', background: c }),
+};
+
+export default function Badge({
+  children,
+  variant = 'dim',
+  size = 'md',
+  dot = false,
+  shape = null,
+  icon = null,
+  onClick = null,
+  style = {},
+  className = '',
+}) {
+  ensureStyles();
+
+  const v = VARIANTS[variant] || VARIANTS.dim;
+  const sz = SIZE_MAP[size] || SIZE_MAP.md;
+  const shapeType = shape || SHAPES[variant] || null;
+  const dotColor = v.dot || v.color;
+
+  return (
+    <span
+      className={className}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 5,
+        padding: v.noPad ? '3px 0' : sz.padding,
+        borderRadius: 'var(--rfull,99px)',
+        fontSize: sz.fontSize,
+        fontWeight: 600,
+        border: `1px solid ${v.border}`,
+        background: v.bg,
+        color: v.color,
+        whiteSpace: 'nowrap',
+        transition: 'all .15s',
+        cursor: onClick ? 'pointer' : undefined,
+        ...style,
+      }}
+      onClick={onClick}
+    >
+      {dot && (
+        <span style={{
+          width: 6,
+          height: 6,
+          borderRadius: '50%',
+          flexShrink: 0,
+          marginTop: -2,
+          background: dotColor,
+          animation: v.pulse ? 'badge-pulse 1.5s ease-in-out infinite' : undefined,
+        }} />
+      )}
+      {shapeType && !dot && (
+        <span style={{
+          width: 0,
+          height: 0,
+          flexShrink: 0,
+          ...(SHAPE_STYLE[shapeType] ? SHAPE_STYLE[shapeType](dotColor) : {}),
+        }} />
+      )}
+      {icon && (
+        <span style={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: 14,
+          height: 14,
+          flexShrink: 0,
+          color: dotColor,
+        }}>
+          {icon}
+        </span>
+      )}
+      {children}
+    </span>
+  );
+}