cynx-ui 1.2.17 → 1.2.18

package/components/HoverCard.jsx

@@ -1,81 +1,81 @@
-import { useState, useRef, useEffect } from 'react';
-
-/**
- * HoverCard — reusable tooltip/popover on hover
- *
- * Props:
- *   trigger      — React node as hover target
- *   children     — popup content
- *   position     — 'top' | 'bottom' (default: 'top')
- *   width        — min-width (default: 180)
- *   style        — extra popup styles
- *   triggerStyle — extra trigger wrapper styles
- */
-export default function HoverCard({ trigger, children, position = 'top', width = 180, style, triggerStyle }) {
-  const [open, setOpen] = useState(false);
-  const [pos, setPos] = useState({ x: 0, y: 0 });
-  const wrapRef = useRef(null);
-
-  useEffect(() => {
-    if (open && wrapRef.current) {
-      const r = wrapRef.current.getBoundingClientRect();
-      setPos({ x: r.left + r.width / 2, y: position === 'top' ? r.top : r.bottom });
-    }
-  }, [open, position]);
-
-  useEffect(() => {
-    if (!open) return;
-    const close = (e) => {
-      if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
-    };
-    document.addEventListener('mousedown', close);
-    return () => document.removeEventListener('mousedown', close);
-  }, [open]);
-
-  return (
-    <div
-      ref={wrapRef}
-      onMouseEnter={() => setOpen(true)}
-      onMouseLeave={() => setOpen(false)}
-      style={{ display: 'inline-block', position: 'relative', ...triggerStyle }}
-    >
-      {trigger}
-      {open && (
-        <div style={{
-          position: 'fixed',
-          left: pos.x,
-          top: position === 'top' ? 'auto' : pos.y + 6,
-          bottom: position === 'top' ? window.innerHeight - pos.y + 6 : 'auto',
-          transform: 'translateX(-50%)',
-          zIndex: 9999,
-          minWidth: width,
-          background: '#fff',
-          border: '1px solid var(--border)',
-          borderRadius: 'var(--rads, 8px)',
-          padding: '10px 14px',
-          boxShadow: '0 4px 12px rgba(0,0,0,.12)',
-          pointerEvents: 'none',
-          animation: 'hoverCardIn .15s ease',
-          ...style,
-        }}>
-          {children}
-          <div style={{
-            position: 'absolute', left: '50%',
-            [position === 'top' ? 'bottom' : 'top']: -5,
-            transform: 'translateX(-50%) rotate(45deg)',
-            width: 8, height: 8, background: '#fff',
-            borderRight: '1px solid var(--border)',
-            borderBottom: position === 'top' ? 'none' : '1px solid var(--border)',
-            borderTop: position === 'top' ? '1px solid var(--border)' : 'none',
-          }} />
-        </div>
-      )}
-      <style>{`
-        @keyframes hoverCardIn {
-          from { opacity: 0; transform: translateX(-50%) translateY(4px); }
-          to { opacity: 1; transform: translateX(-50%) translateY(0); }
-        }
-      `}</style>
-    </div>
-  );
-}
+import { useState, useRef, useEffect } from 'react';
+
+/**
+ * HoverCard — reusable tooltip/popover on hover
+ *
+ * Props:
+ *   trigger      — React node as hover target
+ *   children     — popup content
+ *   position     — 'top' | 'bottom' (default: 'top')
+ *   width        — min-width (default: 180)
+ *   style        — extra popup styles
+ *   triggerStyle — extra trigger wrapper styles
+ */
+export default function HoverCard({ trigger, children, position = 'top', width = 180, style, triggerStyle }) {
+  const [open, setOpen] = useState(false);
+  const [pos, setPos] = useState({ x: 0, y: 0 });
+  const wrapRef = useRef(null);
+
+  useEffect(() => {
+    if (open && wrapRef.current) {
+      const r = wrapRef.current.getBoundingClientRect();
+      setPos({ x: r.left + r.width / 2, y: position === 'top' ? r.top : r.bottom });
+    }
+  }, [open, position]);
+
+  useEffect(() => {
+    if (!open) return;
+    const close = (e) => {
+      if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener('mousedown', close);
+    return () => document.removeEventListener('mousedown', close);
+  }, [open]);
+
+  return (
+    <div
+      ref={wrapRef}
+      onMouseEnter={() => setOpen(true)}
+      onMouseLeave={() => setOpen(false)}
+      style={{ display: 'inline-block', position: 'relative', ...triggerStyle }}
+    >
+      {trigger}
+      {open && (
+        <div style={{
+          position: 'fixed',
+          left: pos.x,
+          top: position === 'top' ? 'auto' : pos.y + 6,
+          bottom: position === 'top' ? window.innerHeight - pos.y + 6 : 'auto',
+          transform: 'translateX(-50%)',
+          zIndex: 9999,
+          minWidth: width,
+          background: '#fff',
+          border: '1px solid var(--border)',
+          borderRadius: 'var(--rads, 8px)',
+          padding: '10px 14px',
+          boxShadow: '0 4px 12px rgba(0,0,0,.12)',
+          pointerEvents: 'none',
+          animation: 'hoverCardIn .15s ease',
+          ...style,
+        }}>
+          {children}
+          <div style={{
+            position: 'absolute', left: '50%',
+            [position === 'top' ? 'bottom' : 'top']: -5,
+            transform: 'translateX(-50%) rotate(45deg)',
+            width: 8, height: 8, background: '#fff',
+            borderRight: '1px solid var(--border)',
+            borderBottom: position === 'top' ? 'none' : '1px solid var(--border)',
+            borderTop: position === 'top' ? '1px solid var(--border)' : 'none',
+          }} />
+        </div>
+      )}
+      <style>{`
+        @keyframes hoverCardIn {
+          from { opacity: 0; transform: translateX(-50%) translateY(4px); }
+          to { opacity: 1; transform: translateX(-50%) translateY(0); }
+        }
+      `}</style>
+    </div>
+  );
+}

package/components/LineProgress.jsx

@@ -1,109 +1,109 @@
-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,
-  size = 'md',
-  customSize,
-  color = 'var(--blue)',
-  trackColor = '#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';
-
-  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 && (
-            <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,
-              }}
-            />
-          </>
-        ) : (
-          <>
-            <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>
-  );
-}
+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,
+  size = 'md',
+  customSize,
+  color = 'var(--blue)',
+  trackColor = '#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';
+
+  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 && (
+            <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,
+              }}
+            />
+          </>
+        ) : (
+          <>
+            <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>
+  );
+}