@redneckz/wildless-cms-uni-blocks 0.14.134 → 0.14.136

package/src/ui-kit/Input/Input.tsx

@@ -8,7 +8,6 @@ export const Input = JSX<InputProps>(
   ({
     key,
     className = '',
-    inputClassName = '',
     id,
     name,
     type = 'text',
@@ -22,6 +21,7 @@ export const Input = JSX<InputProps>(
     onBlur,
     pattern,
     autoFocus = false,
+    isTextarea = false,
   }) => {
     const inputRef = useRef<HTMLInputElement | null>(null);
     const handleChange = useCallback(
@@ -36,44 +36,58 @@ export const Input = JSX<InputProps>(
         inputRef.current?.focus();
       }
     }, [autoFocus, inputRef]);
-
+    const defaultStyle = 'w-full border rounded-md text-primary-text outline-none p-m';
     const paddingStyle = children ? 'pr-3xl' : '';
-    const validStyle = valid
-      ? 'border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text'
-      : 'border-error';
+    const validStyle = getValidStyle(valid);
 
     return (
       <div className={style('relative', className)}>
         <label>
-          {label ? (
-            <div className="mb-xs">
-              <Text size="text-m" font="font-light">
-                {label}
-              </Text>
-            </div>
-          ) : null}
-          <input
-            ref={inputRef}
-            key={key}
-            className={style(
-              'w-full h-14 border rounded-md text-primary-text outline-none p-m',
-              paddingStyle,
-              validStyle,
-              inputClassName,
-            )}
-            id={id}
-            name={name || id}
-            placeholder={placeholder}
-            type={type}
-            value={value}
-            onInput={handleChange as any}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            pattern={pattern}
-          />
+          {label ? renderLabel(label) : null}
+          {isTextarea ? (
+            <textarea
+              className={style('block resize-y min-h-24', defaultStyle, validStyle)}
+              key={key}
+              id={style('textarea', id)}
+              name={name || id}
+              placeholder={placeholder}
+              value={value}
+              onInput={handleChange as any}
+              onFocus={onFocus}
+              onBlur={onBlur}
+            />
+          ) : (
+            <input
+              type={type}
+              className={style('h-14', defaultStyle, paddingStyle, validStyle)}
+              ref={inputRef}
+              key={key}
+              id={id}
+              name={name || id}
+              placeholder={placeholder}
+              value={value}
+              onInput={handleChange as any}
+              onFocus={onFocus}
+              onBlur={onBlur}
+              pattern={pattern}
+            />
+          )}
         </label>
         {children}
       </div>
     );
   },
 );
+
+const renderLabel = (label: string) => (
+  <div className="mb-xs">
+    <Text size="text-m" font="font-light">
+      {label}
+    </Text>
+  </div>
+);
+
+const getValidStyle = (valid: boolean) =>
+  valid
+    ? 'border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text'
+    : 'border-error';

package/src/ui-kit/Input/InputProps.ts

@@ -4,7 +4,6 @@ import { type ControlProps } from '../ControlProps';
 
 export interface InputProps<V = string> extends ControlProps<V>, LabelProps {
   className?: string;
-  inputClassName?: string;
   id?: string;
   name?: string;
   type?: InputTypes;
@@ -15,4 +14,6 @@ export interface InputProps<V = string> extends ControlProps<V>, LabelProps {
   valid?: boolean;
   disabled?: boolean;
   autoFocus?: boolean;
+  isTextarea?: boolean;
+  error?: string;
 }