cynx-lib 1.3.28

package/ui/components/CircularProgress.jsx

@@ -0,0 +1,216 @@
+import { useEffect, useRef } from 'react';
+
+const SIZES = {
+  xs: { svg: 48, stroke: 4, fontSize: '.7rem' },
+  sm: { svg: 64, stroke: 5, fontSize: '.85rem' },
+  md: { svg: 80, stroke: 6, fontSize: '1rem' },
+  lg: { svg: 100, stroke: 7, fontSize: '1.15rem' },
+  xl: { svg: 120, stroke: 8, fontSize: '1.3rem' },
+};
+
+export default function CircularProgress({
+  value = 0,
+  segments,
+  size = 'md',
+  customSize,
+  color = 'var(--blue, #2782e4)',
+  trackColor = 'var(--bd2, #e0e0e4)',
+  label = '',
+  centerText,
+  showPercent = true,
+  animated = true,
+  rounded = true,
+  indeterminate = false,
+  speed = 1,
+  strokeWidth,
+  gap = 4,
+  className = '',
+  style = {},
+}) {
+  const base = SIZES[size] || SIZES.md;
+  const svg = customSize || base.svg;
+  const stroke = strokeWidth ?? (customSize ? Math.max(3, svg * 0.06) : base.stroke);
+  const fontSize = customSize ? `${Math.max(11, svg * 0.13)}px` : base.fontSize;
+  const cx = svg / 2;
+  const cy = svg / 2;
+  const r = (svg - stroke) / 2;
+  const c = 2 * Math.PI * r;
+  const pct = Math.min(100, Math.max(0, value));
+  const BIG = c * 4;
+  const isRounded = rounded !== false;
+  const cap = isRounded ? 'round' : 'butt';
+
+  const userGap = gap !== undefined ? gap : (isRounded ? c * 0.05 : c * 0.03);
+  const capOverrun = isRounded ? stroke : 0;
+  const gapSize = userGap + capOverrun;
+  const total = c - 2 * gapSize;
+
+  const isFull = pct >= 100;
+  const isEmpty = pct <= 0;
+
+  const hasSegments = Array.isArray(segments) && segments.length > 0;
+  const rawSum = hasSegments ? segments.reduce((sum, s) => sum + (Number(s.value) || 0), 0) : 0;
+
+  let indDash, indOffset, trackDash, trackOffset, indOpacity;
+
+  if (isEmpty) {
+    indDash = `0,${BIG}`; indOffset = 0;
+    trackDash = `${c},${BIG}`; trackOffset = 0;
+    indOpacity = 0;
+  } else if (isFull) {
+    indDash = `${c + stroke * 2},${BIG}`; indOffset = 0;
+    trackDash = `0,${BIG}`; trackOffset = 0;
+    indOpacity = 1;
+  } else {
+    const activeLen = (pct / 100) * total;
+    const inactiveLen = total - activeLen;
+    indDash = `${activeLen},${BIG}`; indOffset = 0;
+    trackDash = `${inactiveLen},${BIG}`; trackOffset = -(activeLen + gapSize);
+    indOpacity = 1;
+  }
+
+  const gRef = useRef(null);
+  const indRef = useRef(null);
+  const trackRef = useRef(null);
+
+  useEffect(() => {
+    if (!indeterminate) return;
+    const capRad = (180 / Math.PI) * (stroke / r) / 2;
+    const gapRad = (180 / Math.PI) * (gapSize / r);
+    const gapArcLen = (capRad + gapRad) / 360 * c;
+    let angle = -90, arcFrac = 0.45, arcDir = 1, raf;
+    let lastTime = performance.now();
+    function tick(now) {
+      const dt = (now - lastTime) / 16.67;
+      lastTime = now;
+      angle = (angle + 3.6 * speed * dt) % 360;
+      arcFrac += 0.006 * arcDir * speed * dt;
+      if (arcFrac >= 0.72) { arcFrac = 0.72; arcDir = -1; }
+      if (arcFrac <= 0.18) { arcFrac = 0.18; arcDir = 1; }
+      const indLen = c * arcFrac;
+      const trackLen = Math.max(0, c - indLen - gapArcLen * 2);
+      if (gRef.current) gRef.current.style.transform = `rotate(${angle}deg)`;
+      if (indRef.current) indRef.current.setAttribute('stroke-dasharray', `${indLen.toFixed(2)},9999`);
+      if (trackRef.current) {
+        trackRef.current.setAttribute('stroke-dasharray', `${trackLen.toFixed(2)},9999`);
+        trackRef.current.setAttribute('stroke-dashoffset', `${(-(indLen + gapArcLen)).toFixed(2)}`);
+      }
+      raf = requestAnimationFrame(tick);
+    }
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [indeterminate, c, stroke, r, gapSize, speed]);
+
+  return (
+    <div className={className} style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 4, ...style }}>
+      <div style={{ position: 'relative', width: svg, height: svg }}>
+        <svg width={svg} height={svg} viewBox={`0 0 ${svg} ${svg}`}>
+          {indeterminate ? (
+            <g ref={gRef} style={{ transformOrigin: `${cx}px ${cy}px` }}>
+              <circle
+                ref={trackRef}
+                cx={cx} cy={cy} r={r}
+                fill="none" stroke={trackColor} strokeWidth={stroke} strokeLinecap={cap}
+              />
+              <circle
+                ref={indRef}
+                cx={cx} cy={cy} r={r}
+                fill="none" stroke={color} strokeWidth={stroke} strokeLinecap={cap}
+              />
+            </g>
+          ) : hasSegments ? (
+            <>
+              {rawSum <= 0 ? (
+                <circle
+                  cx={cx} cy={cy} r={r}
+                  fill="none" stroke={trackColor} strokeWidth={stroke}
+                />
+              ) : (
+                (() => {
+                  const activeSegs = segments.filter((seg) => (Number(seg.value) || 0) > 0);
+                  const segCount = activeSegs.length;
+                  if (segCount === 0) {
+                    return (
+                      <circle
+                        cx={cx} cy={cy} r={r}
+                        fill="none" stroke={trackColor} strokeWidth={stroke}
+                      />
+                    );
+                  }
+
+                  const gapPx = gap !== undefined ? gap : 4;
+                  const capOverrun = isRounded ? stroke : 0;
+                  const gapArc = segCount > 1 ? (gapPx + capOverrun) : 0;
+                  const availableC = Math.max(0, c - segCount * gapArc);
+
+                  let accumulatedArc = isRounded ? stroke / 2 : 0;
+
+                  return activeSegs.map((seg, idx) => {
+                    const val = Number(seg.value) || 0;
+                    const segLen = (val / rawSum) * availableC;
+                    const currentOffset = accumulatedArc;
+                    accumulatedArc += segLen + gapArc;
+
+                    return (
+                      <circle
+                        key={idx}
+                        cx={cx} cy={cy} r={r}
+                        fill="none" stroke={seg.color || color} strokeWidth={stroke}
+                        strokeLinecap={cap}
+                        strokeDasharray={`${Math.max(0.1, segLen).toFixed(2)}, ${BIG}`}
+                        strokeDashoffset={(-currentOffset).toFixed(2)}
+                        style={{
+                          transform: 'rotate(-90deg)', transformOrigin: '50% 50%',
+                          transition: animated ? 'stroke-dasharray .5s cubic-bezier(0.4,0,0.2,1), stroke-dashoffset .5s cubic-bezier(0.4,0,0.2,1)' : 'none',
+                        }}
+                      >
+                        {seg.label && <title>{`${seg.label}: ${val}`}</title>}
+                      </circle>
+                    );
+                  });
+                })()
+              )}
+            </>
+          ) : (
+            <>
+              <circle
+                cx={cx} cy={cy} r={r}
+                fill="none" stroke={trackColor} strokeWidth={stroke}
+                strokeLinecap={cap}
+                strokeDasharray={trackDash} strokeDashoffset={trackOffset}
+                style={{
+                  transform: 'rotate(-90deg)', transformOrigin: '50% 50%',
+                  transition: animated ? 'stroke-dasharray .5s cubic-bezier(0.4,0,0.2,1), stroke-dashoffset .5s cubic-bezier(0.4,0,0.2,1)' : 'none',
+                }}
+              />
+              <circle
+                cx={cx} cy={cy} r={r}
+                fill="none" stroke={color} strokeWidth={stroke}
+                strokeLinecap={cap}
+                strokeDasharray={indDash} strokeDashoffset={indOffset}
+                style={{
+                  transform: 'rotate(-90deg)', transformOrigin: '50% 50%',
+                  opacity: indOpacity,
+                  transition: animated ? 'stroke-dasharray .5s cubic-bezier(0.4,0,0.2,1), opacity .2s' : 'none',
+                }}
+              />
+            </>
+          )}
+        </svg>
+        {showPercent && !indeterminate && (
+          <div style={{
+            position: 'absolute', inset: 0,
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+            fontSize, fontWeight: 600, color: 'var(--primary-text, #0f172a)',
+            fontVariantNumeric: 'tabular-nums',
+          }}>
+            {centerText !== undefined ? centerText : hasSegments ? rawSum : `${Math.round(pct)}%`}
+          </div>
+        )}
+      </div>
+      {label && (
+        <span style={{ fontSize: '.6rem', color: 'var(--muted, #797b8d)', fontWeight: 500 }}>{label}</span>
+      )}
+    </div>
+  );
+}

