cynx-ui 1.3.13 → 1.3.15

package/components/CircularProgress.jsx

@@ -1,216 +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)',
-  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)',
-            fontVariantNumeric: 'tabular-nums',
-          }}>
-            {centerText !== undefined ? centerText : hasSegments ? rawSum : `${Math.round(pct)}%`}
-          </div>
-        )}
-      </div>
-      {label && (
-        <span style={{ fontSize: '.6rem', color: 'var(--muted)', fontWeight: 500 }}>{label}</span>
-      )}
-    </div>
-  );
-}
+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)',
+  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)',
+            fontVariantNumeric: 'tabular-nums',
+          }}>
+            {centerText !== undefined ? centerText : hasSegments ? rawSum : `${Math.round(pct)}%`}
+          </div>
+        )}
+      </div>
+      {label && (
+        <span style={{ fontSize: '.6rem', color: 'var(--muted)', fontWeight: 500 }}>{label}</span>
+      )}
+    </div>
+  );
+}