cynx-ui 1.2.6 → 1.2.7

package/components/Button.jsx

@@ -1,41 +1,101 @@
 import { Spinner } from './Spinner';
 
-const STYLES = `
-.cbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:var(--rads,8px);font-family:var(--f,var(--sans,inherit));font-weight:500;cursor:pointer;border:1px solid transparent;white-space:nowrap;transition:all .14s;letter-spacing:-.01em;outline:none;box-shadow:var(--shadow,0 1px 3px rgba(20,22,41,.1))}
-.cbtn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
-.cbtn:active:not(:disabled){ }
+const VARIANTS = {
+  default: {
+    background: '#fff',
+    color: 'var(--def-btn-text,#0f111c)',
+    border: '1px solid var(--bd,#d7d8e0)',
+    hoverBg: 'var(--grey-1,#f5f5f8)',
+    hoverBorder: 'var(--grey-2,#ebebee)',
+  },
+  primary: {
+    background: 'var(--accent,#f99e2c)',
+    color: '#fff',
+    border: '1px solid transparent',
+    hoverBg: 'var(--accent-hover,#e68d1f)',
+    hoverShadow: '0 2px 8px rgba(249,158,44,.35)',
+  },
+  secondary: {
+    background: 'var(--blue-bg,rgba(39,130,228,.1))',
+    color: 'var(--blue,#2782e4)',
+    border: '1px solid rgba(39,130,228,.2)',
+    hoverBg: 'rgba(39,130,228,.18)',
+    hoverShadow: '0 2px 8px rgba(39,130,228,.25)',
+  },
+  danger: {
+    background: 'var(--danger-bg,rgba(246,71,71,.1))',
+    color: 'var(--danger,#f64747)',
+    border: '1px solid rgba(246,71,71,.2)',
+    hoverBg: 'rgba(246,71,71,.18)',
+    hoverShadow: '0 2px 8px rgba(246,71,71,.25)',
+  },
+  success: {
+    background: 'var(--success-bg,rgba(39,174,96,.1))',
+    color: 'var(--success,#27ae60)',
+    border: '1px solid rgba(39,174,96,.2)',
+    hoverBg: 'rgba(39,174,96,.18)',
+    hoverShadow: '0 2px 8px rgba(39,174,96,.25)',
+  },
+  warning: {
+    background: 'var(--accent-bg,rgba(249,158,44,.1))',
+    color: 'var(--accent,#f99e2c)',
+    border: '1px solid var(--accent-border,rgba(249,158,44,.25))',
+    hoverBg: 'rgba(249,158,44,.18)',
+    hoverShadow: '0 2px 8px rgba(249,158,44,.25)',
+  },
+  ghost: {
+    background: 'transparent',
+    color: 'var(--t2,#797b8d)',
+    border: '1px solid var(--bd,#d7d8e0)',
+    hoverColor: 'var(--t1,#1a1a2e)',
+    hoverBg: 'var(--grey-1,#f5f5f8)',
+    hoverBorder: 'var(--grey-2,#ebebee)',
+  },
+  outline: {
+    background: 'transparent',
+    color: 'var(--accent,#f99e2c)',
+    border: '1px solid var(--accent,#f99e2c)',
+    hoverBg: 'var(--accent-bg,rgba(249,158,44,.1))',
+  },
+  link: {
+    background: 'transparent',
+    color: 'var(--accent,#f99e2c)',
+    border: '1px solid transparent',
+    paddingLeft: 4,
+    paddingRight: 4,
+    boxShadow: 'none',
+    hoverTextDec: 'underline',
+  },
+  'no-line': {
+    background: 'none',
+    border: 'none',
+    boxShadow: 'none',
+    color: 'var(--t3,#8a96b0)',
+    paddingLeft: 14,
+    paddingRight: 14,
+    borderRadius: 'var(--rmd,8px)',
+    hoverColor: 'var(--p,var(--accent,#f99e2c))',
+    hoverBg: 'var(--pd,var(--accent-bg,rgba(249,158,44,.1)))',
+  },
+};
 
-.cbtn-xs{padding:4px 8px;font-size:12px;height:28px}
-.cbtn-sm{padding:4px 8px;font-size:12px;height:32px}
-.cbtn-md{padding:8px 16px;font-size:13px;height:38px}
-.cbtn-lg{padding:10px 20px;font-size:14px;height:44px}
-.cbtn-icon{padding:0;width:30px;height:30px;border-radius:var(--rads,8px);display:inline-flex;align-items:center;justify-content:center;line-height:0}
-.cbtn-icon svg{margin:-1px 0 0 -1px}
+const SIZES = {
+  xs: { padding: '4px 8px', fontSize: 12, height: 28 },
+  sm: { padding: '4px 8px', fontSize: 12, height: 32 },
+  md: { padding: '8px 16px', fontSize: 13, height: 38 },
+  lg: { padding: '10px 20px', fontSize: 14, height: 44 },
+};
 
-.cbtn-default{background:#fff;color:var(--def-btn-text,#0f111c);border-color:var(--bd,#d7d8e0)}
-.cbtn-default:hover:not(:disabled){background:var(--grey-1,#f5f5f8);color:var(--def-btn-text,#0f111c);border-color:var(--grey-2,#ebebee)}
-.cbtn-default:active:not(:disabled){background:var(--grey-1,#f5f5f8);color:var(--def-btn-text,#0f111c);border-color:var(--grey-2,#ebebee)}
-.cbtn-primary{background:var(--accent,#f99e2c);color:#fff;border-color:transparent}
-.cbtn-primary:hover:not(:disabled){background:var(--accent-hover,#e68d1f);box-shadow:0 2px 8px rgba(249,158,44,.35)}
-.cbtn-secondary{background:var(--blue-bg,rgba(39,130,228,.1));color:var(--blue,#2782e4);border-color:rgba(39,130,228,.2)}
-.cbtn-secondary:hover:not(:disabled){background:rgba(39,130,228,.18);box-shadow:0 2px 8px rgba(39,130,228,.25)}
-.cbtn-danger{background:var(--danger-bg,rgba(246,71,71,.1));color:var(--danger,#f64747);border-color:rgba(246,71,71,.2)}
-.cbtn-danger:hover:not(:disabled){background:rgba(246,71,71,.18);box-shadow:0 2px 8px rgba(246,71,71,.25)}
-.cbtn-success{background:var(--success-bg,rgba(39,174,96,.1));color:var(--success,#27ae60);border-color:rgba(39,174,96,.2)}
-.cbtn-success:hover:not(:disabled){background:rgba(39,174,96,.18);box-shadow:0 2px 8px rgba(39,174,96,.25)}
-.cbtn-warning{background:var(--accent-bg,rgba(249,158,44,.1));color:var(--accent,#f99e2c);border-color:var(--accent-border,rgba(249,158,44,.25))}
-.cbtn-warning:hover:not(:disabled){background:rgba(249,158,44,.18);box-shadow:0 2px 8px rgba(249,158,44,.25)}
-.cbtn-ghost{background:transparent;color:var(--t2,#797b8d);border-color:var(--bd,#d7d8e0)}
-.cbtn-ghost:hover:not(:disabled){color:var(--t1,#1a1a2e);background:var(--grey-1,#f5f5f8);border-color:var(--grey-2,#ebebee)}
-.cbtn-outline{background:transparent;color:var(--accent,#f99e2c);border-color:var(--accent,#f99e2c)}
-.cbtn-outline:hover:not(:disabled){background:var(--accent-bg,rgba(249,158,44,.1))}
-.cbtn-link{background:transparent;color:var(--accent,#f99e2c);border-color:transparent;padding-left:4px;padding-right:4px;box-shadow:none}
-.cbtn-link:hover:not(:disabled){text-decoration:underline}
-.cbtn-no-line{background:none;border:none!important;box-shadow:none!important;color:var(--t3,#8a96b0);padding:6px 14px;border-radius:var(--rmd,8px);transition:color var(--tr,150ms),background var(--tr,150ms)}
-.cbtn-no-line:hover:not(:disabled){color:var(--p,var(--accent,#f99e2c));background:var(--pd,var(--accent-bg,rgba(249,158,44,.1)))}
-`;
-
-let styleInjected = false;
+const ICON_STYLE = {
+  padding: 0,
+  width: 30,
+  height: 30,
+  borderRadius: 'var(--rads,8px)',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  lineHeight: 0,
+};
 
 export default function Button({
   children,
@@ -50,21 +110,44 @@ export default function Button({
   className = '',
   ...props
 }) {
-  if (!styleInjected && typeof document !== 'undefined') {
-    const tag = document.createElement('style');
-    tag.textContent = STYLES;
-    document.head.appendChild(tag);
-    styleInjected = true;
-  }
+  const v = VARIANTS[variant] || VARIANTS.default;
+  const s = SIZES[size] || SIZES.md;
 
-  const classes = `cbtn cbtn-${variant} cbtn-${size}${loading ? ' cbtn-loading' : ''}${className ? ' ' + className : ''}`;
+  const isIconOnly = variant === 'icon';
 
   return (
     <button
-      className={classes}
+      className={className}
       disabled={disabled || loading}
       onClick={onClick}
-      style={style}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 6,
+        borderRadius: 'var(--rads,8px)',
+        fontFamily: 'var(--f,var(--sans,inherit))',
+        fontWeight: 500,
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        whiteSpace: 'nowrap',
+        transition: 'all .14s',
+        letterSpacing: '-.01em',
+        outline: 'none',
+        boxShadow: 'var(--shadow,0 1px 3px rgba(20,22,41,.1))',
+        opacity: disabled ? 0.45 : 1,
+        pointerEvents: disabled ? 'none' : undefined,
+        background: v.background,
+        color: v.color,
+        border: v.border,
+        padding: isIconOnly ? 0 : s.padding,
+        fontSize: s.fontSize,
+        height: isIconOnly ? 30 : s.height,
+        width: isIconOnly ? 30 : undefined,
+        ...(v.paddingLeft !== undefined && { paddingLeft: v.paddingLeft }),
+        ...(v.paddingRight !== undefined && { paddingRight: v.paddingRight }),
+        ...(v.boxShadow !== undefined && { boxShadow: v.boxShadow }),
+        ...style,
+      }}
       {...props}
     >
       {loading && <Spinner size={14} inline color="currentColor" />}

package/components/Card.jsx

@@ -1,62 +1,62 @@
-import { Pagination } from './Pagination';
-
-export function PageShell({ title, children }) {
-  return (
-    <div className="page-shell" style={{ padding: '20px 24px' }}>
-      {children}
-    </div>
-  );
-}
-
-export function TableCard({ children }) {
-  return <div className="table-card">{children}</div>;
-}
-export function TableCardFilters({ children }) {
-  return <div className="table-card-filters">{children}</div>;
-}
-export function TableCardBody({ children }) {
-  return <div className="table-card-body">{children}</div>;
-}
-export function TableCardFooter({ total, page, limit, pages, onChange }) {
-  const from = total === 0 ? 0 : (page - 1) * limit + 1;
-  const to   = Math.min(page * limit, total);
-  return (
-    <div className="table-card-footer">
-      <span className="table-card-footer-count">
-        {total === 0 ? 'No records' : `${from}–${to} of ${total}`}
-      </span>
-      <Pagination page={page} pages={pages} onChange={onChange} />
-    </div>
-  );
-}
-
-export function CardHdr({ title, icon: Icon, tabs, children }) {
-  return (
-    <div className="card-hdr">
-      <div className="card-title">
-        {Icon && <Icon size={14} />}
-        {title}
-        {tabs && <span style={{ marginLeft: 12 }}>{tabs}</span>}
-      </div>
-      {children && <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>{children}</div>}
-    </div>
-  );
-}
-
-export function StatCard({ label, value, sub }) {
-  return (
-    <div className="stat">
-      <div className="stat-label">{label}</div>
-      <div className="stat-val">{value ?? '—'}</div>
-      {sub && <div className="stat-sub">{sub}</div>}
-    </div>
-  );
-}
-export function StatCardSkeleton() {
-  return (
-    <div className="stat-skeleton">
-      <div className="skeleton skeleton-text short" style={{ marginBottom: 10 }} />
-      <div className="skeleton skeleton-text mid" style={{ height: 28, marginBottom: 6 }} />
-    </div>
-  );
-}
+import { Pagination } from './Pagination';
+
+export function PageShell({ title, children }) {
+  return (
+    <div className="page-shell" style={{ padding: '20px 24px' }}>
+      {children}
+    </div>
+  );
+}
+
+export function TableCard({ children }) {
+  return <div className="table-card">{children}</div>;
+}
+export function TableCardFilters({ children }) {
+  return <div className="table-card-filters">{children}</div>;
+}
+export function TableCardBody({ children }) {
+  return <div className="table-card-body">{children}</div>;
+}
+export function TableCardFooter({ total, page, limit, pages, onChange }) {
+  const from = total === 0 ? 0 : (page - 1) * limit + 1;
+  const to   = Math.min(page * limit, total);
+  return (
+    <div className="table-card-footer">
+      <span className="table-card-footer-count">
+        {total === 0 ? 'No records' : `${from}–${to} of ${total}`}
+      </span>
+      <Pagination page={page} pages={pages} onChange={onChange} />
+    </div>
+  );
+}
+
+export function CardHdr({ title, icon: Icon, tabs, children }) {
+  return (
+    <div className="card-hdr">
+      <div className="card-title">
+        {Icon && <Icon size={14} />}
+        {title}
+        {tabs && <span style={{ marginLeft: 12 }}>{tabs}</span>}
+      </div>
+      {children && <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>{children}</div>}
+    </div>
+  );
+}
+
+export function StatCard({ label, value, sub }) {
+  return (
+    <div className="stat">
+      <div className="stat-label">{label}</div>
+      <div className="stat-val">{value ?? '—'}</div>
+      {sub && <div className="stat-sub">{sub}</div>}
+    </div>
+  );
+}
+export function StatCardSkeleton() {
+  return (
+    <div className="stat-skeleton">
+      <div className="skeleton skeleton-text short" style={{ marginBottom: 10 }} />
+      <div className="skeleton skeleton-text mid" style={{ height: 28, marginBottom: 6 }} />
+    </div>
+  );
+}

package/components/CircularProgress.jsx

@@ -1,163 +1,163 @@
-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,
-  size = 'md',
-  customSize,
-  color = 'var(--blue)',
-  trackColor = '#e0e0e4',
-  label = '',
-  showPercent = true,
-  animated = true,
-  rounded = false,
-  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 cap = rounded ? 'round' : 'butt';
-
-  const userGap = gap !== undefined ? gap : (rounded ? c * 0.05 : c * 0.03);
-  const capOverrun = rounded ? stroke : 0;
-  const gapSize = userGap + capOverrun;
-  const total = c - 2 * gapSize;
-
-  const isFull = pct >= 100;
-  const isEmpty = pct <= 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);
-  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>
-          ) : (
-            <>
-              <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',
-          }}>
-            {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,
+  size = 'md',
+  customSize,
+  color = 'var(--blue)',
+  trackColor = '#e0e0e4',
+  label = '',
+  showPercent = true,
+  animated = true,
+  rounded = false,
+  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 cap = rounded ? 'round' : 'butt';
+
+  const userGap = gap !== undefined ? gap : (rounded ? c * 0.05 : c * 0.03);
+  const capOverrun = rounded ? stroke : 0;
+  const gapSize = userGap + capOverrun;
+  const total = c - 2 * gapSize;
+
+  const isFull = pct >= 100;
+  const isEmpty = pct <= 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);
+  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>
+          ) : (
+            <>
+              <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',
+          }}>
+            {Math.round(pct)}%
+          </div>
+        )}
+      </div>
+      {label && (
+        <span style={{ fontSize: '.6rem', color: 'var(--muted)', fontWeight: 500 }}>{label}</span>
+      )}
+    </div>
+  );
+}