cynx-ui 1.2.6 → 1.2.8

package/components/Select.jsx

@@ -2,69 +2,17 @@ import { useState, useRef, useEffect, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import { ChevronDown, Check, X } from 'lucide-react';
 
-const STYLES = `
-.sel-wrap{position:relative;width:100%;font-family:var(--f,var(--sans));font-size:var(--fsz,13px)}
-.sel-wrap.disabled{opacity:.5;pointer-events:none}
-.sel-trigger{
-  width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
-  padding:8px 11px;height:35px;
-  background:var(--sf,var(--surface));border:1.5px solid var(--bd2,var(--border));
-  border-radius:var(--rmd,var(--rads));cursor:pointer;
-  font-family:var(--f,var(--sans,inherit));font-size:12.5px;line-height:1;
-  color:var(--t,var(--primary-text));outline:none;
-  transition:border-color var(--tr,.15s),box-shadow var(--tr,.15s);
-  box-shadow:var(--shadow,0 1px 3px rgba(20,22,41,.1))
-}
-.sel-trigger:hover{border-color:var(--bd2,var(--grey-2))}
-.sel-trigger.open{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
-.sel-trigger-inner{flex:1;min-width:0;display:flex;align-items:center}
-.sel-value{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.sel-placeholder{color:var(--t3,var(--grey-3));font-weight:400}
-.sel-chevron{flex-shrink:0;color:var(--t3,var(--grey-3));transition:transform .2s ease}
-.sel-trigger.open .sel-chevron{transform:rotate(180deg)}
-.sel-tags{display:flex;flex-wrap:wrap;gap:4px;flex:1;min-width:0}
-.sel-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;background:var(--pd,var(--accent-bg));border:1px solid var(--accent);border-radius:4px;font-size:11px;font-weight:600;color:var(--accent);white-space:nowrap;max-width:140px;opacity:.85}
-.sel-tag-x{cursor:pointer;flex-shrink:0;opacity:.5;transition:opacity .15s}
-.sel-tag-x:hover{opacity:1}
-.sel-dropdown{
-  position:fixed;z-index:9000;
-  background:var(--sf,var(--surface));border:1px solid var(--bd,var(--border));
-  border-radius:var(--rmd,var(--rads));box-shadow:var(--shadow,0 1px 3px rgba(20,22,41,.1));
-  padding:4px;animation:selFadeIn .15s ease;overflow:hidden
-}
-@keyframes selFadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
-.sel-search-wrap{padding:4px}
-.sel-search{
-  width:100%;padding:7px 10px;height:35px;
-  background:var(--sf2,var(--grey-1));border:1.5px solid var(--bd2,var(--border));
-  border-radius:var(--rmd,var(--rads));font-family:var(--f,var(--sans));font-size:12.5px;line-height:1;
-  color:var(--t,var(--primary-text));outline:none;
-  transition:border-color var(--tr,.15s),box-shadow var(--tr,.15s)
-}
-.sel-search::placeholder{color:var(--t3,var(--grey-3))}
-.sel-search:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
-.sel-options{max-height:200px;overflow-y:auto}
-.sel-options::-webkit-scrollbar{width:4px}
-.sel-options::-webkit-scrollbar-thumb{background:var(--bd2,var(--grey-2));border-radius:99px}
-.sel-option{
-  display:flex;align-items:center;gap:8px;padding:8px 10px;
-  border-radius:var(--rmd,var(--rads));cursor:pointer;
-  color:var(--t,var(--primary-text));font-size:12.5px;
-  font-weight:400 !important;transition:background .1s;user-select:none
-}
-.sel-option:hover{background:var(--sf2,var(--hover-bg))}
-.sel-option.selected{color:var(--accent);background:var(--pd,var(--accent-bg))}
-.sel-option.disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
-.sel-opt-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.sel-check{flex-shrink:0;color:var(--accent)}
-.sel-check-box{width:15px;height:15px;border:1.5px solid var(--bd2,var(--border));border-radius:3px;flex-shrink:0;position:relative;transition:all .15s}
-.sel-check-box.checked{background:var(--accent);border-color:var(--accent)}
-.sel-check-box.checked::after{content:'';position:absolute;top:1px;left:3.5px;width:4.5px;height:7px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
-.sel-empty{padding:14px 10px;text-align:center;color:var(--t3,var(--grey-3));font-size:11px}
-`;
-
+const KEYFRAMES = `@keyframes selFadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}`;
 let styleInjected = false;
 
+function ensureStyles() {
+  if (styleInjected || typeof document === 'undefined') return;
+  const tag = document.createElement('style');
+  tag.textContent = KEYFRAMES;
+  document.head.appendChild(tag);
+  styleInjected = true;
+}
+
 export default function Select({
   options = [],
   value,
@@ -82,14 +30,7 @@ export default function Select({
   const dropRef = useRef(null);
   const inputRef = useRef(null);
 
-  useEffect(() => {
-    if (!styleInjected) {
-      const tag = document.createElement('style');
-      tag.textContent = STYLES;
-      document.head.appendChild(tag);
-      styleInjected = true;
-    }
-  }, []);
+  ensureStyles();
 
   useEffect(() => {
     if (!open) return;
@@ -165,47 +106,190 @@ export default function Select({
   const selectedValues = multi ? (Array.isArray(value) ? value : []) : (value ? [value] : []);
 
   return (
-    <div className={`sel-wrap${disabled ? ' disabled' : ''}${multi ? ' multi' : ''}`} ref={wrapRef} style={style}>
-      <div className={`sel-trigger${open ? ' open' : ''}`} onClick={handleOpen}>
-        <div className="sel-trigger-inner">
+    <div
+      ref={wrapRef}
+      style={{
+        position: 'relative',
+        width: '100%',
+        fontFamily: 'var(--f,var(--sans))',
+        fontSize: 'var(--fsz,13px)',
+        opacity: disabled ? 0.5 : 1,
+        pointerEvents: disabled ? 'none' : undefined,
+        ...style,
+      }}
+    >
+      <div
+        onClick={handleOpen}
+        style={{
+          width: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: 8,
+          padding: '8px 11px',
+          height: 35,
+          background: 'var(--sf,var(--surface))',
+          border: `1.5px solid ${open ? 'var(--accent)' : 'var(--bd2,var(--border))'}`,
+          borderRadius: 'var(--rmd,var(--rads))',
+          cursor: 'pointer',
+          fontFamily: 'var(--f,var(--sans,inherit))',
+          fontSize: '12.5px',
+          lineHeight: 1,
+          color: 'var(--t,var(--primary-text))',
+          outline: 'none',
+          transition: 'border-color var(--tr,.15s), box-shadow var(--tr,.15s)',
+          boxShadow: open ? '0 0 0 3px rgba(37,99,235,.1)' : 'var(--shadow,0 1px 3px rgba(20,22,41,.1))',
+        }}
+      >
+        <div style={{ flex: 1, minWidth: 0, display: 'flex', alignItems: 'center' }}>
           {multi && selectedValues.length > 0 ? (
-            <div className="sel-tags">
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, flex: 1, minWidth: 0 }}>
               {selectedValues.map(v => (
-                <span key={v} className="sel-tag">
+                <span key={v} style={{
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: 4,
+                  padding: '2px 6px',
+                  background: 'var(--pd,var(--accent-bg))',
+                  border: '1px solid var(--accent)',
+                  borderRadius: 4,
+                  fontSize: 11,
+                  fontWeight: 600,
+                  color: 'var(--accent)',
+                  whiteSpace: 'nowrap',
+                  maxWidth: 140,
+                  opacity: 0.85,
+                }}>
                   {getLabel(v)}
-                  <X size={11} className="sel-tag-x" onMouseDown={(e) => removeTag(e, v)} />
+                  <X
+                    size={11}
+                    style={{ cursor: 'pointer', flexShrink: 0, opacity: 0.5 }}
+                    onMouseDown={(e) => removeTag(e, v)}
+                  />
                 </span>
               ))}
             </div>
           ) : !multi && selectedValues.length > 0 ? (
-            <span className="sel-value">{getLabel(selectedValues[0])}</span>
+            <span style={{ fontWeight: 400, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+              {getLabel(selectedValues[0])}
+            </span>
           ) : (
-            <span className="sel-placeholder">{placeholder}</span>
+            <span style={{ color: 'var(--t3,var(--grey-3))', fontWeight: 400 }}>{placeholder}</span>
           )}
         </div>
-        <ChevronDown size={13} className="sel-chevron" />
+        <ChevronDown
+          size={13}
+          style={{
+            flexShrink: 0,
+            color: 'var(--t3,var(--grey-3))',
+            transition: 'transform .2s ease',
+            transform: open ? 'rotate(180deg)' : undefined,
+          }}
+        />
       </div>
 
       {open && createPortal(
-        <div ref={dropRef} className="sel-dropdown" style={{ top: pos.top, left: pos.left, width: pos.width }}>
+        <div
+          ref={dropRef}
+          style={{
+            position: 'fixed',
+            zIndex: 9000,
+            top: pos.top,
+            left: pos.left,
+            width: pos.width,
+            background: 'var(--sf,var(--surface))',
+            border: '1px solid var(--bd,var(--border))',
+            borderRadius: 'var(--rmd,var(--rads))',
+            boxShadow: 'var(--shadow,0 1px 3px rgba(20,22,41,.1))',
+            padding: 4,
+            animation: 'selFadeIn .15s ease',
+            overflow: 'hidden',
+          }}
+        >
           {searchable && (
-            <div className="sel-search-wrap">
-              <input ref={inputRef} className="sel-search" type="text" placeholder="Search..."
-                value={query} onChange={e => setQuery(e.target.value)}
-                onMouseDown={e => e.stopPropagation()} />
+            <div style={{ padding: 4 }}>
+              <input
+                ref={inputRef}
+                type="text"
+                placeholder="Search..."
+                value={query}
+                onChange={e => setQuery(e.target.value)}
+                onMouseDown={e => e.stopPropagation()}
+                style={{
+                  width: '100%',
+                  padding: '7px 10px',
+                  height: 35,
+                  background: 'var(--sf2,var(--grey-1))',
+                  border: '1.5px solid var(--bd2,var(--border))',
+                  borderRadius: 'var(--rmd,var(--rads))',
+                  fontFamily: 'var(--f,var(--sans))',
+                  fontSize: '12.5px',
+                  lineHeight: 1,
+                  color: 'var(--t,var(--primary-text))',
+                  outline: 'none',
+                  transition: 'border-color var(--tr,.15s), box-shadow var(--tr,.15s)',
+                }}
+              />
             </div>
           )}
-          <div className="sel-options">
+          <div style={{ maxHeight: 200, overflowY: 'auto' }}>
             {filtered.length === 0 ? (
-              <div className="sel-empty">No options found</div>
+              <div style={{ padding: '14px 10px', textAlign: 'center', color: 'var(--t3,var(--grey-3))', fontSize: 11 }}>
+                No options found
+              </div>
             ) : (
               filtered.map(opt => (
-                <div key={opt.value}
-                  className={`sel-option${isSelected(opt.value) ? ' selected' : ''}${opt.disabled ? ' disabled' : ''}`}
-                  onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); if (!opt.disabled) toggleOption(opt.value); }}>
-                  {multi && <span className={`sel-check-box${isSelected(opt.value) ? ' checked' : ''}`} />}
-                  <span className="sel-opt-label">{opt.label}</span>
-                  {!multi && isSelected(opt.value) && <Check size={13} className="sel-check" />}
+                <div
+                  key={opt.value}
+                  onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); if (!opt.disabled) toggleOption(opt.value); }}
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 8,
+                    padding: '8px 10px',
+                    borderRadius: 'var(--rmd,var(--rads))',
+                    cursor: opt.disabled ? 'not-allowed' : 'pointer',
+                    color: isSelected(opt.value) ? 'var(--accent)' : 'var(--t,var(--primary-text))',
+                    background: isSelected(opt.value) ? 'var(--pd,var(--accent-bg))' : undefined,
+                    fontSize: '12.5px',
+                    fontWeight: 400,
+                    transition: 'background .1s',
+                    userSelect: 'none',
+                    opacity: opt.disabled ? 0.4 : 1,
+                    pointerEvents: opt.disabled ? 'none' : undefined,
+                  }}
+                >
+                  {multi && (
+                    <span style={{
+                      width: 15,
+                      height: 15,
+                      border: `1.5px solid ${isSelected(opt.value) ? 'var(--accent)' : 'var(--bd2,var(--border))'}`,
+                      borderRadius: 3,
+                      flexShrink: 0,
+                      position: 'relative',
+                      transition: 'all .15s',
+                      background: isSelected(opt.value) ? 'var(--accent)' : undefined,
+                    }}>
+                      {isSelected(opt.value) && (
+                        <span style={{
+                          position: 'absolute',
+                          top: 1,
+                          left: 3.5,
+                          width: 4.5,
+                          height: 7,
+                          border: 'solid #fff',
+                          borderWidth: '0 1.5px 1.5px 0',
+                          transform: 'rotate(45deg)',
+                        }} />
+                      )}
+                    </span>
+                  )}
+                  <span style={{ flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                    {opt.label}
+                  </span>
+                  {!multi && isSelected(opt.value) && (
+                    <Check size={13} style={{ flexShrink: 0, color: 'var(--accent)' }} />
+                  )}
                 </div>
               ))
             )}

package/components/Skeleton.jsx

@@ -1,58 +1,35 @@
-/**
- * Reusable skeleton loading component.
- *
- * Usage:
- *   <Skeleton />                          — single block (default 100% x 12px)
- *   <Skeleton width={80} height={12} />   — custom size
- *   <Skeleton circle size={32} />         — circle (avatar, icon)
- *   <SkeletonText lines={3} />            — multiple text lines
- *   <SkeletonCard />                      — card-shaped skeleton
- *   <SkeletonCard rows={4} />             — card with more rows
- */
-
 const STYLES = `
-@keyframes sk-shimmer {
-  0%   { background-position: -600px 0; }
-  100% { background-position: 600px 0; }
-}
-.sk {
-  background: linear-gradient(90deg, var(--grey-1, #f0f1f5) 25%, var(--border-light, #e8e8ec) 50%, var(--grey-1, #f0f1f5) 75%);
-  background-size: 600px 100%;
-  animation: sk-shimmer 1.4s ease infinite;
-  border-radius: var(--radxs, 4px);
-  flex-shrink: 0;
-}
-.sk-card {
-  background: var(--surface, #fff);
-  border: 1px solid var(--border-light, #ebebf0);
-  border-radius: var(--rad, 10px);
-  padding: 14px 16px;
-  box-shadow: 0 1px 3px rgba(0,0,0,.04);
-}
-.sk-card-head {
-  display: flex; align-items: center; justify-content: space-between;
-  margin-bottom: 12px;
-}
+@keyframes sk-shimmer{0%{background-position:-600px 0}100%{background-position:600px 0}}
+.skeleton{background:linear-gradient(90deg,var(--grey-1,#f0f1f5) 25%,var(--border-light,#e8e8ec) 50%,var(--grey-1,#f0f1f5) 75%);background-size:600px 100%;animation:sk-shimmer 1.4s ease infinite;border-radius:var(--radxs,4px)}
+.skeleton-text{height:12px;margin-bottom:6px}
 `;
-
-let injected = false;
+let styleInjected = false;
 
 function ensureStyles() {
-  if (injected || typeof document === 'undefined') return;
+  if (styleInjected || typeof document === 'undefined') return;
   const tag = document.createElement('style');
   tag.textContent = STYLES;
   document.head.appendChild(tag);
-  injected = true;
+  styleInjected = true;
 }
 
+const SK_BASE = {
+  background: 'linear-gradient(90deg, var(--grey-1, #f0f1f5) 25%, var(--border-light, #e8e8ec) 50%, var(--grey-1, #f0f1f5) 75%)',
+  backgroundSize: '600px 100%',
+  animation: 'sk-shimmer 1.4s ease infinite',
+  borderRadius: 'var(--radxs, 4px)',
+  flexShrink: 0,
+};
+
 export function Skeleton({ width = '100%', height = 12, circle, size, radius, style = {}, className = '' }) {
   ensureStyles();
   const w = circle ? size : width;
   const h = circle ? size : height;
   return (
     <div
-      className={`sk ${className}`}
+      className={className}
       style={{
+        ...SK_BASE,
         width: w,
         height: h,
         borderRadius: circle ? '50%' : radius,
@@ -71,11 +48,10 @@ export function SkeletonText({ lines = 3, widths, style = {} }) {
       {Array.from({ length: lines }, (_, i) => (
         <div
           key={i}
-          className="sk"
           style={{
+            ...SK_BASE,
             width: ws[i % ws.length],
             height: 12,
-            borderRadius: 'var(--radxs, 4px)',
           }}
         />
       ))}
@@ -86,8 +62,20 @@ export function SkeletonText({ lines = 3, widths, style = {} }) {
 export function SkeletonCard({ rows = 3, style = {} }) {
   ensureStyles();
   return (
-    <div className="sk-card" style={style}>
-      <div className="sk-card-head">
+    <div style={{
+      background: 'var(--surface, #fff)',
+      border: '1px solid var(--border-light, #ebebf0)',
+      borderRadius: 'var(--rad, 10px)',
+      padding: '14px 16px',
+      boxShadow: '0 1px 3px rgba(0,0,0,.04)',
+      ...style,
+    }}>
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 12,
+      }}>
         <Skeleton width={140} height={14} />
         <Skeleton width={70} height={26} radius="var(--rads, 6px)" />
       </div>
@@ -103,7 +91,7 @@ export function SkeletonRows({ cols = 5, rows = 5 }) {
     <tr key={i}>
       {Array.from({ length: cols }).map((_, j) => (
         <td key={j}>
-          <div className="sk" style={{ width: `${50 + Math.random() * 40}%`, height: 12 }} />
+          <div style={{ ...SK_BASE, width: `${50 + Math.random() * 40}%`, height: 12 }} />
         </td>
       ))}
     </tr>

package/components/Spinner.jsx

@@ -1,4 +1,16 @@
+const STYLES = `.spin{animation:cx-spin .7s linear infinite}@keyframes cx-spin{to{transform:rotate(360deg)}}`;
+
+let injected = false;
+function ensureStyles() {
+  if (injected || typeof document === 'undefined') return;
+  const tag = document.createElement('style');
+  tag.textContent = STYLES;
+  document.head.appendChild(tag);
+  injected = true;
+}
+
 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"

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