cynx-ui 1.3.13 → 1.3.15

package/components/UptimeBar.jsx

@@ -1,200 +1,200 @@
-import { useMemo, useState, useRef } from 'react';
-
-const card = {
-  background: 'var(--surface,#fff)',
-  border: '1px solid var(--border)',
-  borderRadius: 'var(--rad)',
-  boxShadow: 'var(--shadow, 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04))',
-};
-
-const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
-
-function formatDate(date) {
-  return `${MONTHS[date.getMonth()]} ${date.getDate()}`;
-}
-
-export default function UptimeBar({
-  title = 'Uptime',
-  subtitle,
-  successValues = [],
-  failedValues = [],
-  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(successValues.length, failedValues.length, totalSlots);
-    const result = [];
-    const stepS = successValues.length / len;
-    const stepF = failedValues.length / len;
-    for (let i = 0; i < len; i++) {
-      const si = Math.min(Math.floor(i * stepS), successValues.length - 1);
-      const fi = Math.min(Math.floor(i * stepF), failedValues.length - 1);
-      const s = successValues[si] || 0;
-      const f = failedValues[fi] || 0;
-      result.push({ success: s, failed: f });
-    }
-    return result;
-  }, [successValues, failedValues, 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);
-  }
-
-  return (
-    <div ref={containerRef} style={{ ...card, padding: '14px 18px 14px', 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>
-        {/* Legend */}
-        <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,
-              }}
-            >
-              {hasData && (
-                <>
-                  {/* Failed on bottom */}
-                  {b.failed > 0 && (
-                    <div style={{ height: `${failedPct}%`, background: redColor, marginTop: 'auto' }} />
-                  )}
-                  {/* Success on top */}
-                  {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: 'var(--surface,#fff)',
-          border: '1px solid var(--border)',
-          borderRadius: 'var(--rads)',
-          boxShadow: 'var(--smd, 0 4px 12px rgba(0,0,0,.12))',
-          padding: '8px 12px',
-          pointerEvents: 'none',
-          zIndex: 100,
-          whiteSpace: 'nowrap',
-        }}>
-          <div style={{ fontSize: '.65rem', color: 'var(--muted)', fontWeight: 500, marginBottom: 4 }}>
-            {formatDate(dates[hovered])}
-          </div>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-            {bars[hovered].success > 0 && (
-              <div style={{ fontSize: '.7rem', fontWeight: 700, color: greenColor }}>
-                {bars[hovered].success} success login{bars[hovered].success !== 1 ? 's' : ''}
-                {bars[hovered].failed > 0 && <span style={{ fontWeight: 500, color: 'var(--muted)' }}> ({Math.round((bars[hovered].success / (bars[hovered].success + bars[hovered].failed)) * 100)}%)</span>}
-              </div>
-            )}
-            {bars[hovered].failed > 0 && (
-              <div style={{ fontSize: '.7rem', fontWeight: 700, color: redColor }}>
-                {bars[hovered].failed} failed login{bars[hovered].failed !== 1 ? 's' : ''}
-                {bars[hovered].success > 0 && <span style={{ fontWeight: 500, color: 'var(--muted)' }}> ({Math.round((bars[hovered].failed / (bars[hovered].success + bars[hovered].failed)) * 100)}%)</span>}
-              </div>
-            )}
-            {bars[hovered].success === 0 && bars[hovered].failed === 0 && (
-              <div style={{ fontSize: '.7rem', fontWeight: 500, color: 'var(--muted)' }}>
-                No logins
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-
-      {/* Footer */}
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-        <span style={{ fontSize: '.58rem', color: 'var(--muted)', fontWeight: 500 }}>{leftLabel || '90 days ago'}</span>
-        <span style={{ fontSize: '.78rem', fontWeight: 700, color: greenColor, fontFamily: 'var(--mono)' }}>
-          {uptimePercent}%
-        </span>
-        <span style={{ fontSize: '.58rem', color: 'var(--muted)', fontWeight: 500 }}>{rightLabel || 'Today'}</span>
-      </div>
-    </div>
-  );
-}
-
-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>
-  );
-}
+import { useMemo, useState, useRef } from 'react';
+
+const card = {
+  background: 'var(--surface,#fff)',
+  border: '1px solid var(--border)',
+  borderRadius: 'var(--rad)',
+  boxShadow: 'var(--shadow, 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04))',
+};
+
+const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+
+function formatDate(date) {
+  return `${MONTHS[date.getMonth()]} ${date.getDate()}`;
+}
+
+export default function UptimeBar({
+  title = 'Uptime',
+  subtitle,
+  successValues = [],
+  failedValues = [],
+  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(successValues.length, failedValues.length, totalSlots);
+    const result = [];
+    const stepS = successValues.length / len;
+    const stepF = failedValues.length / len;
+    for (let i = 0; i < len; i++) {
+      const si = Math.min(Math.floor(i * stepS), successValues.length - 1);
+      const fi = Math.min(Math.floor(i * stepF), failedValues.length - 1);
+      const s = successValues[si] || 0;
+      const f = failedValues[fi] || 0;
+      result.push({ success: s, failed: f });
+    }
+    return result;
+  }, [successValues, failedValues, 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);
+  }
+
+  return (
+    <div ref={containerRef} style={{ ...card, padding: '14px 18px 14px', 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>
+        {/* Legend */}
+        <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,
+              }}
+            >
+              {hasData && (
+                <>
+                  {/* Failed on bottom */}
+                  {b.failed > 0 && (
+                    <div style={{ height: `${failedPct}%`, background: redColor, marginTop: 'auto' }} />
+                  )}
+                  {/* Success on top */}
+                  {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: 'var(--surface,#fff)',
+          border: '1px solid var(--border)',
+          borderRadius: 'var(--rads)',
+          boxShadow: 'var(--smd, 0 4px 12px rgba(0,0,0,.12))',
+          padding: '8px 12px',
+          pointerEvents: 'none',
+          zIndex: 100,
+          whiteSpace: 'nowrap',
+        }}>
+          <div style={{ fontSize: '.65rem', color: 'var(--muted)', fontWeight: 500, marginBottom: 4 }}>
+            {formatDate(dates[hovered])}
+          </div>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+            {bars[hovered].success > 0 && (
+              <div style={{ fontSize: '.7rem', fontWeight: 700, color: greenColor }}>
+                {bars[hovered].success} success login{bars[hovered].success !== 1 ? 's' : ''}
+                {bars[hovered].failed > 0 && <span style={{ fontWeight: 500, color: 'var(--muted)' }}> ({Math.round((bars[hovered].success / (bars[hovered].success + bars[hovered].failed)) * 100)}%)</span>}
+              </div>
+            )}
+            {bars[hovered].failed > 0 && (
+              <div style={{ fontSize: '.7rem', fontWeight: 700, color: redColor }}>
+                {bars[hovered].failed} failed login{bars[hovered].failed !== 1 ? 's' : ''}
+                {bars[hovered].success > 0 && <span style={{ fontWeight: 500, color: 'var(--muted)' }}> ({Math.round((bars[hovered].failed / (bars[hovered].success + bars[hovered].failed)) * 100)}%)</span>}
+              </div>
+            )}
+            {bars[hovered].success === 0 && bars[hovered].failed === 0 && (
+              <div style={{ fontSize: '.7rem', fontWeight: 500, color: 'var(--muted)' }}>
+                No logins
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Footer */}
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <span style={{ fontSize: '.58rem', color: 'var(--muted)', fontWeight: 500 }}>{leftLabel || '90 days ago'}</span>
+        <span style={{ fontSize: '.78rem', fontWeight: 700, color: greenColor, fontFamily: 'var(--mono)' }}>
+          {uptimePercent}%
+        </span>
+        <span style={{ fontSize: '.58rem', color: 'var(--muted)', fontWeight: 500 }}>{rightLabel || 'Today'}</span>
+      </div>
+    </div>
+  );
+}
+
+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>
+  );
+}

