cynx-ui 1.0.0

package/MultiSelect.jsx

@@ -0,0 +1,160 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { ChevronDown, Search, Check, X } from 'lucide-react';
+
+export default function MultiSelect({ value = [], onChange, options = [], placeholder = 'Select...' }) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const [rect, setRect] = useState(null);
+  const btnRef = useRef(null);
+  const menuRef = useRef(null);
+  const inputRef = useRef(null);
+
+  const selected = value || [];
+
+  const filtered = query
+    ? options.filter(o => o.label.toLowerCase().includes(query.toLowerCase()))
+    : options;
+
+  const updateRect = useCallback(() => {
+    if (btnRef.current) setRect(btnRef.current.getBoundingClientRect());
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+    function close(e) {
+      if (!btnRef.current?.contains(e.target) && !menuRef.current?.contains(e.target)) {
+        setOpen(false);
+        setQuery('');
+      }
+    }
+    document.addEventListener('mousedown', close);
+    return () => document.removeEventListener('mousedown', close);
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    window.addEventListener('scroll', updateRect, true);
+    window.addEventListener('resize', updateRect);
+    return () => {
+      window.removeEventListener('scroll', updateRect, true);
+      window.removeEventListener('resize', updateRect);
+    };
+  }, [open, updateRect]);
+
+  useEffect(() => {
+    if (open) { updateRect(); setTimeout(() => inputRef.current?.focus(), 50); }
+  }, [open, updateRect]);
+
+  function toggle(opt) {
+    const isSelected = selected.some(s => s.value === opt.value);
+    if (isSelected) {
+      onChange(selected.filter(s => s.value !== opt.value));
+    } else {
+      onChange([...selected, opt]);
+    }
+  }
+
+  function remove(val) {
+    onChange(selected.filter(s => s.value !== val));
+  }
+
+  function toggleOpen() {
+    updateRect();
+    setOpen(o => !o);
+    if (open) setQuery('');
+  }
+
+  const menu = open && rect && createPortal(
+    <div
+      ref={menuRef}
+      style={{
+        position: 'fixed',
+        top: rect.bottom + 4,
+        left: rect.left,
+        width: rect.width,
+        zIndex: 999999,
+        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 => {
+          const isSelected = selected.some(s => s.value === o.value);
+          return (
+            <div key={o.value} onClick={() => toggle(o)} style={{
+              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+              padding: '8px 12px', fontSize: '.8rem', cursor: 'pointer',
+              background: isSelected ? 'var(--accent-bg)' : 'transparent',
+              color: isSelected ? 'var(--accent)' : 'var(--primary-text)',
+              fontWeight: isSelected ? 500 : 400,
+              transition: 'background .1s',
+            }}
+            onMouseEnter={e => { if (!isSelected) e.currentTarget.style.background = 'var(--hover-bg)'; }}
+            onMouseLeave={e => { if (!isSelected) e.currentTarget.style.background = 'transparent'; }}>
+              <span>{o.label}</span>
+              {isSelected && <Check size={12} />}
+            </div>
+          );
+        })}
+      </div>
+    </div>,
+    document.body
+  );
+
+  return (
+    <div ref={btnRef} style={{ position: 'relative' }}>
+      <button type="button" onClick={toggleOpen} style={{
+        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 6,
+        width: '100%', padding: '6px 10px', minHeight: 34,
+        border: `1px solid ${open ? 'var(--accent)' : 'var(--border)'}`,
+        borderRadius: 'var(--rads)',
+        background: 'var(--surface)',
+        boxShadow: open ? '0 0 0 3px rgba(249,158,44,.12)' : 'var(--shadow)',
+        cursor: 'pointer', fontSize: '.8rem', fontFamily: 'var(--sans)',
+        transition: 'border-color .15s, box-shadow .15s',
+      }}
+      onMouseEnter={e => { if (!open) e.currentTarget.style.borderColor = 'var(--accent)'; }}
+      onMouseLeave={e => { if (!open) e.currentTarget.style.borderColor = 'var(--border)'; }}>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, flex: 1, minWidth: 0 }}>
+          {selected.length === 0 ? (
+            <span style={{ color: 'var(--muted)', fontSize: '.8rem' }}>{placeholder}</span>
+          ) : selected.map(s => (
+            <span key={s.value} style={{
+              display: 'inline-flex', alignItems: 'center', gap: 4,
+              padding: '2px 6px', borderRadius: 'var(--radxs)',
+              background: 'var(--accent-bg)', color: 'var(--accent)',
+              fontSize: '.72rem', fontWeight: 500,
+              border: '1px solid var(--accent-border)',
+            }}>
+              {s.label}
+              <span
+                role="button"
+                onClick={e => { e.stopPropagation(); remove(s.value); }}
+                style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', lineHeight: 1 }}>
+                <X size={10} />
+              </span>
+            </span>
+          ))}
+        </div>
+        <ChevronDown size={13} style={{ color: 'var(--muted)', flexShrink: 0, transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .2s' }} />
+      </button>
+      {menu}
+    </div>
+  );
+}

