cynx-ui 1.2.17 → 1.2.18

package/components/MultiSelect.jsx

@@ -1,167 +1,167 @@
-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('');
-      }
-    }
-    const timer = setTimeout(() => {
-      document.addEventListener('mousedown', close, true);
-    }, 0);
-    return () => {
-      clearTimeout(timer);
-      document.removeEventListener('mousedown', close, true);
-    };
-  }, [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}
-              onMouseDown={e => e.stopPropagation()}
-              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>
-  );
-}
+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('');
+      }
+    }
+    const timer = setTimeout(() => {
+      document.addEventListener('mousedown', close, true);
+    }, 0);
+    return () => {
+      clearTimeout(timer);
+      document.removeEventListener('mousedown', close, true);
+    };
+  }, [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}
+              onMouseDown={e => e.stopPropagation()}
+              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/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>
+  );
+}