cynx-ui 1.2.17 → 1.2.18

package/components/SearchableDropdown.jsx

@@ -1,118 +1,118 @@
-import { useState, useRef, useEffect } from 'react';
-import { createPortal } from 'react-dom';
-import { ChevronDown, Search, Check } from 'lucide-react';
-
-export function SearchableDropdown({ value, onChange, options = [], placeholder = 'Select...' }) {
-  const [open,   setOpen]   = useState(false);
-  const [query,  setQuery]  = useState('');
-  const ref    = useRef(null);
-  const inputRef = useRef(null);
-  const btnRef = useRef(null);
-  const menuRef = useRef(null);
-  const [menuStyle, setMenuStyle] = useState({});
-
-  const selected = options.find(o => o.value === value);
-
-  const filtered = query
-    ? options.filter(o => o.label.toLowerCase().includes(query.toLowerCase()))
-    : options;
-
-  useEffect(() => {
-    if (!open) return;
-    function close(e) {
-      if (!ref.current?.contains(e.target) && !menuRef.current?.contains(e.target)) {
-        setOpen(false);
-        setQuery('');
-      }
-    }
-    const timer = setTimeout(() => {
-      document.addEventListener('mousedown', close, true);
-    }, 0);
-    return () => {
-      clearTimeout(timer);
-      document.removeEventListener('mousedown', close, true);
-    };
-  }, [open]);
-
-  useEffect(() => {
-    if (!open) return;
-    const btn = btnRef.current;
-    if (!btn) return;
-    const rect = btn.getBoundingClientRect();
-    setMenuStyle({
-      position: 'fixed',
-      top: rect.bottom + 4,
-      left: rect.left,
-      width: rect.width,
-      zIndex: 999999,
-    });
-    setTimeout(() => inputRef.current?.focus(), 50);
-  }, [open]);
-
-  function select(val) {
-    onChange(val);
-    setOpen(false);
-    setQuery('');
-  }
-
-  return (
-    <div ref={ref} style={{ position: 'relative' }}>
-      <button type="button" ref={btnRef} onClick={() => setOpen(o => !o)} style={{
-        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 6,
-        width: '100%', padding: '6px 10px', height: 32,
-        border: `1px solid ${open ? 'var(--accent)' : 'var(--border)'}`, borderRadius: 'var(--rads)',
-        background: 'var(--surface)', color: selected ? 'var(--primary-text)' : 'var(--muted)',
-        cursor: 'pointer', fontSize: '.8rem', fontFamily: 'var(--sans)',
-        transition: 'border-color .15s', boxShadow: open ? '0 0 0 3px rgba(249,158,44,.12)' : 'var(--shadow)',
-      }}
-      onMouseEnter={e => { if (!open) e.currentTarget.style.borderColor = 'var(--accent)'; }}
-      onMouseLeave={e => { if (!open) e.currentTarget.style.borderColor = 'var(--border)'; }}>
-        <span style={{ flex: 1, textAlign: 'left', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-          {selected?.label || placeholder}
-        </span>
-        <ChevronDown size={13} style={{ color: 'var(--muted)', flexShrink: 0 }} />
-      </button>
-
-      {open && createPortal(
-        <div ref={menuRef} style={{
-          ...menuStyle,
-          background: 'var(--surface)', border: '1px solid var(--border)',
-          borderRadius: 'var(--rads)', boxShadow: 'var(--shadow-lg)',
-          overflow: 'hidden', animation: 'dropdownOpen .12s ease',
-        }}>
-          <div style={{ padding: '6px 8px', borderBottom: '1px solid var(--border-light)', display: 'flex', alignItems: 'center', gap: 6 }}>
-            <Search size={12} style={{ color: 'var(--muted)', flexShrink: 0 }} />
-            <input
-              ref={inputRef}
-              value={query}
-              onChange={e => setQuery(e.target.value)}
-              placeholder="Search..."
-              style={{ border: 'none', background: 'transparent', outline: 'none', fontSize: '.78rem', color: 'var(--primary-text)', width: '100%', fontFamily: 'var(--sans)' }}
-            />
-          </div>
-          <div style={{ maxHeight: 200, overflowY: 'auto', scrollbarWidth: 'thin' }}>
-            {filtered.length === 0 ? (
-              <div style={{ padding: '10px 12px', fontSize: '.78rem', color: 'var(--muted)', textAlign: 'center' }}>No results</div>
-            ) : filtered.map(o => (
-              <div key={o.value}
-                onMouseDown={e => e.stopPropagation()}
-                onClick={() => select(o.value)} style={{
-                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-                padding: '8px 12px', fontSize: '.8rem', cursor: 'pointer',
-                background: o.value === value ? 'var(--accent-bg)' : 'transparent',
-                color: o.value === value ? 'var(--accent)' : 'var(--primary-text)',
-                transition: 'background .1s',
-              }}
-              onMouseEnter={e => { if (o.value !== value) e.currentTarget.style.background = 'var(--grey-1)'; }}
-              onMouseLeave={e => { if (o.value !== value) e.currentTarget.style.background = 'transparent'; }}>
-                <span>{o.label}</span>
-                {o.value === value && <Check size={12} />}
-              </div>
-            ))}
-          </div>
-        </div>,
-        document.body
-      )}
-    </div>
-  );
-}
+import { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { ChevronDown, Search, Check } from 'lucide-react';
+
+export function SearchableDropdown({ value, onChange, options = [], placeholder = 'Select...' }) {
+  const [open,   setOpen]   = useState(false);
+  const [query,  setQuery]  = useState('');
+  const ref    = useRef(null);
+  const inputRef = useRef(null);
+  const btnRef = useRef(null);
+  const menuRef = useRef(null);
+  const [menuStyle, setMenuStyle] = useState({});
+
+  const selected = options.find(o => o.value === value);
+
+  const filtered = query
+    ? options.filter(o => o.label.toLowerCase().includes(query.toLowerCase()))
+    : options;
+
+  useEffect(() => {
+    if (!open) return;
+    function close(e) {
+      if (!ref.current?.contains(e.target) && !menuRef.current?.contains(e.target)) {
+        setOpen(false);
+        setQuery('');
+      }
+    }
+    const timer = setTimeout(() => {
+      document.addEventListener('mousedown', close, true);
+    }, 0);
+    return () => {
+      clearTimeout(timer);
+      document.removeEventListener('mousedown', close, true);
+    };
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const btn = btnRef.current;
+    if (!btn) return;
+    const rect = btn.getBoundingClientRect();
+    setMenuStyle({
+      position: 'fixed',
+      top: rect.bottom + 4,
+      left: rect.left,
+      width: rect.width,
+      zIndex: 999999,
+    });
+    setTimeout(() => inputRef.current?.focus(), 50);
+  }, [open]);
+
+  function select(val) {
+    onChange(val);
+    setOpen(false);
+    setQuery('');
+  }
+
+  return (
+    <div ref={ref} style={{ position: 'relative' }}>
+      <button type="button" ref={btnRef} onClick={() => setOpen(o => !o)} style={{
+        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 6,
+        width: '100%', padding: '6px 10px', height: 32,
+        border: `1px solid ${open ? 'var(--accent)' : 'var(--border)'}`, borderRadius: 'var(--rads)',
+        background: 'var(--surface)', color: selected ? 'var(--primary-text)' : 'var(--muted)',
+        cursor: 'pointer', fontSize: '.8rem', fontFamily: 'var(--sans)',
+        transition: 'border-color .15s', boxShadow: open ? '0 0 0 3px rgba(249,158,44,.12)' : 'var(--shadow)',
+      }}
+      onMouseEnter={e => { if (!open) e.currentTarget.style.borderColor = 'var(--accent)'; }}
+      onMouseLeave={e => { if (!open) e.currentTarget.style.borderColor = 'var(--border)'; }}>
+        <span style={{ flex: 1, textAlign: 'left', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          {selected?.label || placeholder}
+        </span>
+        <ChevronDown size={13} style={{ color: 'var(--muted)', flexShrink: 0 }} />
+      </button>
+
+      {open && createPortal(
+        <div ref={menuRef} style={{
+          ...menuStyle,
+          background: 'var(--surface)', border: '1px solid var(--border)',
+          borderRadius: 'var(--rads)', boxShadow: 'var(--shadow-lg)',
+          overflow: 'hidden', animation: 'dropdownOpen .12s ease',
+        }}>
+          <div style={{ padding: '6px 8px', borderBottom: '1px solid var(--border-light)', display: 'flex', alignItems: 'center', gap: 6 }}>
+            <Search size={12} style={{ color: 'var(--muted)', flexShrink: 0 }} />
+            <input
+              ref={inputRef}
+              value={query}
+              onChange={e => setQuery(e.target.value)}
+              placeholder="Search..."
+              style={{ border: 'none', background: 'transparent', outline: 'none', fontSize: '.78rem', color: 'var(--primary-text)', width: '100%', fontFamily: 'var(--sans)' }}
+            />
+          </div>
+          <div style={{ maxHeight: 200, overflowY: 'auto', scrollbarWidth: 'thin' }}>
+            {filtered.length === 0 ? (
+              <div style={{ padding: '10px 12px', fontSize: '.78rem', color: 'var(--muted)', textAlign: 'center' }}>No results</div>
+            ) : filtered.map(o => (
+              <div key={o.value}
+                onMouseDown={e => e.stopPropagation()}
+                onClick={() => select(o.value)} style={{
+                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                padding: '8px 12px', fontSize: '.8rem', cursor: 'pointer',
+                background: o.value === value ? 'var(--accent-bg)' : 'transparent',
+                color: o.value === value ? 'var(--accent)' : 'var(--primary-text)',
+                transition: 'background .1s',
+              }}
+              onMouseEnter={e => { if (o.value !== value) e.currentTarget.style.background = 'var(--grey-1)'; }}
+              onMouseLeave={e => { if (o.value !== value) e.currentTarget.style.background = 'transparent'; }}>
+                <span>{o.label}</span>
+                {o.value === value && <Check size={12} />}
+              </div>
+            ))}
+          </div>
+        </div>,
+        document.body
+      )}
+    </div>
+  );
+}

package/components/Spinner.jsx

@@ -1,52 +1,52 @@
-const STYLES = `.spin{animation:cx-spin .7s linear infinite}@keyframes cx-spin{to{transform:rotate(360deg)}}`;
-
-let _id = 'cynx-spinner-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 Spinner({ size = 20, inline = false, color = 'currentColor', fullPage = false }) {
-  ensureStyles();
-  const s = inline ? 14 : size;
-  const svg = (
-    <svg className="spin" width={s} height={s} viewBox="0 0 24 24" fill="none"
-      stroke={color} strokeWidth="2.5" strokeLinecap="round">
-      <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/>
-    </svg>
-  );
-
-  if (fullPage) {
-    return (
-      <div style={{
-        position: 'fixed', inset: 0,
-        background: 'var(--bg)',
-        display: 'flex', flexDirection: 'column',
-        alignItems: 'center', justifyContent: 'center', gap: 16,
-        zIndex: 9999,
-      }}>
-        {svg}
-        <div style={{ fontSize: '.75rem', fontFamily: 'var(--mono)', color: 'var(--muted)' }}>
-          Loading...
-        </div>
-      </div>
-    );
-  }
-
-  if (inline) return svg;
-
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '48px 0' }}>
-      {svg}
-    </div>
-  );
-}
-
-export default Spinner;
+const STYLES = `.spin{animation:cx-spin .7s linear infinite}@keyframes cx-spin{to{transform:rotate(360deg)}}`;
+
+let _id = 'cynx-spinner-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 Spinner({ size = 20, inline = false, color = 'currentColor', fullPage = false }) {
+  ensureStyles();
+  const s = inline ? 14 : size;
+  const svg = (
+    <svg className="spin" width={s} height={s} viewBox="0 0 24 24" fill="none"
+      stroke={color} strokeWidth="2.5" strokeLinecap="round">
+      <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/>
+    </svg>
+  );
+
+  if (fullPage) {
+    return (
+      <div style={{
+        position: 'fixed', inset: 0,
+        background: 'var(--bg)',
+        display: 'flex', flexDirection: 'column',
+        alignItems: 'center', justifyContent: 'center', gap: 16,
+        zIndex: 9999,
+      }}>
+        {svg}
+        <div style={{ fontSize: '.75rem', fontFamily: 'var(--mono)', color: 'var(--muted)' }}>
+          Loading...
+        </div>
+      </div>
+    );
+  }
+
+  if (inline) return svg;
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '48px 0' }}>
+      {svg}
+    </div>
+  );
+}
+
+export default Spinner;

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: '#fff', border: '1px solid var(--border)', borderRadius: 'var(--rad)',
-      boxShadow: '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: '#fff', border: '1px solid var(--border)', borderRadius: 'var(--rad)',
+      boxShadow: '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>
+  );
+}