cynx-lib 1.3.32 → 1.3.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cynx-lib",
-  "version": "1.3.32",
+  "version": "1.3.34",
   "type": "module",
   "main": "./index.js",
   "exports": {

package/ui/components/Input.jsx

@@ -13,6 +13,7 @@ export default function Input({
   hint,
   error,
   size = 'md',
+  type = 'text',
   icon,
   iconRight,
   clearable = false,
@@ -29,6 +30,18 @@ export default function Input({
   const [hovered, setHovered] = useState(false);
   const s = SIZES[size] || SIZES.md;
 
+  const isPasswd = type === 'passwd';
+  const resolvedType = isPasswd ? 'text' : type;
+  const hasValue = value !== undefined && value !== null && value !== '';
+
+  const passwdStyle = isPasswd ? {
+    WebkitTextSecurity: 'disc',
+    textSecurity: 'disc',
+    fontFamily: hasValue ? 'monospace' : 'var(--f,var(--sans,inherit))',
+    fontWeight: hasValue ? 700 : 'normal',
+    letterSpacing: hasValue ? '0.15em' : 'normal',
+  } : {};
+
   function handleClear() {
     if (props.onChange) props.onChange({ target: { value: '' } });
     if (onClear) onClear();
@@ -137,6 +150,7 @@ export default function Input({
         ) : (
         <input
           ref={inputRef}
+          type={resolvedType}
           className={className}
           style={{
             display: 'block',
@@ -160,6 +174,7 @@ export default function Input({
               : 'var(--shadow,0 1px 3px rgba(20,22,41,.1))',
             opacity: props.disabled ? 0.5 : 1,
             cursor: props.disabled ? 'not-allowed' : undefined,
+            ...passwdStyle,
             ...style,
           }}
           value={value}

package/ui/components/Select.jsx

@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect, useLayoutEffect, useMemo, useCallback } from 'react';
 import { createPortal } from 'react-dom';
-import { ChevronDown, Check, X } from 'lucide-react';
+import { ChevronDown, Check, X, Plus } from 'lucide-react';
 
 const SIZES = {
   xs: { height: 24, fontSize: 11, paddingH: 6, searchHeight: 22, searchFont: 10.5, itemMinHeight: 18, itemPadding: '3px 5px' },
@@ -40,6 +40,8 @@ export default function Select({
   showCount = false,
   searchMode = 'includes',
   filterOption,
+  creatable = false,
+  createLabel,
 }) {
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState('');
@@ -63,7 +65,8 @@ export default function Select({
     
     // Dynamic max-height for inner list to prevent overflow
     const availableSpace = openUp ? spaceAbove - 16 : spaceBelow - 16;
-    const calculatedMaxHeight = Math.max(90, Math.min(220, availableSpace - (searchable ? 46 : 14)));
+    const isSearchActive = searchable || creatable;
+    const calculatedMaxHeight = Math.max(90, Math.min(220, availableSpace - (isSearchActive ? 46 : 14)));
 
     let top;
     if (openUp) {
@@ -112,8 +115,8 @@ export default function Select({
   }, [open, calcPosition]);
 
   useEffect(() => {
-    if (open && searchable && inputRef.current) inputRef.current.focus();
-  }, [open, searchable]);
+    if (open && (searchable || creatable) && inputRef.current) inputRef.current.focus();
+  }, [open, searchable, creatable]);
 
   useEffect(() => {
     if (!open) setQuery('');
@@ -338,14 +341,33 @@ export default function Select({
             overflow: 'hidden',
           }}
         >
-          {searchable && (
+          {(searchable || creatable) && (
             <div style={{ padding: 3 }}>
               <input
                 ref={inputRef}
                 type="text"
-                placeholder="Поиск..."
+                placeholder={creatable ? 'Поиск или ввод текста...' : 'Поиск...'}
                 value={query}
                 onChange={e => setQuery(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    const trimmed = query.trim();
+                    if (!trimmed) return;
+                    const exact = filtered.find(o => String(o.label || o.value || '').toLowerCase() === trimmed.toLowerCase());
+                    if (exact && !exact.disabled) {
+                      toggleOption(exact.value);
+                      setQuery('');
+                    } else if (creatable) {
+                      toggleOption(trimmed);
+                      setQuery('');
+                    } else if (filtered.length > 0 && !filtered[0].disabled) {
+                      toggleOption(filtered[0].value);
+                      setQuery('');
+                    }
+                  }
+                }}
                 onMouseDown={e => e.stopPropagation()}
                 style={{
                   width: '100%',
@@ -366,7 +388,37 @@ export default function Select({
             </div>
           )}
           <div style={{ maxHeight: pos.maxHeight || 200, overflowY: 'auto' }}>
-            {filtered.length === 0 ? (
+            {creatable && query.trim() && !options.some(o => String(o.label || o.value || '').toLowerCase() === query.trim().toLowerCase()) && (
+              <div
+                onMouseDown={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  toggleOption(query.trim());
+                  setQuery('');
+                }}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 6,
+                  minHeight: s.itemMinHeight,
+                  padding: s.itemPadding,
+                  borderRadius: s.height <= 26 ? '3px' : s.height <= 28 ? '4px' : 'var(--rmd,var(--rads, 8px))',
+                  cursor: 'pointer',
+                  color: 'var(--accent, #f99e2c)',
+                  background: 'var(--pd,var(--accent-bg, rgba(249,158,44,.08)))',
+                  fontSize: `${s.searchFont}px`,
+                  fontWeight: 600,
+                  marginBottom: filtered.length > 0 ? 3 : 0,
+                  userSelect: 'none',
+                }}
+              >
+                <Plus size={12} style={{ flexShrink: 0 }} />
+                <span style={{ flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                  {typeof createLabel === 'function' ? createLabel(query.trim()) : `Ввести: "${query.trim()}"`}
+                </span>
+              </div>
+            )}
+            {filtered.length === 0 && (!creatable || !query.trim()) ? (
               <div style={{ padding: '10px 8px', textAlign: 'center', color: 'var(--t3,var(--grey-3, #cbd5e1))', fontSize: 11 }}>
                 Ничего не найдено
               </div>
@@ -374,6 +426,8 @@ export default function Select({
               filtered.map(opt => (
                 <div
                   key={opt.value}
+                  onMouseEnter={e => { if (!opt.disabled) e.currentTarget.style.background = 'var(--grey-1, #f5f5f8)'; }}
+                  onMouseLeave={e => { if (!opt.disabled) e.currentTarget.style.background = 'transparent'; }}
                   onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); if (!opt.disabled) toggleOption(opt.value); }}
                   style={{
                     display: 'flex',
@@ -384,7 +438,7 @@ export default function Select({
                     borderRadius: s.height <= 26 ? '3px' : s.height <= 28 ? '4px' : 'var(--rmd,var(--rads, 8px))',
                     cursor: opt.disabled ? 'not-allowed' : 'pointer',
                     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,
+                    // background: isSelected(opt.value) ? 'var(--pd,var(--accent-bg, rgba(249,158,44,.1)))' : undefined,
                     fontSize: `${s.searchFont}px`,
                     fontWeight: 400,
                     transition: 'background .1s',
@@ -393,36 +447,11 @@ export default function Select({
                     pointerEvents: opt.disabled ? 'none' : undefined,
                   }}
                 >
-                  {multi && (
-                    <span style={{
-                      width: 13,
-                      height: 13,
-                      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, #f99e2c)' : undefined,
-                    }}>
-                      {isSelected(opt.value) && (
-                        <span style={{
-                          position: 'absolute',
-                          top: 1,
-                          left: 3.5,
-                          width: 4,
-                          height: 6,
-                          border: 'solid var(--def-btn-text,#fff)',
-                          borderWidth: '0 1.5px 1.5px 0',
-                          transform: 'rotate(45deg)',
-                        }} />
-                      )}
-                    </span>
-                  )}
                   <span style={{ flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', minHeight: '1em' }}>
                     {opt.displayLabel || opt.label || '\u00A0'}
                   </span>
-                  {!multi && isSelected(opt.value) && (
-                    <Check size={12} style={{ flexShrink: 0, color: 'var(--accent, #f99e2c)' }} />
+                  {isSelected(opt.value) && (
+                    <Check size={13} style={{ flexShrink: 0, color: 'var(--accent, #f99e2c)' }} />
                   )}
                 </div>
               ))