package/ui/components/Confirm.jsx

@@ -0,0 +1,79 @@
+import { useState, useEffect } from 'react';
+import { AlertTriangle } from 'lucide-react';
+import Button from './Button.jsx';
+
+let _show = null;
+
+export function ConfirmRoot() {
+  const [state,   setState]   = useState(null);
+  const [closing, setClosing] = useState(false);
+
+  useEffect(() => {
+    _show = (opts) => new Promise(resolve => {
+      setClosing(false);
+      setState({ ...opts, resolve });
+    });
+    return () => { _show = null; };
+  }, []);
+
+  if (!state) return null;
+
+  function answer(val) {
+    setClosing(true);
+    setTimeout(() => { state.resolve(val); setState(null); }, 250);
+  }
+
+  return (
+    <div
+      style={{
+        position: 'fixed', inset: 0,
+        background: 'rgba(20,22,41,.5)',
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        zIndex: 99999, padding: 20,
+        animation: `${closing ? 'backdropClose' : 'backdropFade'} .25s ease forwards`,
+      }}
+      onClick={e => e.target === e.currentTarget && answer(false)}
+    >
+      <div style={{
+        background: 'var(--surface, #ffffff)', border: '1px solid var(--border, #e2e8f0)',
+        borderRadius: 14, width: '100%', maxWidth: 400,
+        boxShadow: 'var(--slg, 0 20px 60px rgba(0,0,0,.4))',
+        animation: `${closing ? 'modalClose' : 'modalPop'} .25s cubic-bezier(.4,0,.2,1) forwards`,
+      }}>
+        <div style={{ padding: '20px 20px 0', display: 'flex', gap: 14, alignItems: 'flex-start' }}>
+          <div style={{
+            width: 36, height: 36, borderRadius: '50%', flexShrink: 0,
+            background: state.danger ? 'var(--dd, rgba(246,71,71,.1))' : 'var(--pd, rgba(249,158,44,.1))',
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+          }}>
+            <AlertTriangle size={17} color={state.danger ? 'var(--danger, #f64747)' : 'var(--warning, #f59e0b)'} />
+          </div>
+          <div>
+            <div style={{ fontWeight: 700, fontSize: '.9rem', marginBottom: 6 }}>
+              {state.title || 'Are you sure?'}
+            </div>
+            <div style={{ fontSize: '.8rem', color: 'var(--muted, #797b8d)', lineHeight: 1.6 }}>
+              {state.message}
+            </div>
+          </div>
+        </div>
+        <div style={{
+          display: 'flex', justifyContent: 'flex-end', gap: 8,
+          padding: '16px 20px', marginTop: 18,
+          borderTop: '1px solid var(--border-light, #ebebf0)',
+          background: 'var(--grey-1, #f5f5f8)', borderRadius: '0 0 14px 14px',
+        }}>
+          <Button variant="ghost" size="sm" onClick={() => answer(false)}>Cancel</Button>
+          <Button variant={state.danger ? 'ghost' : 'primary'} size="sm" style={state.danger ? { background: 'var(--danger, #f64747)', color: 'var(--def-btn-text,#fff)', border: 'none' } : {}} onClick={() => answer(true)}>
+            {state.confirmLabel || 'Confirm'}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function confirm(opts) {
+  if (!_show) return Promise.resolve(false);
+  return _show(typeof opts === 'string' ? { message: opts } : opts);
+}