cynx-lib 1.3.28

package/ui/components/LineProgress.jsx

@@ -0,0 +1,133 @@
+import { useEffect, useRef } from 'react';
+
+const SIZES = {
+  xs: { height: 4, fontSize: '.68rem' },
+  sm: { height: 5, fontSize: '.75rem' },
+  md: { height: 6, fontSize: '.82rem' },
+  lg: { height: 8, fontSize: '.9rem' },
+  xl: { height: 10, fontSize: '1rem' },
+};
+
+export default function LineProgress({
+  value = 0,
+  segments,
+  size = 'md',
+  customSize,
+  color = 'var(--blue, #2782e4)',
+  trackColor = 'var(--bd2, #e0e0e4)',
+  label = '',
+  showPercent = true,
+  animated = true,
+  rounded = true,
+  indeterminate = false,
+  speed = 1,
+  height,
+  gap = 5,
+  labelGap = 2,
+  className = '',
+  style = {},
+}) {
+  const base = SIZES[size] || SIZES.md;
+  const barHeight = height ?? (customSize || base.height);
+  const fontSize = customSize ? `${Math.max(11, customSize * 1.6)}px` : base.fontSize;
+  const pct = Math.min(100, Math.max(0, value));
+  const radius = rounded ? barHeight / 2 : 0;
+
+  const barRef = useRef(null);
+
+  // Indeterminate animation
+  useEffect(() => {
+    if (!indeterminate || !barRef.current) return;
+    let pos = -40, direction = 1, raf;
+    let lastTime = performance.now();
+
+    function tick(now) {
+      const dt = (now - lastTime) / 16.67;
+      lastTime = now;
+      pos += direction * 1.2 * speed * dt;
+      if (pos > 100) { pos = 100; direction = -1; }
+      if (pos < -40) { pos = -40; direction = 1; }
+      if (barRef.current) {
+        barRef.current.style.left = pos + '%';
+        barRef.current.style.width = '40%';
+      }
+      raf = requestAnimationFrame(tick);
+    }
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [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 && !hasSegments && (
+            <span style={{ fontSize, fontWeight: 600, color: 'var(--muted, #9ca3af)', fontVariantNumeric: 'tabular-nums', marginLeft: label ? 0 : 'auto' }}>
+              {Math.round(pct)}%
+            </span>
+          )}
+        </div>
+      )}
+      <div style={{
+        height: barHeight, borderRadius: radius,
+        background: 'transparent', position: 'relative',
+        display: 'flex', gap: gap, overflow: 'hidden',
+      }}>
+        {indeterminate ? (
+          <>
+            <div style={{ flex: 1, borderRadius: radius, background: trackColor }} />
+            <div
+              ref={barRef}
+              style={{
+                position: 'absolute', top: 0, height: '100%',
+                width: '40%', borderRadius: radius,
+                background: color, opacity: 0.85,
+              }}
+            />
+          </>
+        ) : 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={{
+              flex: pct > 0 ? pct : 0, minWidth: pct > 0 ? barHeight : 0,
+              borderRadius: radius, background: color,
+              transition: transitionStyle,
+            }} />
+            {pct < 100 && (
+              <div style={{
+                flex: 100 - pct,
+                borderRadius: radius, background: trackColor,
+                transition: transitionStyle,
+              }} />
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/ui/components/LinearProgress.jsx

@@ -0,0 +1,132 @@
+import { useEffect, useRef } from 'react';
+
+const SIZES = {
+  xs: { height: 4, fontSize: '.68rem' },
+  sm: { height: 5, fontSize: '.75rem' },
+  md: { height: 6, fontSize: '.82rem' },
+  lg: { height: 8, fontSize: '.9rem' },
+  xl: { height: 10, fontSize: '1rem' },
+};
+
+export default function LinearProgress({
+  value = 0,
+  segments,
+  size = 'md',
+  customSize,
+  color = 'var(--blue, #3b82f6)',
+  trackColor = 'var(--bd2, #e0e0e4)',
+  label = '',
+  showPercent = true,
+  animated = true,
+  rounded = true,
+  indeterminate = false,
+  speed = 1,
+  height,
+  gap = 5,
+  labelGap = 2,
+  className = '',
+  style = {},
+}) {
+  const base = SIZES[size] || SIZES.md;
+  const barHeight = height ?? (customSize || base.height);
+  const fontSize = customSize ? `${Math.max(11, customSize * 1.6)}px` : base.fontSize;
+  const pct = Math.min(100, Math.max(0, value));
+  const radius = rounded ? barHeight / 2 : 0;
+
+  const barRef = useRef(null);
+
+  useEffect(() => {
+    if (!indeterminate || !barRef.current) return;
+    let pos = -40, direction = 1, raf;
+    let lastTime = performance.now();
+
+    function tick(now) {
+      const dt = (now - lastTime) / 16.67;
+      lastTime = now;
+      pos += direction * 1.2 * speed * dt;
+      if (pos > 100) { pos = 100; direction = -1; }
+      if (pos < -40) { pos = -40; direction = 1; }
+      if (barRef.current) {
+        barRef.current.style.left = pos + '%';
+        barRef.current.style.width = '40%';
+      }
+      raf = requestAnimationFrame(tick);
+    }
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [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 && !hasSegments && (
+            <span style={{ fontSize, fontWeight: 600, color: 'var(--muted, #9ca3af)', fontVariantNumeric: 'tabular-nums', marginLeft: label ? 0 : 'auto' }}>
+              {Math.round(pct)}%
+            </span>
+          )}
+        </div>
+      )}
+      <div style={{
+        height: barHeight, borderRadius: radius,
+        background: 'transparent', position: 'relative',
+        display: 'flex', gap: gap, overflow: 'hidden',
+      }}>
+        {indeterminate ? (
+          <>
+            <div style={{ flex: 1, borderRadius: radius, background: trackColor }} />
+            <div
+              ref={barRef}
+              style={{
+                position: 'absolute', top: 0, height: '100%',
+                width: '40%', borderRadius: radius,
+                background: color, opacity: 0.85,
+              }}
+            />
+          </>
+        ) : 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={{
+              flex: pct > 0 ? pct : 0, minWidth: pct > 0 ? barHeight : 0,
+              borderRadius: radius, background: color,
+              transition: transitionStyle,
+            }} />
+            {pct < 100 && (
+              <div style={{
+                flex: 100 - pct,
+                borderRadius: radius, background: trackColor,
+                transition: transitionStyle,
+              }} />
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/ui/components/Modal.jsx

@@ -0,0 +1,212 @@
+import { useState, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import Button from './Button';
+
+const STYLES = `
+/* ── Modal ─────────────────────────────────────────────────── */
+.modal-backdrop {
+  position: fixed; inset: 0;
+  background: rgba(20,22,41,.45);
+  display: flex; align-items: center; justify-content: center;
+  z-index: 8000; padding: 20px;
+}
+.modal {
+  background: var(--surface, #ffffff); border: 1px solid var(--border, #e2e8f0);
+  border-radius: 14px; width: 100%; max-width: 480px;
+  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.06));
+  overflow: visible;
+}
+.modal-hdr {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 15px 20px; border-bottom: 1px solid var(--border-light, #ebebf0);
+  border-radius: 14px 14px 0 0;
+  flex-shrink: 0;
+}
+.modal-title { font-size: .88rem; font-weight: 700; letter-spacing: -.01em; }
+.modal-body  { padding: 20px; overflow-x: hidden; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
+.modal-footer {
+  display: flex; justify-content: flex-end; gap: 8px;
+  padding: 13px 20px; border-top: 1px solid var(--border-light, #ebebf0);
+  background: var(--grey-1, #f5f5f8); border-radius: 0 0 14px 14px;
+  flex-shrink: 0;
+}
+.modal-card {
+  background: var(--surface, #ffffff); border: 1px solid var(--border, #e2e8f0);
+  border-radius: 14px; width: 100%; max-width: 480px; max-height: 60vh;
+  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.06)); overflow: hidden;
+  display: flex; flex-direction: column;
+}
+.modal-close {
+  background: none; border: none; cursor: pointer; padding: 4px; border-radius: 6px;
+  color: var(--muted, #797b8d); display: flex; align-items: center; transition: all .14s;
+}
+.modal-close:hover { color: var(--primary-text, #0f172a); background: var(--grey-1, #f5f5f8); }
+.confirm-icon {
+  width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 12px;
+  display: flex; align-items: center; justify-content: center;
+}
+.confirm-icon.danger { background: var(--dd, rgba(246,71,71,.1)); }
+.confirm-icon.warning { background: var(--pd, rgba(249,158,44,.1)); }
+.confirm-icon.info { background: var(--infd, rgba(39,130,228,.1)); }
+
+/* Modal scale */
+@keyframes modalIn {
+  from { opacity: 0; transform: scale(.97); }
+  to   { opacity: 1; transform: scale(1); }
+}
+.modal { animation: modalIn .16s ease; }
+
+/* ── Modal open animation ──────────────────────────────────── */
+@keyframes modalPop {
+  from { opacity: 0; transform: scale(.96) translateY(-8px); }
+  to   { opacity: 1; transform: scale(1)   translateY(0); }
+}
+@keyframes backdropFade {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+/* ── Modal close animations ────────────────────────────────── */
+@keyframes modalClose {
+  from { opacity: 1; transform: scale(1)   translateY(0); }
+  to   { opacity: 0; transform: scale(.96) translateY(-8px); }
+}
+@keyframes backdropClose {
+  from { opacity: 1; }
+  to   { opacity: 0; }
+}
+
+/* ── cynx-ui Modal keyframes ────────────────────────────────── */
+@keyframes modalFadeIn { from { opacity:0 } to { opacity:1 } }
+@keyframes modalFadeOut { from { opacity:1 } to { opacity:0 } }
+@keyframes modalCardIn { from { opacity:0; transform:scale(.96) translateY(-8px) } to { opacity:1; transform:scale(1) translateY(0) } }
+@keyframes modalCardOut { from { opacity:1; transform:scale(1) translateY(0) } to { opacity:0; transform:scale(.96) translateY(-8px) } }
+`;
+
+let _id = 'cynx-modal-styles';
+function ensureStyles() {
+  if (typeof document === 'undefined') return;
+  if (document.getElementById(_id)) return;
+  const tag = document.createElement('style');
+  tag.id = _id;
+  tag.textContent = STYLES;
+  document.head.appendChild(tag);
+}
+
+// Auto-inject on module load
+if (typeof document !== 'undefined') ensureStyles();
+
+export function Modal({ open, onClose, onBeforeClose, title, children, footer, maxWidth = 520, maxHeight, bodyStyle, style }) {
+  const [closing, setClosing] = useState(false);
+  const mounted = useRef(open);
+
+  ensureStyles();
+
+  useEffect(() => {
+    if (open) {
+      mounted.current = true;
+      setClosing(false);
+      document.body.style.overflow = 'hidden';
+    }
+    return () => { document.body.style.overflow = ''; };
+  }, [open]);
+
+  function close() {
+    if (closing) return;
+    if (onBeforeClose && onBeforeClose() === false) return;
+    setClosing(true);
+    setTimeout(() => {
+      mounted.current = false;
+      setClosing(false);
+      onClose();
+    }, 260);
+  }
+
+  useEffect(() => {
+    if (!open) return;
+    function onKey(e) { if (e.key === 'Escape') close(); }
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [open, closing]);
+
+  if (!open && !closing) return null;
+
+  const resolvedFooter = typeof footer === 'function' ? footer(close) : footer;
+  const resolvedChildren = typeof children === 'function' ? children(close) : children;
+  const resolvedMaxHeight = style?.maxHeight || maxHeight || '60vh';
+
+  return createPortal(
+    <div
+      className="modal-backdrop"
+      style={{
+        position: 'fixed', inset: 0,
+        background: 'rgba(20,22,41,.45)',
+        display: 'flex', alignItems: 'center', justifyItems: 'center', justifyContent: 'center',
+        zIndex: 8000, padding: 20,
+        animation: `${closing ? 'modalFadeOut' : 'modalFadeIn'} .26s ease forwards`,
+      }}
+      onMouseDown={e => { if (e.target === e.currentTarget) close(); }}
+    >
+      <div
+        className="modal-card"
+        style={{
+          background: 'var(--surface, #ffffff)', border: '1px solid var(--border, #e2e8f0)',
+          borderRadius: 14, width: '100%',
+          maxWidth: style?.maxWidth || maxWidth,
+          maxHeight: resolvedMaxHeight,
+          boxShadow: 'var(--slg, 0 20px 60px rgba(0,0,0,.25))',
+          overflow: 'hidden', display: 'flex', flexDirection: 'column',
+          animation: `${closing ? 'modalCardOut' : 'modalCardIn'} .26s cubic-bezier(.4,0,.2,1) forwards`,
+          ...style,
+        }}
+        onMouseDown={e => e.stopPropagation()}
+      >
+        <div className="modal-hdr" style={{
+          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+          padding: '15px 20px', borderBottom: '1px solid var(--border-light, #ebebf0)',
+          borderRadius: '14px 14px 0 0', flexShrink: 0,
+        }}>
+          <span className="modal-title" style={{ fontSize: '.88rem', fontWeight: 700, letterSpacing: '-.01em' }}>{title}</span>
+        </div>
+        <div className="modal-body" style={{ padding: 20, overflowX: 'hidden', overflowY: 'auto', flex: '1 1 auto', minHeight: 0, ...bodyStyle }}>{resolvedChildren}</div>
+        {resolvedFooter && <div className="modal-footer" style={{
+          display: 'flex', justifyContent: 'flex-end', gap: 8,
+          padding: '13px 20px', borderTop: '1px solid var(--border-light, #ebebf0)',
+          background: 'var(--grey-1, #f5f5f8)', borderRadius: '0 0 14px 14px', flexShrink: 0,
+        }}>{resolvedFooter}</div>}
+      </div>
+    </div>,
+    document.body
+  );
+}
+
+export function Confirm({ open, onClose, onConfirm, title, message, variant = 'danger', confirmLabel = 'Confirm', loading = false }) {
+  const iconColor  = { danger: 'var(--danger, #f64747)', warning: 'var(--accent, #f99e2c)', info: 'var(--blue, #2782e4)' }[variant] || 'var(--danger, #f64747)';
+  const btnVariant = variant === 'danger' ? 'danger' : 'primary';
+
+  const icon = variant === 'danger'
+    ? <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={iconColor} strokeWidth="2" strokeLinecap="round"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+    : <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={iconColor} strokeWidth="2" strokeLinecap="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>;
+
+  return (
+    <Modal open={open} onClose={onClose} title="" maxWidth={400}
+      footer={
+        <>
+          <Button variant="ghost" size="sm" onClick={onClose} disabled={loading}>Cancel</Button>
+          <Button variant={btnVariant} size="sm" onClick={onConfirm} disabled={loading}>
+            {loading ? 'Please wait...' : confirmLabel}
+          </Button>
+        </>
+      }>
+      <div style={{ textAlign: 'center', padding: '4px 0 8px' }}>
+        <div className={`confirm-icon ${variant}`} style={{
+          width: 48, height: 48, borderRadius: '50%', margin: '0 auto 12px',
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+          background: variant === 'danger' ? 'var(--dd, rgba(246,71,71,.1))' : variant === 'warning' ? 'var(--pd, rgba(249,158,44,.1))' : 'var(--infd, rgba(39,130,228,.1))',
+        }}>{icon}</div>
+        <div style={{ fontSize: '.9rem', fontWeight: 700, marginBottom: 8 }}>{title}</div>
+        {message && <div style={{ fontSize: '.8rem', color: 'var(--muted, #797b8d)', lineHeight: 1.5 }}>{message}</div>}
+      </div>
+    </Modal>
+  );
+}

package/ui/components/Pagination.jsx

@@ -0,0 +1,52 @@
+import Button from './Button';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+export function Pagination({ page = 1, pages = 1, total, perPage, onChange, style = {} }) {
+  const totalPages = pages || (total && perPage ? Math.ceil(total / perPage) : 0);
+  if (!totalPages || totalPages <= 1) return null;
+
+  const items = [];
+  for (let i = 1; i <= totalPages; i++) {
+    if (i === 1 || i === totalPages || (i >= page - 1 && i <= page + 1)) items.push(i);
+    else if (items[items.length - 1] !== '...') items.push('...');
+  }
+
+  const start = perPage ? (page - 1) * perPage + 1 : null;
+  const end = perPage ? Math.min(page * perPage, total) : null;
+
+  return (
+    <div style={{
+      display: 'flex',
+      alignItems: 'center',
+      gap: 8,
+      ...style,
+    }}>
+      {start !== null && (
+        <div style={{ fontSize: '.72rem', color: 'var(--muted, #797b8d)', fontFamily: 'var(--mono, ui-monospace, monospace)' }}>
+          {start}–{end} of {total}
+        </div>
+      )}
+      <div style={{ display: 'flex', gap: 4, alignItems: 'center', marginLeft: start !== null ? 'auto' : 0 }}>
+        <Button
+          variant="ghost"
+          size="xs"
+          icon={<ChevronLeft size={14} />}
+          onClick={() => onChange?.(page - 1)}
+          disabled={page <= 1}
+        />
+        {items.map((item, i) =>
+          item === '...'
+            ? <span key={`e${i}`} style={{ padding: '0 4px', color: 'var(--muted, #797b8d)', fontSize: '.78rem' }}>…</span>
+            : <Button key={item} variant={item === page ? 'primary' : 'no-line'} size="xs" onClick={() => onChange?.(item)} style={{ minWidth: 28 }}>{item}</Button>
+        )}
+        <Button
+          variant="ghost"
+          size="xs"
+          icon={<ChevronRight size={14} />}
+          onClick={() => onChange?.(page + 1)}
+          disabled={page >= totalPages}
+        />
+      </div>
+    </div>
+  );
+}

package/ui/components/PulseDot.jsx

@@ -0,0 +1,77 @@
+const VARIANTS = {
+  dim:     { bg: 'var(--grey-4,#797b8d)', ring: 'var(--grey-4,#797b8d)' },
+  ok:      { bg: 'var(--success,#27ae60)', ring: 'var(--success,#27ae60)' },
+  err:     { bg: 'var(--danger,#f64747)', ring: 'var(--danger,#f64747)' },
+  warn:    { bg: 'var(--accent,#f99e2c)', ring: 'var(--accent,#f99e2c)' },
+  blue:    { bg: 'var(--blue,#2782e4)', ring: 'var(--blue,#2782e4)' },
+  purple:  { bg: '#8b5cf6', ring: '#8b5cf6' },
+  teal:    { bg: '#14b8a6', ring: '#14b8a6' },
+  pink:    { bg: '#ec4899', ring: '#ec4899' },
+  off:     { bg: 'var(--t3,#9b9daa)', ring: 'var(--t3,#9b9daa)' },
+};
+
+const SIZES = {
+  sm: { core: 6, ring: { inset: '-2px', borderWidth: '1.5px' } },
+  md: { core: 8, ring: { inset: '-3px', borderWidth: '2px' } },
+  lg: { core: 10, ring: { inset: '-4px', borderWidth: '2px' } },
+};
+
+const KEYFRAMES = `@keyframes pdot-pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.3);opacity:0}}`;
+let _id = 'cynx-pulsedot-styles';
+
+function ensureStyles() {
+  if (typeof document === 'undefined') return;
+  if (document.getElementById(_id)) return;
+  const tag = document.createElement('style');
+  tag.id = _id;
+  tag.textContent = KEYFRAMES;
+  document.head.appendChild(tag);
+}
+
+export default function PulseDot({
+  variant = 'dim',
+  size = 'md',
+  pulse = true,
+  className = '',
+  style = {},
+}) {
+  ensureStyles();
+
+  const v = VARIANTS[variant] || VARIANTS.dim;
+  const s = SIZES[size] || SIZES.md;
+  const isOff = variant === 'off';
+
+  return (
+    <span
+      className={className}
+      style={{
+        position: 'relative',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: s.core,
+        height: s.core,
+        flexShrink: 0,
+        ...style,
+      }}
+    >
+      <span style={{
+        width: s.core,
+        height: s.core,
+        borderRadius: '50%',
+        background: v.bg,
+      }} />
+      {!isOff && (
+        <span style={{
+          position: 'absolute',
+          inset: s.ring.inset,
+          borderRadius: '50%',
+          border: `${s.ring.borderWidth} solid ${v.ring}`,
+          opacity: 0,
+          animation: `pdot-pulse 1.1s ease-out infinite`,
+          animationPlayState: pulse ? 'running' : 'paused',
+        }} />
+      )}
+    </span>
+  );
+}