cynx-ui 1.3.13 → 1.3.15

package/components/LineProgress.jsx

@@ -1,133 +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)',
-  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>
-  );
-}
+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)',
+  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/components/Pagination.jsx

@@ -1,41 +1,41 @@
-import Button from './Button';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-
-export function Pagination({ page, pages, total, perPage, onChange }) {
-  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', justifyContent: 'space-between',
-      padding: '10px 16px',
-      borderTop: '1px solid var(--border-light)',
-      background: 'var(--surface)',
-      borderRadius: '0 0 var(--rad) var(--rad)',
-    }}>
-      {start !== null && (
-        <div style={{ fontSize: '.72rem', color: 'var(--muted)', fontFamily: 'var(--mono)' }}>
-          {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)', 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>
-  );
-}
+import Button from './Button';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+export function Pagination({ page, pages, total, perPage, onChange }) {
+  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', justifyContent: 'space-between',
+      padding: '10px 16px',
+      borderTop: '1px solid var(--border-light)',
+      background: 'var(--surface)',
+      borderRadius: '0 0 var(--rad) var(--rad)',
+    }}>
+      {start !== null && (
+        <div style={{ fontSize: '.72rem', color: 'var(--muted)', fontFamily: 'var(--mono)' }}>
+          {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)', 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/components/StatBarCard.jsx

@@ -1,25 +1,25 @@
-import LineProgress from './LineProgress';
-
-export default function StatBarCard({ title, icon, items, style }) {
-  const total = items.reduce((s, i) => s + (i.value || 0), 0);
-
-  return (
-    <div style={{
-      background: 'var(--surface,#fff)', border: '1px solid var(--border)', borderRadius: 'var(--rad)',
-      boxShadow: 'var(--shadow, 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04))',
-      padding: '12px 14px', minWidth: 220, ...style,
-    }}>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
-        <div style={{ fontSize: '.58rem', fontWeight: 700, color: 'var(--muted, #9ca3af)', textTransform: 'uppercase', letterSpacing: '.08em' }}>
-          {title}{total ? ` (${total})` : ''}
-        </div>
-        {icon && <span style={{ color: 'var(--muted, #9ca3af)' }}>{icon}</span>}
-      </div>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-        {items.map((item, i) => (
-          <LineProgress key={i} value={item.value} total={total} color={item.color} label={item.label} size="sm" />
-        ))}
-      </div>
-    </div>
-  );
-}
+import LineProgress from './LineProgress';
+
+export default function StatBarCard({ title, icon, items, style }) {
+  const total = items.reduce((s, i) => s + (i.value || 0), 0);
+
+  return (
+    <div style={{
+      background: 'var(--surface,#fff)', border: '1px solid var(--border)', borderRadius: 'var(--rad)',
+      boxShadow: 'var(--shadow, 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04))',
+      padding: '12px 14px', minWidth: 220, ...style,
+    }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
+        <div style={{ fontSize: '.58rem', fontWeight: 700, color: 'var(--muted, #9ca3af)', textTransform: 'uppercase', letterSpacing: '.08em' }}>
+          {title}{total ? ` (${total})` : ''}
+        </div>
+        {icon && <span style={{ color: 'var(--muted, #9ca3af)' }}>{icon}</span>}
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+        {items.map((item, i) => (
+          <LineProgress key={i} value={item.value} total={total} color={item.color} label={item.label} size="sm" />
+        ))}
+      </div>
+    </div>
+  );
+}