cynx-ui 1.3.23 → 1.3.25

package/components/Badge.jsx

@@ -1,34 +1,23 @@
+import React from 'react';
+
 const VARIANTS = {
-  ok:       { bg: 'var(--success-bg,rgba(39,174,96,.1))', color: 'var(--success,#27ae60)', border: 'var(--sd, rgba(39,174,96,.2))', dot: 'var(--success,#27ae60)' },
-  err:      { bg: 'var(--danger-bg,rgba(246,71,71,.1))', color: 'var(--danger,#f64747)', border: 'var(--dd, rgba(246,71,71,.2))', dot: 'var(--danger,#f64747)' },
-  warn:     { bg: 'var(--accent-bg,rgba(249,158,44,.1))', color: 'var(--accent,#f99e2c)', border: 'var(--accent-border,rgba(249,158,44,.25))', dot: 'var(--accent,#f99e2c)' },
-  blue:     { bg: 'var(--blue-bg,rgba(39,130,228,.1))', color: 'var(--blue,#2782e4)', border: 'var(--infd, rgba(39,130,228,.2))', dot: 'var(--blue,#2782e4)' },
-  dim:      { bg: 'var(--grey-1,#f5f5f8)', color: 'var(--grey-4,#797b8d)', border: 'var(--border,#d7d8e0)', dot: 'var(--grey-4,#797b8d)' },
-  purple:   { bg: 'rgba(139,92,246,.1)', color: '#8b5cf6', border: 'rgba(139,92,246,.2)', dot: '#8b5cf6' },
-  teal:     { bg: 'rgba(20,184,166,.1)', color: '#14b8a6', border: 'rgba(20,184,166,.2)', dot: '#14b8a6' },
-  pink:     { bg: 'rgba(236,72,153,.1)', color: '#ec4899', border: 'rgba(236,72,153,.2)', dot: '#ec4899' },
-  ghost:    { bg: 'transparent', color: 'var(--t2,var(--grey-4,#797b8d))', border: 'var(--bd,var(--border,#d7d8e0))', dot: 'var(--t3,var(--grey-4,#797b8d))' },
-  paid:     { bg: 'var(--pd, rgba(30,41,59,.08))', color: 'var(--t, #1e293b)', border: 'var(--accent-border, rgba(30,41,59,.15))', dot: 'var(--t, #1e293b)' },
-  invoiced: { bg: 'rgba(120,120,130,.08)', color: 'var(--t2, #787882)', border: 'rgba(120,120,130,.15)', dot: 'var(--t2, #787882)' },
-  verified: { bg: 'var(--sd, rgba(34,197,94,.08))', color: 'var(--s, #22c55e)', border: 'var(--sd, rgba(34,197,94,.15))', dot: 'var(--s, #22c55e)' },
-  partial:  { bg: 'rgba(100,100,110,.08)', color: '#64646e', border: 'rgba(100,100,110,.15)', dot: '#64646e' },
-  deleted:  { bg: 'var(--dd, rgba(239,68,68,.08))', color: 'var(--d, #ef4444)', border: 'var(--dd, rgba(239,68,68,.15))', dot: 'var(--d, #ef4444)' },
-  update:   { bg: 'var(--wd, rgba(249,115,22,.08))', color: 'var(--w, #f97316)', border: 'var(--wd, rgba(249,115,22,.15))', dot: 'var(--w, #f97316)' },
-  ready:    { bg: 'var(--wd, rgba(234,179,8,.08))', color: 'var(--w, #eab308)', border: 'var(--wd, rgba(234,179,8,.15))', dot: 'var(--w, #eab308)' },
-  new:      { bg: 'var(--infd, rgba(59,130,246,.08))', color: 'var(--inf, #3b82f6)', border: 'var(--infd, rgba(59,130,246,.15))', dot: 'var(--inf, #3b82f6)' },
-  active:   { bg: 'transparent', color: 'var(--s, #22c55e)', border: 'none', dot: 'var(--s, #22c55e)', noPad: true },
-  inactive: { bg: 'transparent', color: 'var(--d, #ef4444)', border: 'none', dot: 'var(--d, #ef4444)', noPad: true },
-  pending:  { bg: 'transparent', color: 'var(--w, #d97706)', border: 'none', dot: 'var(--w, #d97706)', noPad: true, pulse: true },
+  ok:      { bg: 'var(--success-bg,rgba(39,174,96,.1))', color: 'var(--success,#27ae60)', border: 'var(--sd, rgba(39,174,96,.2))', dot: 'var(--success,#27ae60)' },
+  err:     { bg: 'var(--danger-bg,rgba(246,71,71,.1))', color: 'var(--danger,#f64747)', border: 'var(--dd, rgba(246,71,71,.2))', dot: 'var(--danger,#f64747)' },
+  warn:    { bg: 'var(--accent-bg,rgba(249,158,44,.1))', color: 'var(--accent,#f99e2c)', border: 'var(--accent-border,rgba(249,158,44,.25))', dot: 'var(--accent,#f99e2c)' },
+  blue:    { bg: 'var(--blue-bg,rgba(39,130,228,.1))', color: 'var(--blue,#2782e4)', border: 'var(--infd, rgba(39,130,228,.2))', dot: 'var(--blue,#2782e4)' },
+  dim:     { bg: 'var(--grey-1,#f5f5f8)', color: 'var(--grey-4,#797b8d)', border: 'var(--border,#d7d8e0)', dot: 'var(--grey-4,#797b8d)' },
+  purple:  { bg: 'rgba(139,92,246,.1)', color: '#8b5cf6', border: 'rgba(139,92,246,.2)', dot: '#8b5cf6' },
+  teal:    { bg: 'rgba(20,184,166,.1)', color: '#14b8a6', border: 'rgba(20,184,166,.2)', dot: '#14b8a6' },
+  pink:    { bg: 'rgba(236,72,153,.1)', color: '#ec4899', border: 'rgba(236,72,153,.2)', dot: '#ec4899' },
+  ghost:   { bg: 'transparent', color: 'var(--t2,var(--grey-4,#797b8d))', border: 'var(--bd,var(--border,#d7d8e0))', dot: 'var(--t3,var(--grey-4,#797b8d))' },
 };
 
 const SHAPES = {
   ok: 'circle', err: 'circle', warn: 'circle', blue: 'circle', dim: 'circle',
   purple: 'circle', teal: 'circle', pink: 'circle', ghost: 'circle',
-  paid: 'circle', invoiced: 'circle', verified: 'circle', partial: 'semicircle',
-  deleted: 'circle', update: 'triangle', ready: 'diamond', new: 'circle',
 };
 