package/Notifications.jsx

@@ -0,0 +1,118 @@
+import { useState, useEffect, useRef } from 'react';
+import { useEvents } from '../hooks/useEvents.jsx';
+
+const MAX_NOTIFS = 50;
+
+function eventToNotif(type, data) {
+  const id  = Date.now() + Math.random();
+  const now = new Date();
+  switch (type) {
+    // Phase B: wire up notification types for new events (passkey registered,
+    // new sign-in detected, one-time code requested, etc.) here.
+    default:
+      return null;
+  }
+}
+
+export default function Notifications() {
+  const [notifs, setNotifs]   = useState([]);
+  const [open,   setOpen]     = useState(false);
+  const ref                   = useRef(null);
+
+  const unread = notifs.filter(n => !n.read).length;
+
+  useEvents({});
+
+  function addNotif(type, data) {
+    const n = eventToNotif(type, data);
+    if (!n) return;
+    setNotifs(prev => [n, ...prev].slice(0, MAX_NOTIFS));
+    // Browser notification if permission granted
+    if ('Notification' in window && Notification.permission === 'granted') {
+      new Notification(n.title, { body: n.message });
+    }
+  }
+
+  function markAllRead() {
+    setNotifs(prev => prev.map(n => ({ ...n, read: true })));
+  }
+
+  function clearAll() {
+    setNotifs([]);
+    setOpen(false);
+  }
+
+  // Close on outside click
+  useEffect(() => {
+    function handler(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, []);
+
+  function timeAgo(date) {
+    const s = Math.floor((Date.now() - date) / 1000);
+    if (s < 60)   return `${s}s ago`;
+    if (s < 3600) return `${Math.floor(s/60)}m ago`;
+    if (s < 86400)return `${Math.floor(s/3600)}h ago`;
+    return `${Math.floor(s/86400)}d ago`;
+  }
+
+  const iconFor = () => (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="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 (
+    <div ref={ref} style={{ position:'relative', height:'100%', display:'flex', alignItems:'center' }}>
+      <button
+        onClick={() => { setOpen(o => !o); if (!open && unread) markAllRead(); }}
+        style={{ position:'relative', background:'none', border:'none', cursor:'pointer', color:'var(--muted)', padding:'6px', display:'flex', alignItems:'center', borderRadius:'var(--rads)', transition:'color .15s' }}
+        onMouseEnter={e => e.currentTarget.style.color = 'var(--primary-text)'}
+        onMouseLeave={e => e.currentTarget.style.color = 'var(--muted)'}
+      >
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
+          <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
+        </svg>
+        {unread > 0 && (
+          <span style={{ position:'absolute', top:2, right:2, minWidth:16, height:16, borderRadius:8, background:'var(--danger)', color:'#fff', fontSize:10, fontWeight:700, display:'flex', alignItems:'center', justifyContent:'center', padding:'0 3px', lineHeight:1 }}>
+            {unread > 99 ? '99+' : unread}
+          </span>
+        )}
+      </button>
+
+      <div style={{
+        position:'absolute', right:0, top:'100%', width:320, zIndex:1000,
+        background:'var(--surface)', border:'1px solid var(--border)',
+        borderRadius:'var(--rads)', boxShadow:'var(--shadow-lg)',
+        opacity: open ? 1 : 0,
+        transform: open ? 'translateY(0)' : 'translateY(-6px)',
+        pointerEvents: open ? 'auto' : 'none',
+        transition: 'opacity .15s ease, transform .15s ease',
+      }}>
+        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'10px 14px', borderBottom:'1px solid var(--border)' }}>
+          <span style={{ fontSize:'.82rem', fontWeight:600 }}>Notifications</span>
+          {notifs.length > 0 && (
+            <button onClick={clearAll} style={{ fontSize:'.7rem', color:'var(--muted)', background:'none', border:'none', cursor:'pointer' }}>Clear all</button>
+          )}
+        </div>
+
+        <div style={{ maxHeight:360, overflowY:'auto' }}>
+          {notifs.length === 0 ? (
+            <div style={{ padding:'24px 16px', textAlign:'center', color:'var(--muted)', fontSize:'.8rem' }}>No notifications</div>
+          ) : notifs.map(n => (
+            <div key={n.id} style={{ display:'flex', gap:10, padding:'10px 14px', borderBottom:'1px solid var(--border-light)', background: n.read ? 'transparent' : 'var(--accent-bg)', transition:'background .2s' }}>
+              <div style={{ flexShrink:0, width:28, height:28, borderRadius:'50%', background:'var(--grey-1)', display:'flex', alignItems:'center', justifyContent:'center', color:'var(--accent)', marginTop:1 }}>
+                {iconFor(n.type)}
+              </div>
+              <div style={{ flex:1, minWidth:0 }}>
+                <div style={{ fontSize:'.78rem', fontWeight:600, marginBottom:2 }}>{n.title}</div>
+                <div style={{ fontSize:'.72rem', color:'var(--muted)', lineHeight:1.4 }}>{n.message}</div>
+                <div style={{ fontSize:'.68rem', color:'var(--muted)', marginTop:4, opacity:.7 }}>{timeAgo(n.time)}</div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/Pagination.jsx

@@ -0,0 +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>
+  );
+}

package/PulseDot.jsx

@@ -0,0 +1,58 @@
+const STYLES = `
+.pdot{position:relative;display:inline-flex;align-items:center;justify-content:center;width:8px;height:8px;flex-shrink:0}
+.pdot-core{width:8px;height:8px;border-radius:50%;background:var(--grey-4,#797b8d)}
+.pdot-ring{position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--grey-4,#797b8d);opacity:0;animation:pdot-pulse 1.1s ease-out infinite}
+.pdot-live .pdot-ring{animation-play-state:running}
+.pdot-paused .pdot-ring{animation-play-state:paused}
+
+.pdot-sm .pdot-core{width:6px;height:6px}
+.pdot-sm .pdot-ring{inset:-2px;border-width:1.5px}
+.pdot-lg .pdot-core{width:10px;height:10px}
+.pdot-lg .pdot-ring{inset:-4px}
+
+.pdot-ok .pdot-core{background:var(--success,#27ae60)}
+.pdot-ok .pdot-ring{border-color:var(--success,#27ae60)}
+.pdot-err .pdot-core{background:var(--danger,#f64747)}
+.pdot-err .pdot-ring{border-color:var(--danger,#f64747)}
+.pdot-warn .pdot-core{background:var(--accent,#f99e2c)}
+.pdot-warn .pdot-ring{border-color:var(--accent,#f99e2c)}
+.pdot-blue .pdot-core{background:var(--blue,#2782e4)}
+.pdot-blue .pdot-ring{border-color:var(--blue,#2782e4)}
+.pdot-purple .pdot-core{background:#8b5cf6}
+.pdot-purple .pdot-ring{border-color:#8b5cf6}
+.pdot-teal .pdot-core{background:#14b8a6}
+.pdot-teal .pdot-ring{border-color:#14b8a6}
+.pdot-pink .pdot-core{background:#ec4899}
+.pdot-pink .pdot-ring{border-color:#ec4899}
+
+.pdot-off .pdot-core{background:var(--t3,#9b9daa)}
+.pdot-off .pdot-ring{display:none}
+
+@keyframes pdot-pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.3);opacity:0}}
+`;
+
+let styleInjected = false;
+
+export default function PulseDot({
+  variant = 'dim',
+  size = 'md',
+  pulse = true,
+  className = '',
+  style = {},
+}) {
+  if (!styleInjected && typeof document !== 'undefined') {
+    const tag = document.createElement('style');
+    tag.textContent = STYLES;
+    document.head.appendChild(tag);
+    styleInjected = true;
+  }
+
+  const classes = `pdot pdot-${variant} pdot-${size}${pulse ? ' pdot-live' : ' pdot-paused'}${className ? ' ' + className : ''}`;
+
+  return (
+    <span className={classes} style={style}>
+      <span className="pdot-core" />
+      <span className="pdot-ring" />
+    </span>
+  );
+}

package/SearchableDropdown.jsx

@@ -0,0 +1,109 @@
+import { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { ChevronDown, Search, Check } from 'lucide-react';
+
+// SearchableDropdown — reusable searchable select
+// Props: value, onChange, options [{value, label}], placeholder
+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 [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)) { setOpen(false); setQuery(''); } }
+    document.addEventListener('mousedown', close);
+    return () => document.removeEventListener('mousedown', close);
+  }, [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: 9999,
+    });
+    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 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: 'var(--shadow)',
+      }}
+      onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--accent)'}
+      onMouseLeave={e => 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 style={{
+          ...menuStyle,
+          background: 'var(--surface)', border: '1px solid var(--border)',
+          borderRadius: 'var(--rads)', boxShadow: 'var(--shadow-lg)',
+          overflow: 'hidden', animation: 'dropdownOpen .12s ease',
+        }}>
+          {/* Search input */}
+          <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>
+          {/* Options */}
+          <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} 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>
+  );
+}