cynx-ui 1.3.19 → 1.3.21

package/components/Modal.jsx

@@ -11,14 +11,14 @@ const STYLES = `
   z-index: 8000; padding: 20px;
 }
 .modal {
-  background: var(--surface); border: 1px solid var(--border);
+  background: var(--surface, #ffffff); border: 1px solid var(--border, #e2e8f0);
   border-radius: 14px; width: 100%; max-width: 480px;
-  box-shadow: var(--shadow-lg);
+  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.06));
   overflow: visible;
 }
 .modal-hdr {
   display: flex; align-items: center; justify-content: space-between;
-  padding: 15px 20px; border-bottom: 1px solid var(--border-light);
+  padding: 15px 20px; border-bottom: 1px solid var(--border-light, #ebebf0);
   border-radius: 14px 14px 0 0;
   flex-shrink: 0;
 }
@@ -26,21 +26,21 @@ const STYLES = `
 .modal-body  { padding: 20px; overflow-x: hidden; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
 .modal-footer {
   display: flex; justify-content: flex-end; gap: 8px;
-  padding: 13px 20px; border-top: 1px solid var(--border-light);
-  background: var(--grey-1); border-radius: 0 0 14px 14px;
+  padding: 13px 20px; border-top: 1px solid var(--border-light, #ebebf0);
+  background: var(--grey-1, #f5f5f8); border-radius: 0 0 14px 14px;
   flex-shrink: 0;
 }
 .modal-card {
-  background: var(--surface); border: 1px solid var(--border);
+  background: var(--surface, #ffffff); border: 1px solid var(--border, #e2e8f0);
   border-radius: 14px; width: 100%; max-width: 480px; max-height: 60vh;
-  box-shadow: var(--shadow-lg); overflow: hidden;
+  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.06)); overflow: hidden;
   display: flex; flex-direction: column;
 }
 .modal-close {
   background: none; border: none; cursor: pointer; padding: 4px; border-radius: 6px;
-  color: var(--muted); display: flex; align-items: center; transition: all .14s;
+  color: var(--muted, #797b8d); display: flex; align-items: center; transition: all .14s;
 }
-.modal-close:hover { color: var(--primary-text); background: var(--grey-1); }
+.modal-close:hover { color: var(--primary-text, #0f172a); background: var(--grey-1, #f5f5f8); }
 .confirm-icon {
   width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 12px;
   display: flex; align-items: center; justify-content: center;
@@ -150,7 +150,7 @@ export function Modal({ open, onClose, onBeforeClose, title, children, footer, m
       <div
         className="modal-card"
         style={{
-          background: 'var(--surface)', border: '1px solid var(--border)',
+          background: 'var(--surface, #ffffff)', border: '1px solid var(--border, #e2e8f0)',
           borderRadius: 14, width: '100%',
           maxWidth: style?.maxWidth || maxWidth,
           maxHeight: resolvedMaxHeight,
@@ -163,7 +163,7 @@ export function Modal({ open, onClose, onBeforeClose, title, children, footer, m
       >
         <div className="modal-hdr" style={{
           display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-          padding: '15px 20px', borderBottom: '1px solid var(--border-light)',
+          padding: '15px 20px', borderBottom: '1px solid var(--border-light, #ebebf0)',
           borderRadius: '14px 14px 0 0', flexShrink: 0,
         }}>
           <span className="modal-title" style={{ fontSize: '.88rem', fontWeight: 700, letterSpacing: '-.01em' }}>{title}</span>
@@ -171,8 +171,8 @@ export function Modal({ open, onClose, onBeforeClose, title, children, footer, m
         <div className="modal-body" style={{ padding: 20, overflowX: 'hidden', overflowY: 'auto', flex: '1 1 auto', minHeight: 0, ...bodyStyle }}>{resolvedChildren}</div>
         {resolvedFooter && <div className="modal-footer" style={{
           display: 'flex', justifyContent: 'flex-end', gap: 8,
-          padding: '13px 20px', borderTop: '1px solid var(--border-light)',
-          background: 'var(--grey-1)', borderRadius: '0 0 14px 14px', flexShrink: 0,
+          padding: '13px 20px', borderTop: '1px solid var(--border-light, #ebebf0)',
+          background: 'var(--grey-1, #f5f5f8)', borderRadius: '0 0 14px 14px', flexShrink: 0,
         }}>{resolvedFooter}</div>}
       </div>
     </div>,
@@ -181,7 +181,7 @@ export function Modal({ open, onClose, onBeforeClose, title, children, footer, m
 }
 
 export function Confirm({ open, onClose, onConfirm, title, message, variant = 'danger', confirmLabel = 'Confirm', loading = false }) {
-  const iconColor  = { danger: 'var(--danger)', warning: 'var(--accent)', info: 'var(--blue)' }[variant] || 'var(--danger)';
+  const iconColor  = { danger: 'var(--danger, #f64747)', warning: 'var(--accent, #f99e2c)', info: 'var(--blue, #2782e4)' }[variant] || 'var(--danger, #f64747)';
   const btnVariant = variant === 'danger' ? 'danger' : 'primary';
 
   const icon = variant === 'danger'
@@ -205,7 +205,7 @@ export function Confirm({ open, onClose, onConfirm, title, message, variant = 'd
           background: variant === 'danger' ? 'var(--dd, rgba(246,71,71,.1))' : variant === 'warning' ? 'var(--pd, rgba(249,158,44,.1))' : 'var(--infd, rgba(39,130,228,.1))',
         }}>{icon}</div>
         <div style={{ fontSize: '.9rem', fontWeight: 700, marginBottom: 8 }}>{title}</div>
-        {message && <div style={{ fontSize: '.8rem', color: 'var(--muted)', lineHeight: 1.5 }}>{message}</div>}
+        {message && <div style={{ fontSize: '.8rem', color: 'var(--muted, #797b8d)', lineHeight: 1.5 }}>{message}</div>}
       </div>
     </Modal>
   );

package/components/Pagination.jsx

@@ -18,12 +18,12 @@ export function Pagination({ page, pages, total, perPage, onChange }) {
     <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)',
+      borderTop: '1px solid var(--border-light, #ebebf0)',
+      background: 'var(--surface, #ffffff)',
+      borderRadius: '0 0 var(--rad, 10px) var(--rad, 10px)',
     }}>
       {start !== null && (
-        <div style={{ fontSize: '.72rem', color: 'var(--muted)', fontFamily: 'var(--mono)' }}>
+        <div style={{ fontSize: '.72rem', color: 'var(--muted, #797b8d)', fontFamily: 'var(--mono, ui-monospace, monospace)' }}>
           {start}–{end} of {total}
         </div>
       )}
@@ -31,7 +31,7 @@ export function Pagination({ page, pages, total, perPage, onChange }) {
         <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>
+            ? <span key={`e${i}`} style={{ padding: '0 4px', color: 'var(--muted, #797b8d)', 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} />

package/components/Select.jsx

@@ -168,7 +168,7 @@ export default function Select({
         : typeof rounded === 'number'
           ? `${rounded}px`
           : '6px')
-    : (size === 'xs' ? '4px' : size === 'sm' ? '6px' : 'var(--rmd,var(--rads))');
+    : (size === 'xs' ? '4px' : size === 'sm' ? '6px' : 'var(--rmd,var(--rads, 8px))');
 
   return (
     <div
@@ -177,7 +177,7 @@ export default function Select({
         position: 'relative',
         width: '100%',
         boxSizing: 'border-box',
-        fontFamily: 'var(--f,var(--sans))',
+        fontFamily: 'var(--f,var(--sans, inherit))',
         opacity: disabled ? 0.5 : 1,
         pointerEvents: disabled ? 'none' : undefined,
         ...style,
@@ -194,14 +194,14 @@ export default function Select({
           gap: 4,
           padding: paddingVal,
           height: heightVal,
-          background: 'var(--sf,var(--surface))',
-          border: `1px solid ${open ? 'var(--accent)' : 'var(--bd2,var(--border))'}`,
+          background: 'var(--sf,var(--surface, #ffffff))',
+          border: `1px solid ${open ? 'var(--accent, #f99e2c)' : 'var(--bd2,var(--border, #e2e8f0))'}`,
           borderRadius: radiusVal,
           cursor: 'pointer',
           fontFamily: 'var(--f,var(--sans,inherit))',
           fontSize: fontSizeVal,
           lineHeight: 1.2,
-          color: 'var(--t,var(--primary-text))',
+          color: 'var(--t,var(--primary-text, #0f172a))',
           outline: 'none',
           transition: 'border-color var(--tr,.15s), box-shadow var(--tr,.15s)',
           boxShadow: open ? 'var(--infd, rgba(37,99,235,.1))' : 'var(--shadow,0 1px 3px rgba(20,22,41,.1))',
@@ -216,12 +216,12 @@ export default function Select({
                   alignItems: 'center',
                   gap: 4,
                   padding: '2px 6px',
-                  background: 'var(--pd,var(--accent-bg))',
-                  border: '1px solid var(--accent)',
+                  background: 'var(--pd,var(--accent-bg, rgba(249,158,44,.1)))',
+                  border: '1px solid var(--accent, #f99e2c)',
                   borderRadius: 4,
                   fontSize: 11,
                   fontWeight: 600,
-                  color: 'var(--accent)',
+                  color: 'var(--accent, #f99e2c)',
                   whiteSpace: 'nowrap',
                   maxWidth: 140,
                   opacity: 0.85,
@@ -240,7 +240,7 @@ export default function Select({
               {getLabel(selectedValues[0]) || '\u00A0'}
             </span>
           ) : (
-            <span style={{ color: 'var(--t3,var(--grey-3))', fontWeight: 400 }}>{placeholder}</span>
+            <span style={{ color: 'var(--t3,var(--grey-3, #cbd5e1))', fontWeight: 400 }}>{placeholder}</span>
           )}
         </div>
         {!multi && selectedValues.length > 0 && selectedValues[0] !== '' && selectedValues[0] !== null && (clearable || !!onClear) ? (
@@ -271,7 +271,7 @@ export default function Select({
             size={12}
             style={{
               flexShrink: 0,
-              color: 'var(--t3,var(--grey-3))',
+              color: 'var(--t3,var(--grey-3, #cbd5e1))',
               transition: 'transform .2s ease',
               transform: open ? 'rotate(180deg)' : undefined,
             }}
@@ -289,8 +289,8 @@ export default function Select({
             left: pos.left,
             width: pos.width,
             boxSizing: 'border-box',
-            background: 'var(--sf,var(--surface))',
-            border: '1px solid var(--bd,var(--border))',
+            background: 'var(--sf,var(--surface, #ffffff))',
+            border: '1px solid var(--bd,var(--border, #e2e8f0))',
             borderRadius: radiusVal,
             boxShadow: 'var(--shadow,0 1px 3px rgba(20,22,41,.1))',
             padding: 3,
@@ -312,13 +312,13 @@ export default function Select({
                   boxSizing: 'border-box',
                   padding: size === 'xs' ? '2px 5px' : size === 'sm' ? '3px 6px' : '7px 10px',
                   height: size === 'xs' ? 22 : size === 'sm' ? 26 : 32,
-                  background: 'var(--sf2,var(--grey-1))',
-                  border: '1.5px solid var(--bd2,var(--border))',
-                  borderRadius: size === 'xs' ? '3px' : size === 'sm' ? '4px' : 'var(--rmd,var(--rads))',
-                  fontFamily: 'var(--f,var(--sans))',
+                  background: 'var(--sf2,var(--grey-1, #f5f5f8))',
+                  border: '1.5px solid var(--bd2,var(--border, #e2e8f0))',
+                  borderRadius: size === 'xs' ? '3px' : size === 'sm' ? '4px' : 'var(--rmd,var(--rads, 8px))',
+                  fontFamily: 'var(--f,var(--sans, inherit))',
                   fontSize: size === 'xs' ? '10.5px' : size === 'sm' ? '11.5px' : '12.5px',
                   lineHeight: 1,
-                  color: 'var(--t,var(--primary-text))',
+                  color: 'var(--t,var(--primary-text, #0f172a))',
                   outline: 'none',
                   transition: 'border-color var(--tr,.15s), box-shadow var(--tr,.15s)',
                 }}
@@ -327,7 +327,7 @@ export default function Select({
           )}
           <div style={{ maxHeight: pos.maxHeight || 200, overflowY: 'auto' }}>
             {filtered.length === 0 ? (
-              <div style={{ padding: '10px 8px', textAlign: 'center', color: 'var(--t3,var(--grey-3))', fontSize: 11 }}>
+              <div style={{ padding: '10px 8px', textAlign: 'center', color: 'var(--t3,var(--grey-3, #cbd5e1))', fontSize: 11 }}>
                 Ничего не найдено
               </div>
             ) : (
@@ -341,10 +341,10 @@ export default function Select({
                     gap: 6,
                     minHeight: size === 'xs' ? 18 : size === 'sm' ? 22 : 28,
                     padding: size === 'xs' ? '3px 5px' : size === 'sm' ? '4.5px 7px' : '8px 10px',
-                    borderRadius: size === 'xs' ? '3px' : size === 'sm' ? '4px' : 'var(--rmd,var(--rads))',
+                    borderRadius: size === 'xs' ? '3px' : size === 'sm' ? '4px' : 'var(--rmd,var(--rads, 8px))',
                     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,
+                    color: isSelected(opt.value) ? 'var(--accent, #f99e2c)' : 'var(--t,var(--primary-text, #0f172a))',
+                    background: isSelected(opt.value) ? 'var(--pd,var(--accent-bg, rgba(249,158,44,.1)))' : undefined,
                     fontSize: size === 'xs' ? '10.5px' : size === 'sm' ? '11.5px' : '12.5px',
                     fontWeight: 400,
                     transition: 'background .1s',
@@ -357,12 +357,12 @@ export default function Select({
                     <span style={{
                       width: 13,
                       height: 13,
-                      border: `1.5px solid ${isSelected(opt.value) ? 'var(--accent)' : 'var(--bd2,var(--border))'}`,
+                      border: `1.5px solid ${isSelected(opt.value) ? 'var(--accent, #f99e2c)' : 'var(--bd2,var(--border, #e2e8f0))'}`,
                       borderRadius: 3,
                       flexShrink: 0,
                       position: 'relative',
                       transition: 'all .15s',
-                      background: isSelected(opt.value) ? 'var(--accent)' : undefined,
+                      background: isSelected(opt.value) ? 'var(--accent, #f99e2c)' : undefined,
                     }}>
                       {isSelected(opt.value) && (
                         <span style={{
@@ -382,7 +382,7 @@ export default function Select({
                     {opt.displayLabel || opt.label || '\u00A0'}
                   </span>
                   {!multi && isSelected(opt.value) && (
-                    <Check size={12} style={{ flexShrink: 0, color: 'var(--accent)' }} />
+                    <Check size={12} style={{ flexShrink: 0, color: 'var(--accent, #f99e2c)' }} />
                   )}
                 </div>
               ))

package/components/Spinner.jsx

@@ -27,13 +27,13 @@ export function SpinnerClassic({ size = 20, inline = false, color = 'currentColo
     return (
       <div style={{
         position: 'fixed', inset: 0,
-        background: 'var(--bg)',
+        background: 'var(--bg, #f8fafc)',
         display: 'flex', flexDirection: 'column',
         alignItems: 'center', justifyContent: 'center', gap: 16,
         zIndex: 9999,
       }}>
         {svg}
-        <div style={{ fontSize: '.75rem', fontFamily: 'var(--mono)', color: 'var(--muted)' }}>
+        <div style={{ fontSize: '.75rem', fontFamily: 'var(--mono, ui-monospace, monospace)', color: 'var(--muted, #797b8d)' }}>
           Loading...
         </div>
       </div>
@@ -67,7 +67,7 @@ export function Spinner({ size = 20, inline = false, color = 'currentColor', ful
     return (
       <div style={{
         position: 'fixed', inset: 0,
-        background: 'var(--bg)',
+        background: 'var(--bg, #f8fafc)',
         display: 'flex', flexDirection: 'column',
         alignItems: 'center', justifyContent: 'center', gap: 16,
         zIndex: 9999,
@@ -75,7 +75,7 @@ export function Spinner({ size = 20, inline = false, color = 'currentColor', ful
         <div className="v-progress-circular v-progress-circular--indeterminate" style={{ width: s, height: s }}>
           {svg}
         </div>
-        <div style={{ fontSize: '.75rem', fontFamily: 'var(--mono)', color: 'var(--muted)' }}>
+        <div style={{ fontSize: '.75rem', fontFamily: 'var(--mono, ui-monospace, monospace)', color: 'var(--muted, #797b8d)' }}>
           Loading...
         </div>
       </div>

package/components/StatBarCard.jsx

@@ -5,7 +5,7 @@ export default function StatBarCard({ title, icon, items, style }) {
 
   return (
     <div style={{
-      background: 'var(--surface,#fff)', border: '1px solid var(--border)', borderRadius: 'var(--rad)',
+      background: 'var(--surface,#fff)', border: '1px solid var(--border, #e2e8f0)', borderRadius: 'var(--rad, 10px)',
       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,
     }}>

package/components/StatsBar.jsx

@@ -7,7 +7,7 @@ const itemStyle = {
   padding: '4px 8px',
   fontSize: '.8rem',
   fontWeight: 600,
-  color: 'var(--t)',
+  color: 'var(--t, #0f172a)',
 };
 
 const iconWrap = (color) => ({
@@ -25,7 +25,7 @@ const iconWrap = (color) => ({
 const sep = {
   width: 1,
   height: 14,
-  background: 'var(--border-light)',
+  background: 'var(--border-light, #ebebf0)',
   margin: '0 3px',
   flexShrink: 0,
 };
@@ -37,8 +37,8 @@ const groupStyle = {
   padding: '3px 8px',
   minHeight: 32,
   borderRadius: 7,
-  border: '1px solid var(--border)',
-  background: 'var(--surface)',
+  border: '1px solid var(--border, #e2e8f0)',
+  background: 'var(--surface, #ffffff)',
   boxShadow: 'var(--shadow, 0 1px 2px rgba(0,0,0,.05))',
 };
 

package/components/StatsCard.jsx

@@ -8,7 +8,7 @@ const BASE = {
   minHeight: 68,
   borderRadius: 'var(--rad,10px)',
   background: 'var(--surface,#fff)',
-  border: '1px solid var(--border)',
+  border: '1px solid var(--border, #e2e8f0)',
   boxShadow: 'var(--shadow, 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04))',
   minWidth: 0,
   transition: 'border-color .15s',
@@ -25,7 +25,7 @@ const SIMPLE_BASE = {
 export default function StatsCard({
   variant = 'default',
   icon,
-  iconColor = 'var(--blue)',
+  iconColor = 'var(--blue, #2782e4)',
   iconBg = 'var(--infd, rgba(39,130,228,.1))',
   title,
   value,

package/components/TabBar.jsx

@@ -180,8 +180,8 @@ export default function TabBar({ tabs, active, onChange, capitalize = false, pad
                 {hasItems && <ChevronIcon isOpen={isOpen} />}
                 {t.count != null && t.count > 0 && (
                   <span style={{
-                    background: isActive ? 'var(--accent-bg)' : 'var(--grey-2, #d7d8e0)',
-                    color:      isActive ? 'var(--accent)'    : 'var(--muted)',
+                    background: isActive ? 'var(--accent-bg, rgba(249,158,44,.1))' : 'var(--grey-2, #d7d8e0)',
+                    color:      isActive ? 'var(--accent, #f99e2c)'    : 'var(--muted, #797b8d)',
                     borderRadius: 10,
                     padding: '1px 6px',
                     fontSize: '.68rem',
@@ -261,7 +261,7 @@ export default function TabBar({ tabs, active, onChange, capitalize = false, pad
       <div ref={indRef} style={{
         position:'absolute', bottom:'-1px', left:0,
         height:2, width:0,
-        background:'var(--accent)',
+        background:'var(--accent, #f99e2c)',
         borderRadius:'2px 2px 0 0',
         transition:'transform .22s cubic-bezier(.4,0,.2,1), width .22s cubic-bezier(.4,0,.2,1)',
         pointerEvents:'none', zIndex:2,
@@ -296,7 +296,7 @@ export default function TabBar({ tabs, active, onChange, capitalize = false, pad
                 padding: defaultPadding,
                 border:'none', background:'none',
                 fontSize:'.82rem', fontWeight:500,
-                color: isActive ? 'var(--accent)' : 'var(--muted)',
+                color: isActive ? 'var(--accent, #f99e2c)' : 'var(--muted, #797b8d)',
                 cursor: t.disabled ? 'not-allowed' : 'pointer',
                 opacity: t.disabled ? 0.38 : 1,
                 transition:'color .18s',
@@ -323,8 +323,8 @@ export default function TabBar({ tabs, active, onChange, capitalize = false, pad
               {hasItems && <ChevronIcon isOpen={isOpen} />}
               {t.count != null && t.count > 0 && (
                 <span style={{
-                  background: isActive ? 'var(--accent-bg)' : 'var(--grey-1)',
-                  color:      isActive ? 'var(--accent)'    : 'var(--muted)',
+                  background: isActive ? 'var(--accent-bg, rgba(249,158,44,.1))' : 'var(--grey-1, #f5f5f8)',
+                  color:      isActive ? 'var(--accent, #f99e2c)'    : 'var(--muted, #797b8d)',
                   borderRadius: 10,
                   padding: '1px 6px',
                   fontSize: '.68rem',