-const KEYFRAMES = `@keyframes badge-pulse{0%,100%{opacity:1}50%{opacity:.4}}`;
+const KEYFRAMES = `@keyframes badge-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(0.85)}}`;
 let _id = 'cynx-badge-styles';
 
 function ensureStyles() {
@@ -41,28 +30,26 @@ function ensureStyles() {
 }
 
 const SIZE_MAP = {
-  xs: { padding: '1.5px 6px', fontSize: '9px' },
-  sm: { padding: '2px 7px', fontSize: '10px' },
-  md: { padding: '3px 9px', fontSize: '11px' },
-  lg: { padding: '4px 12px', fontSize: '12px' },
+  xs: { padding: '1.5px 6px', plainPadding: '1px 0', fontSize: '9.5px', dotSize: 5, iconSize: 11, gap: 4 },
+  sm: { padding: '2px 8px',   plainPadding: '2px 0', fontSize: '11px',  dotSize: 6, iconSize: 12, gap: 5 },
+  md: { padding: '3px 9px',   plainPadding: '2px 0', fontSize: '12px',  dotSize: 6.5, iconSize: 13, gap: 6 },
+  lg: { padding: '4px 12px',  plainPadding: '3px 0', fontSize: '13px',  dotSize: 8, iconSize: 15, gap: 7 },
 };
 
 const SHAPE_STYLE = {
-  circle:   (c) => ({ width: 7, height: 7, borderRadius: '50%', background: c, border: 'none' }),
-  triangle: (c) => ({ width: 0, height: 0, borderLeft: '4px solid transparent', borderRight: '4px solid transparent', borderBottom: `7px solid ${c}`, background: 'none', borderTop: 'none' }),
-  diamond:  (c) => ({ width: 7, height: 7, borderRadius: 1, transform: 'rotate(45deg)', background: c, border: 'none' }),
+  circle:    (c) => ({ width: 7, height: 7, borderRadius: '50%', background: c, border: 'none' }),
+  triangle:  (c) => ({ width: 0, height: 0, borderLeft: '4px solid transparent', borderRight: '4px solid transparent', borderBottom: `7px solid ${c}`, background: 'none', borderTop: 'none' }),
+  diamond:   (c) => ({ width: 7, height: 7, borderRadius: 1, transform: 'rotate(45deg)', background: c, border: 'none' }),
   semicircle:(c) => ({ width: 7, height: 7, borderRadius: '50%', border: 'none', borderTop: '2px solid var(--bg,#fff)', background: c }),
 };
 
 const COLOR_MAP = {
-  green: '#10b981', passed: '#10b981', ok: '#10b981', success: '#10b981', emerald: '#10b981',
-  yellow: '#f59e0b', violation: '#f97316', warn: '#f97316', warning: '#f97316', amber: '#f59e0b', orange: '#f97316', medium: '#f59e0b',
-  red: '#ef4444', failed: '#ef4444', err: '#ef4444', danger: '#ef4444', error: '#ef4444', high: '#ef4444', critical: '#ef4444',
-  blue: '#3b82f6', conditional: '#3b82f6', info: '#3b82f6', low: '#3b82f6', sky: '#0284c7',
-  purple: '#8b5cf6', violet: '#8b5cf6',
-  indigo: '#6366f1',
-  cyan: '#06b6d4',
-  teal: '#14b8a6',
+  green: '#10b981', ok: '#10b981', success: '#10b981', emerald: '#10b981',
+  yellow: '#f59e0b', warn: '#f97316', warning: '#f97316', amber: '#f59e0b', orange: '#f97316',
+  red: '#ef4444', err: '#ef4444', danger: '#ef4444', error: '#ef4444', critical: '#ef4444',
+  blue: '#3b82f6', info: '#3b82f6', sky: '#0284c7',
+  purple: '#8b5cf6', violet: '#8b5cf6', indigo: '#6366f1',
+  cyan: '#06b6d4', teal: '#14b8a6',
   pink: '#ec4899', rose: '#f43f5e',
   grey: '#6b7280', gray: '#6b7280', dim: '#6b7280',
 };
@@ -83,6 +70,11 @@ export default function Badge({
   dot = false,
   shape = null,
   icon = null,
+  iconPosition = 'left',
+  iconSize = null,
+  pulse = false,
+  plain = false,
+  minimal = false,
   onClick = null,
   style = {},
   className = '',
@@ -91,15 +83,59 @@ export default function Badge({
 
   const v = VARIANTS[variant] || VARIANTS.dim;
   const sz = SIZE_MAP[size] || SIZE_MAP.md;
+  const isPlain = plain || minimal;
   const shapeType = (shape === 'none' || shape === false) ? null : (shape || SHAPES[variant] || null);
 
-  const customHex = resolveBadgeColor(color);
-  const colorStyle = customHex ? {
-    color: customHex,
-    background: `${customHex}18`,
-    border: `1px solid ${customHex}33`,
-  } : {};
-  const dotColor = customHex || v.dot || v.color;
+  const customColor = resolveBadgeColor(color);
+  let colorStyle = {};
+
+  if (customColor) {
+    if (isPlain) {
+      colorStyle = { color: customColor, background: 'transparent', border: 'none' };
+    } else if (customColor.startsWith('#')) {
+      colorStyle = {
+        color: customColor,
+        background: `${customColor}18`,
+        border: `1px solid ${customColor}33`,
+      };
+    } else {
+      colorStyle = {
+        color: customColor,
+        background: `color-mix(in srgb, ${customColor} 12%, transparent)`,
+        border: `1px solid color-mix(in srgb, ${customColor} 25%, transparent)`,
+      };
+    }
+  } else if (isPlain) {
+    colorStyle = {
+      color: v.color,
+      background: 'transparent',
+      border: 'none',
+    };
+  }
+
+  const dotColor = customColor || v.dot || v.color;
+  const actualDotSize = sz.dotSize || 6;
+  const actualIconSize = iconSize || sz.iconSize || 13;
+
+  const renderIcon = () => {
+    if (!icon) return null;
+    return (
+      <span style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexShrink: 0,
+        color: dotColor,
+      }}>
+        {React.isValidElement(icon)
+          ? React.cloneElement(icon, {
+              size: icon.props?.size || actualIconSize,
+              color: icon.props?.color || dotColor,
+            })
+          : icon}
+      </span>
+    );
+  };
 
   return (
     <span
@@ -107,31 +143,32 @@ export default function Badge({
       style={{
         display: 'inline-flex',
         alignItems: 'center',
-        gap: 5,
-        padding: v.noPad ? '3px 0' : sz.padding,
-        borderRadius: 'var(--rfull,99px)',
+        gap: sz.gap || 5,
+        padding: isPlain ? sz.plainPadding : sz.padding,
+        borderRadius: isPlain ? 0 : 'var(--rfull,99px)',
         fontSize: sz.fontSize,
-        fontWeight: 600,
-        border: `1px solid ${v.border}`,
-        background: v.bg,
+        fontWeight: isPlain ? 500 : 600,
+        border: isPlain ? 'none' : `1px solid ${v.border}`,
+        background: isPlain ? 'transparent' : v.bg,
         color: v.color,
         whiteSpace: 'nowrap',
         transition: 'all .15s',
         cursor: onClick ? 'pointer' : undefined,
+        lineHeight: 1.2,
         ...colorStyle,
         ...style,
       }}
       onClick={onClick}
     >
+      {icon && iconPosition === 'left' && renderIcon()}
       {dot && (
         <span style={{
-          width: 6,
-          height: 6,
+          width: actualDotSize,
+          height: actualDotSize,
           borderRadius: '50%',
           flexShrink: 0,
-          marginTop: -2,
           background: dotColor,
-          animation: v.pulse ? 'badge-pulse 1.5s ease-in-out infinite' : undefined,
+          animation: pulse ? 'badge-pulse 1.5s ease-in-out infinite' : undefined,
         }} />
       )}
       {shapeType && !dot && (
@@ -142,20 +179,8 @@ export default function Badge({
           ...(SHAPE_STYLE[shapeType] ? SHAPE_STYLE[shapeType](dotColor) : {}),
         }} />
       )}
-      {icon && (
-        <span style={{
-          display: 'inline-flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          width: 14,
-          height: 14,
-          flexShrink: 0,
-          color: dotColor,
-        }}>
-          {icon}
-        </span>
-      )}
       {children}
+      {icon && iconPosition === 'right' && renderIcon()}
     </span>
   );
 }

package/components/Select.jsx

@@ -37,6 +37,7 @@ export default function Select({
   size = 'md',
   style = {},
   rounded = false,
+  showCount = false,
 }) {
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState('');
@@ -217,32 +218,42 @@ export default function Select({
       >
         <div style={{ flex: 1, minWidth: 0, display: 'flex', alignItems: 'center' }}>
           {multi && selectedValues.length > 0 ? (
-            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, flex: 1, minWidth: 0 }}>
-              {selectedValues.map(v => (
-                <span key={v} style={{
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  gap: 4,
-                  padding: '2px 6px',
-                  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, #f99e2c)',
-                  whiteSpace: 'nowrap',
-                  maxWidth: 140,
-                  opacity: 0.85,
-                }}>
-                  {getLabel(v)}
-                  <X
-                    size={11}
-                    style={{ cursor: 'pointer', flexShrink: 0, opacity: 0.5 }}
-                    onMouseDown={(e) => removeTag(e, v)}
-                  />
-                </span>
-              ))}
-            </div>
+            showCount ? (
+              <span style={{ fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', color: 'var(--t,var(--primary-text, #0f172a))' }}>
+                {typeof showCount === 'function'
+                  ? showCount(selectedValues.length)
+                  : selectedValues.length === 1
+                    ? getLabel(selectedValues[0])
+                    : `Выбрано: ${selectedValues.length}`}
+              </span>
+            ) : (
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, flex: 1, minWidth: 0 }}>
+                {selectedValues.map(v => (
+                  <span key={v} style={{
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: 4,
+                    padding: '2px 6px',
+                    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, #f99e2c)',
+                    whiteSpace: 'nowrap',
+                    maxWidth: 140,
+                    opacity: 0.85,
+                  }}>
+                    {getLabel(v)}
+                    <X
+                      size={11}
+                      style={{ cursor: 'pointer', flexShrink: 0, opacity: 0.5 }}
+                      onMouseDown={(e) => removeTag(e, v)}
+                    />
+                  </span>
+                ))}
+              </div>
+            )
           ) : !multi && selectedValues.length > 0 ? (
             <span style={{ fontWeight: 400, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
               {getLabel(selectedValues[0]) || '\u00A0'}
@@ -251,12 +262,12 @@ export default function Select({
             <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) ? (
+        {selectedValues.length > 0 && selectedValues[0] !== '' && selectedValues[0] !== null && (clearable || !!onClear) ? (
           <span
             onClick={(e) => {
               e.stopPropagation();
               if (onClear) onClear();
-              else onChange?.('');
+              else onChange?.(multi ? [] : '');
             }}
             title="Сбросить выбор"
             style={{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cynx-ui",
-  "version": "1.3.23",
+  "version": "1.3.25",
   "type": "module",
   "exports": {
     ".": "./index.js"