cynx-ui 1.2.36 → 1.2.38

package/components/CircularProgress.jsx

@@ -10,14 +10,16 @@ const SIZES = {
 
 export default function CircularProgress({
   value = 0,
+  segments,
   size = 'md',
   customSize,
   color = 'var(--blue)',
   trackColor = 'var(--bd2, #e0e0e4)',
   label = '',
+  centerText,
   showPercent = true,
   animated = true,
-  rounded = false,
+  rounded = true,
   indeterminate = false,
   speed = 1,
   strokeWidth,
@@ -35,38 +37,36 @@ export default function CircularProgress({
   const c = 2 * Math.PI * r;
   const pct = Math.min(100, Math.max(0, value));
   const BIG = c * 4;
-  const cap = rounded ? 'round' : 'butt';
+  const isRounded = rounded !== false;
+  const cap = isRounded ? 'round' : 'butt';
 
-  const userGap = gap !== undefined ? gap : (rounded ? c * 0.05 : c * 0.03);
-  const capOverrun = rounded ? stroke : 0;
+  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;
-  let indStartDeg, indEndDeg, trackStartDeg, trackEndDeg;
 
   if (isEmpty) {
     indDash = `0,${BIG}`; indOffset = 0;
     trackDash = `${c},${BIG}`; trackOffset = 0;
     indOpacity = 0;
-    indStartDeg = indEndDeg = trackStartDeg = trackEndDeg = 0;
   } else if (isFull) {
     indDash = `${c + stroke * 2},${BIG}`; indOffset = 0;
     trackDash = `0,${BIG}`; trackOffset = 0;
     indOpacity = 1;
-    indStartDeg = 0; indEndDeg = 360;
-    trackStartDeg = trackEndDeg = 0;
   } else {
     const activeLen = (pct / 100) * total;
     const inactiveLen = total - activeLen;
     indDash = `${activeLen},${BIG}`; indOffset = 0;
     trackDash = `${inactiveLen},${BIG}`; trackOffset = -(activeLen + gapSize);
     indOpacity = 1;
-    indStartDeg = 0; indEndDeg = (pct / 100) * 360;
-    trackStartDeg = (pct / 100) * 360; trackEndDeg = 360;
   }
 
   const gRef = useRef(null);
@@ -118,6 +118,59 @@ export default function CircularProgress({
                 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
@@ -151,7 +204,7 @@ export default function CircularProgress({
             fontSize, fontWeight: 600, color: 'var(--primary-text)',
             fontVariantNumeric: 'tabular-nums',
           }}>
-            {Math.round(pct)}%
+            {centerText !== undefined ? centerText : hasSegments ? rawSum : `${Math.round(pct)}%`}
           </div>
         )}
       </div>

package/components/DatePicker.jsx

@@ -21,6 +21,17 @@ function toKey(y, m, d) { return `${y}-${pad(m+1)}-${pad(d)}`; }
 function toDate(val) {
   if (!val) return null;
   if (val instanceof Date) return isNaN(val.getTime()) ? null : val;
+  if (typeof val === 'string') {
+    const parts = val.split('-');
+    if (parts.length === 3) {
+      const y = parseInt(parts[0], 10);
+      const m = parseInt(parts[1], 10) - 1;
+      const d = parseInt(parts[2], 10);
+      if (!isNaN(y) && !isNaN(m) && !isNaN(d)) {
+        return new Date(y, m, d);
+      }
+    }
+  }
   const d = new Date(val);
   return isNaN(d.getTime()) ? null : d;
 }

package/components/LineProgress.jsx

@@ -10,6 +10,7 @@ const SIZES = {
 
 export default function LineProgress({
   value = 0,
+  segments,
   size = 'md',
   customSize,
   color = 'var(--blue)',
@@ -57,13 +58,15 @@ export default function LineProgress({
   }, [indeterminate, speed]);
 
   const transitionStyle = animated ? 'flex .5s cubic-bezier(0.4,0,0.2,1)' : 'none';
+  const hasSegments = Array.isArray(segments) && segments.length > 0;
+  const rawSum = hasSegments ? segments.reduce((sum, s) => sum + (Number(s.value) || 0), 0) : 0;
 
   return (
     <div className={className} style={{ display: 'inline-flex', flexDirection: 'column', gap: labelGap, width: '100%', ...style }}>
       {(label || showPercent) && (
         <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
           {label && <span style={{ fontSize, fontWeight: 600, color: 'var(--primary-text, #1a1a2e)' }}>{label}</span>}
-          {showPercent && !indeterminate && (
+          {showPercent && !indeterminate && !hasSegments && (
             <span style={{ fontSize, fontWeight: 600, color: 'var(--muted, #9ca3af)', fontVariantNumeric: 'tabular-nums', marginLeft: label ? 0 : 'auto' }}>
               {Math.round(pct)}%
             </span>
@@ -87,6 +90,27 @@ export default function LineProgress({
               }}
             />
           </>
+        ) : hasSegments && rawSum > 0 ? (
+          <>
+            {segments.map((seg, idx) => {
+              const segVal = Number(seg.value) || 0;
+              if (segVal <= 0) return null;
+              const ratioPct = (segVal / rawSum) * 100;
+              return (
+                <div
+                  key={idx}
+                  title={seg.label ? `${seg.label}: ${segVal}` : undefined}
+                  style={{
+                    flex: ratioPct,
+                    height: '100%',
+                    borderRadius: radius,
+                    background: seg.color || color,
+                    transition: transitionStyle,
+                  }}
+                />
+              );
+            })}
+          </>
         ) : (
           <>
             <div ref={barRef} style={{

package/package.json

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