cynx-ui 1.2.28 → 1.2.30

package/components/ActionsMenu.jsx

@@ -75,7 +75,7 @@ export function ActionsMenu({ items, align = 'right' }) {
         type="button"
         onClick={toggle}
         style={{
-          width: 30, height: 30, borderRadius: 'var(--rads,8px)',
+          width: 32, height: 32, borderRadius: 'var(--rads,8px)',
           border: isOpen ? '1px solid var(--accent,#f99e2c)' : '1px solid var(--border-light,#d7d8e0)',
           background: 'var(--surface,#fff)',
           cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',

package/components/Button.jsx

@@ -80,21 +80,10 @@ const VARIANTS = {
 };
 
 const SIZES = {
-  xs: { padding: '4px 8px', fontSize: 12, height: 28 },
+  xs: { padding: '4px 8px', fontSize: 12, height: 32 },
   sm: { padding: '4px 8px', fontSize: 12, height: 32 },
-  md: { padding: '8px 16px', fontSize: 13, height: 38 },
-  lg: { padding: '10px 20px', fontSize: 14, height: 44 },
-};
-
-const ICON_STYLE = {
-  padding: 0,
-  width: 30,
-  height: 30,
-  borderRadius: 'var(--rads,8px)',
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  lineHeight: 0,
+  md: { padding: '8px 16px', fontSize: 13, height: 32 },
+  lg: { padding: '10px 20px', fontSize: 14, height: 32 },
 };
 
 export default function Button({
@@ -141,8 +130,8 @@ export default function Button({
         border: v.border,
         padding: isIconOnly ? 0 : s.padding,
         fontSize: s.fontSize,
-        height: isIconOnly ? 30 : s.height,
-        width: isIconOnly ? 30 : undefined,
+        height: s.height,
+        width: isIconOnly ? s.height : undefined,
         ...(v.paddingLeft !== undefined && { paddingLeft: v.paddingLeft }),
         ...(v.paddingRight !== undefined && { paddingRight: v.paddingRight }),
         ...(v.boxShadow !== undefined && { boxShadow: v.boxShadow }),

package/components/Input.jsx

@@ -1,10 +1,10 @@
 import { useRef, useState } from 'react';
 
 const SIZES = {
-  xs: { height: 30, fontSize: 11, paddingH: 8 },
+  xs: { height: 32, fontSize: 11, paddingH: 8 },
   sm: { height: 32, fontSize: 12, paddingH: 9 },
-  md: { height: 34, fontSize: 13, paddingH: 11 },
-  lg: { height: 40, fontSize: 14, paddingH: 14 },
+  md: { height: 32, fontSize: 13, paddingH: 11 },
+  lg: { height: 32, fontSize: 14, paddingH: 14 },
 };
 
 export default function Input({
@@ -17,6 +17,7 @@ export default function Input({
   iconRight,
   clearable = false,
   suffix,
+  multiline = false,
   onClear,
   className = '',
   style = {},
@@ -36,8 +37,8 @@ export default function Input({
 
   const hasIconLeft = !!icon;
   const hasIconRight = !!iconRight;
-  const showClear = clearable && !!value && !props.disabled;
-  const hasSuffix = !!suffix;
+  const showClear = clearable && !!value && !props.disabled && !multiline;
+  const hasSuffix = !!suffix && !multiline;
   const showRightSlot = showClear || hasSuffix;
 
   return (
@@ -95,6 +96,45 @@ export default function Input({
           </span>
         )}
 
+        {multiline ? (
+          <textarea
+            ref={inputRef}
+            className={className}
+            style={{
+              display: 'block',
+              width: '100%',
+              minHeight: 70,
+              resize: 'vertical',
+              whiteSpace: 'pre-wrap',
+              overflowWrap: 'break-word',
+              background: props.disabled ? 'var(--grey-1,#f5f5f8)' : 'var(--input-bg,#fff)',
+              border: `1px solid ${error ? 'var(--danger,#f64747)' : focused ? 'var(--accent,#f99e2c)' : hovered ? 'var(--accent,#f99e2c)' : 'var(--bd,#d7d8e0)'}`,
+              borderRadius: 'var(--rads,8px)',
+              color: 'var(--t1,#1a1a2e)',
+              fontFamily: 'var(--f,var(--sans,inherit))',
+              fontSize: s.fontSize,
+              padding: 0,
+              paddingTop: 8,
+              paddingBottom: 8,
+              paddingLeft: hasIconLeft ? 34 : 12,
+              paddingRight: (hasIconRight || showRightSlot) ? 34 : 12,
+              outline: 'none',
+              transition: 'border-color .14s, box-shadow .14s',
+              boxShadow: error
+                ? 'var(--dd, rgba(246,71,71,.12)), var(--shadow,0 1px 3px rgba(20,22,41,.1))'
+                : focused
+                ? 'var(--pd, rgba(249,158,44,.12)), var(--shadow,0 1px 3px rgba(20,22,41,.1))'
+                : 'var(--shadow,0 1px 3px rgba(20,22,41,.1))',
+              opacity: props.disabled ? 0.5 : 1,
+              cursor: props.disabled ? 'not-allowed' : undefined,
+              ...style,
+            }}
+            value={value}
+            {...props}
+            onFocus={e => { setFocused(true); props.onFocus?.(e); }}
+            onBlur={e => { setFocused(false); setHovered(false); props.onBlur?.(e); }}
+          />
+        ) : (
         <input
           ref={inputRef}
           className={className}
@@ -129,6 +169,7 @@ export default function Input({
           // onMouseEnter={() => setHovered(true)}
           // onMouseLeave={() => setHovered(false)}
         />
+        )}
 
         {showClear && (
           <button

package/components/MultiSelect.jsx

@@ -128,7 +128,7 @@ export default function MultiSelect({ value = [], onChange, options = [], placeh
     <div ref={btnRef} style={{ position: 'relative' }}>
       <button type="button" onClick={toggleOpen} style={{
         display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 6,
-        width: '100%', padding: '6px 10px', minHeight: 34,
+        width: '100%', padding: '6px 10px', minHeight: 32,
         border: `1px solid ${open ? 'var(--accent)' : 'var(--border)'}`,
         borderRadius: 'var(--rads)',
         background: 'var(--surface)',

package/components/Select.jsx

@@ -128,7 +128,7 @@ export default function Select({
           justifyContent: 'space-between',
           gap: 8,
           padding: '8px 11px',
-          height: 35,
+          height: 32,
           background: 'var(--sf,var(--surface))',
           border: `1.5px solid ${open ? 'var(--accent)' : 'var(--bd2,var(--border))'}`,
           borderRadius: 'var(--rmd,var(--rads))',
@@ -219,7 +219,7 @@ export default function Select({
                 style={{
                   width: '100%',
                   padding: '7px 10px',
-                  height: 35,
+                  height: 32,
                   background: 'var(--sf2,var(--grey-1))',
                   border: '1.5px solid var(--bd2,var(--border))',
                   borderRadius: 'var(--rmd,var(--rads))',

package/components/TabBar.jsx

@@ -69,7 +69,8 @@ export default function TabBar({ tabs, active, onChange, capitalize = false, pad
               onClick={() => onChange(t.id)}
               style={{
                 display: 'flex', alignItems: 'center', gap: 5,
-                padding: padding || '5px 12px',
+                height: 24,
+                padding: padding || '0 12px',
                 border: 'none',
                 borderRadius: 'var(--radxs, 6px)',
                 background: isActive ? 'var(--surface,#fff)' : 'transparent',

package/package.json

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