cynx-ui 1.2.37 → 1.2.39

package/components/Badge.jsx

@@ -41,8 +41,9 @@ function ensureStyles() {
 }
 
 const SIZE_MAP = {
+  xs: { padding: '1.5px 6px', fontSize: '9px' },
   sm: { padding: '2px 7px', fontSize: '10px' },
-  md: { padding: '3px 9px', fontSize: '10.5px' },
+  md: { padding: '3px 9px', fontSize: '11px' },
   lg: { padding: '4px 12px', fontSize: '12px' },
 };
 
@@ -53,9 +54,31 @@ const SHAPE_STYLE = {
   semicircle:(c) => ({ width: 7, height: 7, borderRadius: '50%', border: 'none', borderTop: '2px solid var(--bg,#fff)', background: c }),
 };
 
+const COLOR_MAP = {
+  green: '#10b981', passed: '#10b981', ok: '#10b981',
+  yellow: '#f97316', violation: '#f97316', warn: '#f97316', amber: '#f97316', orange: '#f97316',
+  red: '#ef4444', failed: '#ef4444', err: '#ef4444', danger: '#ef4444',
+  blue: '#3b82f6', conditional: '#3b82f6',
+  purple: '#8b5cf6',
+  indigo: '#6366f1',
+  cyan: '#06b6d4',
+  teal: '#14b8a6',
+  pink: '#ec4899',
+  grey: '#6b7280', gray: '#6b7280', dim: '#6b7280',
+};
+
+function resolveBadgeColor(cStr) {
+  if (!cStr) return null;
+  const c = cStr.toLowerCase();
+  if (COLOR_MAP[c]) return COLOR_MAP[c];
+  if (c.startsWith('#') || c.startsWith('rgb') || c.startsWith('hsl') || c.startsWith('var(')) return cStr;
+  return '#3b82f6';
+}
+
 export default function Badge({
   children,
   variant = 'dim',
+  color = null,
   size = 'md',
   dot = false,
   shape = null,
@@ -69,7 +92,14 @@ export default function Badge({
   const v = VARIANTS[variant] || VARIANTS.dim;
   const sz = SIZE_MAP[size] || SIZE_MAP.md;
   const shapeType = (shape === 'none' || shape === false) ? null : (shape || SHAPES[variant] || null);
-  const dotColor = v.dot || v.color;
+
+  const customHex = resolveBadgeColor(color);
+  const colorStyle = customHex ? {
+    color: customHex,
+    background: `${customHex}18`,
+    border: `1px solid ${customHex}33`,
+  } : {};
+  const dotColor = customHex || v.dot || v.color;
 
   return (
     <span
@@ -88,6 +118,7 @@ export default function Badge({
         whiteSpace: 'nowrap',
         transition: 'all .15s',
         cursor: onClick ? 'pointer' : undefined,
+        ...colorStyle,
         ...style,
       }}
       onClick={onClick}

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/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.37",
+  "version": "1.2.39",
   "type": "module",
   "exports": {
     ".": "./index.js"