cynx-ui 1.3.6 → 1.3.8

package/components/Select.jsx

@@ -24,7 +24,9 @@ export default function Select({
   searchable = false,
   clearable = false,
   onClear,
+  size = 'md',
   style = {},
+  rounded = false,
 }) {
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState('');
@@ -116,14 +118,26 @@ export default function Select({
 
   const selectedValues = multi ? (Array.isArray(value) ? value : []) : (value !== undefined && value !== null ? [value] : []);
 
+  const heightVal = size === 'xs' ? 24 : size === 'sm' ? 28 : 32;
+  const paddingVal = size === 'xs' ? '0 6px' : size === 'sm' ? '0 8px' : '0 10px';
+  const fontSizeVal = size === 'xs' ? '11px' : size === 'sm' ? '11.5px' : '13px';
+
+  let radiusVal = rounded
+    ? (typeof rounded === 'string'
+        ? (rounded.endsWith('px') || rounded.endsWith('rem') || rounded.startsWith('var') ? rounded : `${rounded}px`)
+        : typeof rounded === 'number'
+          ? `${rounded}px`
+          : '6px')
+    : (size === 'xs' ? '4px' : size === 'sm' ? '6px' : 'var(--rmd,var(--rads))');
+
   return (
     <div
       ref={wrapRef}
       style={{
         position: 'relative',
         width: '100%',
+        boxSizing: 'border-box',
         fontFamily: 'var(--f,var(--sans))',
-        fontSize: 'var(--fsz,13px)',
         opacity: disabled ? 0.5 : 1,
         pointerEvents: disabled ? 'none' : undefined,
         ...style,
@@ -133,19 +147,20 @@ export default function Select({
         onClick={handleOpen}
         style={{
           width: '100%',
+          boxSizing: 'border-box',
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'space-between',
-          gap: 8,
-          padding: '8px 11px',
-          height: 32,
+          gap: 4,
+          padding: paddingVal,
+          height: heightVal,
           background: 'var(--sf,var(--surface))',
-          border: `1.5px solid ${open ? 'var(--accent)' : 'var(--bd2,var(--border))'}`,
-          borderRadius: 'var(--rmd,var(--rads))',
+          border: `1px solid ${open ? 'var(--accent)' : 'var(--bd2,var(--border))'}`,
+          borderRadius: radiusVal,
           cursor: 'pointer',
           fontFamily: 'var(--f,var(--sans,inherit))',
-          fontSize: '12.5px',
-          lineHeight: 1,
+          fontSize: fontSizeVal,
+          lineHeight: 1.2,
           color: 'var(--t,var(--primary-text))',
           outline: 'none',
           transition: 'border-color var(--tr,.15s), box-shadow var(--tr,.15s)',
@@ -182,7 +197,7 @@ export default function Select({
             </div>
           ) : !multi && selectedValues.length > 0 ? (
             <span style={{ fontWeight: 400, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-              {getLabel(selectedValues[0])}
+              {getLabel(selectedValues[0]) || '\u00A0'}
             </span>
           ) : (
             <span style={{ color: 'var(--t3,var(--grey-3))', fontWeight: 400 }}>{placeholder}</span>
@@ -209,11 +224,11 @@ export default function Select({
             onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--danger, #ef4444)'; }}
             onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--muted, #64748b)'; }}
           >
-            <X size={13} />
+            <X size={12} />
           </span>
         ) : (
           <ChevronDown
-            size={13}
+            size={12}
             style={{
               flexShrink: 0,
               color: 'var(--t3,var(--grey-3))',
@@ -233,33 +248,35 @@ export default function Select({
             top: pos.top,
             left: pos.left,
             width: pos.width,
+            boxSizing: 'border-box',
             background: 'var(--sf,var(--surface))',
             border: '1px solid var(--bd,var(--border))',
-            borderRadius: 'var(--rmd,var(--rads))',
+            borderRadius: radiusVal,
             boxShadow: 'var(--shadow,0 1px 3px rgba(20,22,41,.1))',
-            padding: 4,
+            padding: 3,
             animation: 'selFadeIn .15s ease',
             overflow: 'hidden',
           }}
         >
           {searchable && (
-            <div style={{ padding: 4 }}>
+            <div style={{ padding: 3 }}>
               <input
                 ref={inputRef}
                 type="text"
-                placeholder="Search..."
+                placeholder="Поиск..."
                 value={query}
                 onChange={e => setQuery(e.target.value)}
                 onMouseDown={e => e.stopPropagation()}
                 style={{
                   width: '100%',
-                  padding: '7px 10px',
-                  height: 32,
+                  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: 'var(--rmd,var(--rads))',
+                  borderRadius: size === 'xs' ? '3px' : size === 'sm' ? '4px' : 'var(--rmd,var(--rads))',
                   fontFamily: 'var(--f,var(--sans))',
-                  fontSize: '12.5px',
+                  fontSize: size === 'xs' ? '10.5px' : size === 'sm' ? '11.5px' : '12.5px',
                   lineHeight: 1,
                   color: 'var(--t,var(--primary-text))',
                   outline: 'none',
@@ -270,8 +287,8 @@ export default function Select({
           )}
           <div style={{ maxHeight: 200, overflowY: 'auto' }}>
             {filtered.length === 0 ? (
-              <div style={{ padding: '14px 10px', textAlign: 'center', color: 'var(--t3,var(--grey-3))', fontSize: 11 }}>
-                No options found
+              <div style={{ padding: '10px 8px', textAlign: 'center', color: 'var(--t3,var(--grey-3))', fontSize: 11 }}>
+                Ничего не найдено
               </div>
             ) : (
               filtered.map(opt => (
@@ -281,13 +298,14 @@ export default function Select({
                   style={{
                     display: 'flex',
                     alignItems: 'center',
-                    gap: 8,
-                    padding: '8px 10px',
-                    borderRadius: 'var(--rmd,var(--rads))',
+                    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))',
                     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',
+                    fontSize: size === 'xs' ? '10.5px' : size === 'sm' ? '11.5px' : '12.5px',
                     fontWeight: 400,
                     transition: 'background .1s',
                     userSelect: 'none',
@@ -297,8 +315,8 @@ export default function Select({
                 >
                   {multi && (
                     <span style={{
-                      width: 15,
-                      height: 15,
+                      width: 13,
+                      height: 13,
                       border: `1.5px solid ${isSelected(opt.value) ? 'var(--accent)' : 'var(--bd2,var(--border))'}`,
                       borderRadius: 3,
                       flexShrink: 0,
@@ -311,8 +329,8 @@ export default function Select({
                           position: 'absolute',
                           top: 1,
                           left: 3.5,
-                          width: 4.5,
-                          height: 7,
+                          width: 4,
+                          height: 6,
                           border: 'solid var(--def-btn-text,#fff)',
                           borderWidth: '0 1.5px 1.5px 0',
                           transform: 'rotate(45deg)',
@@ -320,11 +338,11 @@ export default function Select({
                       )}
                     </span>
                   )}
-                  <span style={{ flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-                    {opt.displayLabel || opt.label}
+                  <span style={{ flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', minHeight: '1em' }}>
+                    {opt.displayLabel || opt.label || '\u00A0'}
                   </span>
                   {!multi && isSelected(opt.value) && (
-                    <Check size={13} style={{ flexShrink: 0, color: 'var(--accent)' }} />
+                    <Check size={12} style={{ flexShrink: 0, color: 'var(--accent)' }} />
                   )}
                 </div>
               ))

package/components/TabBar.jsx

@@ -1,4 +1,4 @@
-import { useRef, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
 
 const STYLES = `
 @keyframes cx-tabSlide {
@@ -19,10 +19,64 @@ function ensureStyles() {
 
 if (typeof document !== 'undefined') ensureStyles();
 
+function ChevronIcon({ isOpen }) {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2.2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      style={{
+        transition: 'transform 0.18s cubic-bezier(0.4, 0, 0.2, 1)',
+        transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+        opacity: 0.75,
+        marginLeft: 2,
+        flexShrink: 0,
+      }}
+    >
+      <polyline points="6 9 12 15 18 9" />
+    </svg>
+  );
+}
+
+function CheckIcon() {
+  return (
+    <svg
+      width="13"
+      height="13"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="var(--accent, #3b82f6)"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      style={{ flexShrink: 0 }}
+    >
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  );
+}
+
 export default function TabBar({ tabs, active, onChange, capitalize = false, padding, variant = 'underline' }) {
   const barRef   = useRef(null);
   const indRef   = useRef(null);
   const initDone = useRef(false);
+  const [openDropdownId, setOpenDropdownId] = useState(null);
+
+  // Click outside to close dropdowns
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (barRef.current && !barRef.current.contains(e.target)) {
+        setOpenDropdownId(null);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
 
   // Underline indicator positioning
   useEffect(() => {
@@ -31,7 +85,7 @@ export default function TabBar({ tabs, active, onChange, capitalize = false, pad
     const ind = indRef.current;
     if (!bar || !ind) return;
 
-    const activeBtn = bar.querySelector(`[data-tabid="${active}"]`);
+    const activeBtn = bar.querySelector(`[data-tabid="${active}"]`) || bar.querySelector(`[data-active="true"]`);
     if (!activeBtn) return;
 
     const barRect = bar.getBoundingClientRect();
@@ -53,49 +107,143 @@ export default function TabBar({ tabs, active, onChange, capitalize = false, pad
 
   if (variant === 'pill') {
     return (
-      <div style={{
-        display: 'inline-flex', gap: 3,
-        background: 'var(--grey-1, #f5f5f8)',
-        borderRadius: 'var(--radxs, 6px)',
-        padding: '3px',
-        border: '1px solid var(--border-light, #ebebf0)',
-      }}>
+      <div
+        ref={barRef}
+        style={{
+          display: 'inline-flex',
+          gap: 4,
+          background: 'var(--grey-1, #f5f5f8)',
+          borderRadius: 'var(--radxs, 6px)',
+          padding: '3px',
+          border: '1px solid var(--border-light, #ebebf0)',
+          position: 'relative',
+          alignItems: 'center',
+          flexWrap: 'wrap',
+        }}
+      >
         {tabs.map(t => {
-          const isActive = active === t.id;
+          const hasItems = Array.isArray(t.items) && t.items.length > 0;
+          const activeSubItem = hasItems ? t.items.find(item => item.id === active) : null;
+          const isActive = active === t.id || !!activeSubItem;
+          const isOpen = openDropdownId === t.id;
+
+          const handleTabClick = () => {
+            if (hasItems) {
+              setOpenDropdownId(isOpen ? null : t.id);
+            } else {
+              setOpenDropdownId(null);
+              onChange(t.id);
+            }
+          };
+
           return (
-            <button
-              key={t.id}
-              data-tabid={t.id}
-              onClick={() => onChange(t.id)}
-              style={{
-                display: 'flex', alignItems: 'center', gap: 5,
-                height: 24,
-                padding: padding || '0 12px',
-                border: 'none',
-                borderRadius: 'var(--radxs, 6px)',
-                background: isActive ? 'var(--surface,#fff)' : 'transparent',
-                boxShadow: isActive ? 'var(--shadow, 0 1px 2px rgba(0,0,0,.06))' : 'none',
-                fontSize: '.75rem', fontWeight: isActive ? 600 : 500,
-                color: isActive ? 'var(--primary-text, #0f111c)' : 'var(--muted, #9b9daa)',
-                cursor: 'pointer',
-                transition: 'all .18s ease',
-                fontFamily: 'inherit',
-                whiteSpace: 'nowrap',
-                textTransform: capitalize ? 'capitalize' : 'none',
-              }}
-            >
-              {t.icon}{t.label}
-              {t.count != null && t.count > 0 && (
-                <span style={{
-                  background: isActive ? 'var(--accent-bg)' : 'var(--grey-2, #d7d8e0)',
-                  color:      isActive ? 'var(--accent)'    : 'var(--muted)',
-                  borderRadius: 10,
-                  padding: '1px 6px',
-                  fontSize: '.68rem',
-                  fontWeight: 600,
-                }}>{t.count}</span>
+            <div key={t.id} style={{ position: 'relative' }}>
+              <button
+                type="button"
+                data-tabid={t.id}
+                data-active={isActive}
+                onClick={handleTabClick}
+                style={{
+                  display: 'flex', alignItems: 'center', gap: 5,
+                  height: 26,
+                  padding: padding || '0 10px',
+                  border: 'none',
+                  borderRadius: 'var(--radxs, 6px)',
+                  background: isActive ? 'var(--surface,#fff)' : isOpen ? 'var(--grey-2, #e5e7eb)' : 'transparent',
+                  boxShadow: isActive ? 'var(--shadow, 0 1px 3px rgba(0,0,0,.08))' : 'none',
+                  fontSize: '.75rem', fontWeight: isActive ? 600 : 500,
+                  color: isActive ? 'var(--primary-text, #0f111c)' : 'var(--muted, #9b9daa)',
+                  cursor: 'pointer',
+                  transition: 'all .18s ease',
+                  fontFamily: 'inherit',
+                  whiteSpace: 'nowrap',
+                  textTransform: capitalize ? 'capitalize' : 'none',
+                }}
+              >
+                {t.icon}{t.label}
+                {activeSubItem && (
+                  <span style={{
+                    fontSize: '.68rem',
+                    fontWeight: 600,
+                    color: 'var(--accent, #3b82f6)',
+                    background: 'var(--accent-bg, rgba(59,130,246,0.12))',
+                    padding: '1px 6px',
+                    borderRadius: 4,
+                    marginLeft: 2,
+                  }}>
+                    {activeSubItem.label}
+                  </span>
+                )}
+                {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)',
+                    borderRadius: 10,
+                    padding: '1px 6px',
+                    fontSize: '.68rem',
+                    fontWeight: 600,
+                  }}>{t.count}</span>
+                )}
+              </button>
+
+              {/* Dropdown Menu for Pill Tab */}
+              {isOpen && hasItems && (
+                <div style={{
+                  position: 'absolute',
+                  top: 'calc(100% + 4px)',
+                  left: 0,
+                  zIndex: 9999,
+                  minWidth: 185,
+                  background: 'var(--surface, #fff)',
+                  border: '1px solid var(--border-light, #ebebf0)',
+                  borderRadius: 'var(--radxs, 6px)',
+                  boxShadow: '0 8px 24px rgba(0,0,0,0.12)',
+                  padding: '4px',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: 2,
+                }}>
+                  {t.items.map(subItem => {
+                    const isSubSelected = active === subItem.id;
+                    return (
+                      <button
+                        key={subItem.id}
+                        type="button"
+                        onClick={() => {
+                          onChange(subItem.id);
+                          setOpenDropdownId(null);
+                        }}
+                        style={{
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'space-between',
+                          padding: '6px 10px',
+                          fontSize: '.75rem',
+                          fontWeight: isSubSelected ? 600 : 400,
+                          color: isSubSelected ? 'var(--accent, #3b82f6)' : 'var(--primary-text, #0f111c)',
+                          background: isSubSelected ? 'var(--accent-bg, rgba(59,130,246,0.08))' : 'transparent',
+                          borderRadius: 4,
+                          border: 'none',
+                          cursor: 'pointer',
+                          textAlign: 'left',
+                          transition: 'background .15s',
+                        }}
+                        onMouseEnter={(e) => {
+                          if (!isSubSelected) e.currentTarget.style.background = 'var(--grey-1, #f5f5f8)';
+                        }}
+                        onMouseLeave={(e) => {
+                          if (!isSubSelected) e.currentTarget.style.background = 'transparent';
+                        }}
+                      >
+                        <span>{subItem.label}</span>
+                        {isSubSelected && <CheckIcon />}
+                      </button>
+                    );
+                  })}
+                </div>
               )}
-            </button>
+            </div>
           );
         })}
       </div>
@@ -106,7 +254,7 @@ export default function TabBar({ tabs, active, onChange, capitalize = false, pad
   const defaultPadding = padding || '10px 16px';
 
   return (
-    <div ref={barRef} style={{ display:'flex', position:'relative' }}>
+    <div ref={barRef} style={{ display:'flex', position:'relative', alignItems: 'center' }}>
       <div ref={indRef} style={{
         position:'absolute', bottom:'-1px', left:0,
         height:2, width:0,
@@ -117,39 +265,125 @@ export default function TabBar({ tabs, active, onChange, capitalize = false, pad
       }} />
 
       {tabs.map(t => {
-        const isActive = active === t.id;
+        const hasItems = Array.isArray(t.items) && t.items.length > 0;
+        const activeSubItem = hasItems ? t.items.find(item => item.id === active) : null;
+        const isActive = active === t.id || !!activeSubItem;
+        const isOpen = openDropdownId === t.id;
+
+        const handleTabClick = () => {
+          if (hasItems) {
+            setOpenDropdownId(isOpen ? null : t.id);
+          } else {
+            setOpenDropdownId(null);
+            onChange(t.id);
+          }
+        };
+
         return (
-          <button
-            key={t.id}
-            data-tabid={t.id}
-            onClick={() => onChange(t.id)}
-            style={{
-              display:'flex', alignItems:'center', gap:6,
-              padding: defaultPadding,
-              border:'none', background:'none',
-              fontSize:'.82rem', fontWeight:500,
-              color: isActive ? 'var(--accent)' : 'var(--muted)',
-              cursor:'pointer',
-              transition:'color .18s',
-              marginBottom:'-1px',
-              position:'relative', zIndex:1,
-              fontFamily:'inherit',
-              whiteSpace:'nowrap',
-              textTransform: capitalize ? 'capitalize' : 'none',
-            }}
-          >
-            {t.icon}{t.label}
-            {t.count != null && t.count > 0 && (
-              <span style={{
-                background: isActive ? 'var(--accent-bg)' : 'var(--grey-1)',
-                color:      isActive ? 'var(--accent)'    : 'var(--muted)',
-                borderRadius: 10,
-                padding: '1px 6px',
-                fontSize: '.68rem',
-                transition: 'background .18s, color .18s',
-              }}>{t.count}</span>
+          <div key={t.id} style={{ position: 'relative' }}>
+            <button
+              type="button"
+              data-tabid={t.id}
+              data-active={isActive}
+              onClick={handleTabClick}
+              style={{
+                display:'flex', alignItems:'center', gap:6,
+                padding: defaultPadding,
+                border:'none', background:'none',
+                fontSize:'.82rem', fontWeight:500,
+                color: isActive ? 'var(--accent)' : 'var(--muted)',
+                cursor:'pointer',
+                transition:'color .18s',
+                marginBottom:'-1px',
+                position:'relative', zIndex:1,
+                fontFamily:'inherit',
+                whiteSpace:'nowrap',
+                textTransform: capitalize ? 'capitalize' : 'none',
+              }}
+            >
+              {t.icon}{t.label}
+              {activeSubItem && (
+                <span style={{
+                  fontSize: '.68rem',
+                  fontWeight: 600,
+                  color: 'var(--accent, #3b82f6)',
+                  background: 'var(--accent-bg, rgba(59,130,246,0.12))',
+                  padding: '1px 6px',
+                  borderRadius: 4,
+                }}>
+                  {activeSubItem.label}
+                </span>
+              )}
+              {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)',
+                  borderRadius: 10,
+                  padding: '1px 6px',
+                  fontSize: '.68rem',
+                  transition: 'background .18s, color .18s',
+                }}>{t.count}</span>
+              )}
+            </button>
+
+            {/* Dropdown Menu for Underline Tab */}
+            {isOpen && hasItems && (
+              <div style={{
+                position: 'absolute',
+                top: 'calc(100% + 2px)',
+                left: 0,
+                zIndex: 9999,
+                minWidth: 190,
+                background: 'var(--surface, #fff)',
+                border: '1px solid var(--border-light, #ebebf0)',
+                borderRadius: 'var(--radxs, 6px)',
+                boxShadow: '0 6px 20px rgba(0,0,0,0.12)',
+                padding: '4px',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 2,
+              }}>
+                {t.items.map(subItem => {
+                  const isSubSelected = active === subItem.id;
+                  return (
+                    <button
+                      key={subItem.id}
+                      type="button"
+                      onClick={() => {
+                        onChange(subItem.id);
+                        setOpenDropdownId(null);
+                      }}
+                      style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        justify: 'space-between',
+                        padding: '6px 10px',
+                        fontSize: '.78rem',
+                        fontWeight: isSubSelected ? 600 : 400,
+                        color: isSubSelected ? 'var(--accent, #3b82f6)' : 'var(--primary-text, #0f111c)',
+                        background: isSubSelected ? 'var(--accent-bg, rgba(59,130,246,0.08))' : 'transparent',
+                        borderRadius: 4,
+                        border: 'none',
+                        cursor: 'pointer',
+                        textAlign: 'left',
+                        transition: 'background .15s',
+                      }}
+                      onMouseEnter={(e) => {
+                        if (!isSubSelected) e.currentTarget.style.background = 'var(--grey-1, #f5f5f8)';
+                      }}
+                      onMouseLeave={(e) => {
+                        if (!isSubSelected) e.currentTarget.style.background = 'transparent';
+                      }}
+                    >
+                      <span>{subItem.label}</span>
+                      {isSubSelected && <CheckIcon />}
+                    </button>
+                  );
+                })}
+              </div>
             )}
-          </button>
+          </div>
         );
       })}
     </div>