package/components/XTable.jsx

@@ -1,28 +1,28 @@
-export function XTable({ children, style }) {
-  return <table style={{ width: '100%', borderCollapse: 'collapse', tableLayout: 'fixed', fontSize: '.8rem', ...style }}>{children}</table>;
-}
-export function XThead({ children }) { return <thead>{children}</thead>; }
-export function XTbody({ children }) { return <tbody>{children}</tbody>; }
-export function XTr({ children, onClick }) {
-  return <tr onClick={onClick} style={{ borderBottom: '1px solid var(--border-light, #ebebf0)', transition: 'background .12s', cursor: onClick ? 'pointer' : undefined }}>{children}</tr>;
-}
-export function XTh({ children, style }) {
-  return <th style={{ textAlign: 'left', padding: '8px 10px', fontSize: '.68rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.06em', color: 'var(--muted, #9b9daa)', borderBottom: '1px solid var(--border-light, #ebebf0)', ...style }}>{children}</th>;
-}
-export function XTd({ children, style, className = '', colSpan }) {
-  return <td style={{ padding: '9px 10px', verticalAlign: 'middle', color: 'var(--primary-text, #0f111c)', ...style }} colSpan={colSpan}>{children}</td>;
-}
-
-export function SkeletonTable({ rows = 6, cols = 5 }) {
-  return (
-    <div>
-      {Array.from({ length: rows }).map((_, i) => (
-        <div key={i} style={{ display: 'flex', gap: 8, padding: '8px 10px', borderBottom: '1px solid var(--border-light, #ebebf0)' }}>
-          {Array.from({ length: cols }).map((_, j) => (
-            <div key={j} style={{ height: 12, flex: 1, background: 'linear-gradient(90deg, var(--grey-1, #f5f5f8) 25%, var(--border-light, #ebebf0) 50%, var(--grey-1, #f5f5f8) 75%)', backgroundSize: '600px 100%', animation: 'shimmer 1.4s ease infinite', borderRadius: 'var(--radxs, 6px)' }} />
-          ))}
-        </div>
-      ))}
-    </div>
-  );
-}
+export function XTable({ children, style }) {
+  return <table style={{ width: '100%', borderCollapse: 'collapse', tableLayout: 'fixed', fontSize: '.8rem', ...style }}>{children}</table>;
+}
+export function XThead({ children }) { return <thead>{children}</thead>; }
+export function XTbody({ children }) { return <tbody>{children}</tbody>; }
+export function XTr({ children, onClick }) {
+  return <tr onClick={onClick} style={{ borderBottom: '1px solid var(--border-light, #ebebf0)', transition: 'background .12s', cursor: onClick ? 'pointer' : undefined }}>{children}</tr>;
+}
+export function XTh({ children, style }) {
+  return <th style={{ textAlign: 'left', padding: '8px 10px', fontSize: '.68rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.06em', color: 'var(--muted, #9b9daa)', borderBottom: '1px solid var(--border-light, #ebebf0)', ...style }}>{children}</th>;
+}
+export function XTd({ children, style, className = '', colSpan }) {
+  return <td style={{ padding: '9px 10px', verticalAlign: 'middle', color: 'var(--primary-text, #0f111c)', ...style }} colSpan={colSpan}>{children}</td>;
+}
+
+export function SkeletonTable({ rows = 6, cols = 5 }) {
+  return (
+    <div>
+      {Array.from({ length: rows }).map((_, i) => (
+        <div key={i} style={{ display: 'flex', gap: 8, padding: '8px 10px', borderBottom: '1px solid var(--border-light, #ebebf0)' }}>
+          {Array.from({ length: cols }).map((_, j) => (
+            <div key={j} style={{ height: 12, flex: 1, background: 'linear-gradient(90deg, var(--grey-1, #f5f5f8) 25%, var(--border-light, #ebebf0) 50%, var(--grey-1, #f5f5f8) 75%)', backgroundSize: '600px 100%', animation: 'shimmer 1.4s ease infinite', borderRadius: 'var(--radxs, 6px)' }} />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cynx-ui",
-  "version": "1.3.13",
+  "version": "1.3.15",
   "type": "module",
   "exports": {
     ".": "./index.js"