@rovula/ui 0.1.1 → 0.1.2

package/src/components/TextInput/TextInput.tsx

@@ -1,5 +1,4 @@
 import React, {
-  FC,
   ReactNode,
   forwardRef,
   useCallback,
@@ -9,18 +8,18 @@ import React, {
 } from "react";
 import {
   helperTextVariant,
-  iconSearchWrapperVariant,
-  iconVariant,
-  iconWrapperVariant,
+  iconActionVariant,
+  inlineEndIconWrapperVariant,
+  inlineStartIconWrapperVariant,
   inputVariant,
   labelVariant,
-  sectionIconWrapperVariant,
+  segmentedIconWrapperVariant,
 } from "./TextInput.styles";
 import {
-  XCircleIcon,
-  ExclamationCircleIcon,
-  MagnifyingGlassIcon,
-} from "@heroicons/react/16/solid";
+  CircleAlert,
+  CircleX,
+  Search,
+} from "lucide-react";
 import { cn } from "@/utils/cn";
 
 export type InputProps = {
@@ -39,6 +38,7 @@ export type InputProps = {
   required?: boolean;
   isFloatingLabel?: boolean;
   keepCloseIconOnValue?: boolean;
+  keepFooterSpace?: boolean;
   hasClearIcon?: boolean;
   hasSearchIcon?: boolean;
   startIcon?: ReactNode;
@@ -76,6 +76,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       required = true,
       isFloatingLabel = true,
       keepCloseIconOnValue = false,
+      keepFooterSpace = true,
       hasClearIcon = true,
       hasSearchIcon = false,
       startIcon,
@@ -118,20 +119,26 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       hasLeftSectionIcon: iconMode === "solid" ? hasLeftSectionIcon : false,
       isFloatingLabel,
     });
-    const helperTextClassname = helperTextVariant({ size, error, disabled });
-    const iconWrapperClassname = iconWrapperVariant({ size });
-    const iconSearchWrapperClassname = iconSearchWrapperVariant({ size });
-    const iconClassname = iconVariant({ size });
+    const helperTextClassname = helperTextVariant({
+      size,
+      error,
+      disabled,
+    });
+    const inlineEndIconWrapperClassname = inlineEndIconWrapperVariant({ size });
+    const inlineStartIconWrapperClassname = inlineStartIconWrapperVariant({
+      size,
+    });
+    const iconActionClassname = iconActionVariant({ size });
 
     // TODO wait for clearify aboutm start,end, search and clearIcon with iconMode
 
-    const startIconWrapperClassname = sectionIconWrapperVariant({
+    const startSegmentIconWrapperClassname = segmentedIconWrapperVariant({
       size,
       rounded,
       error,
       position: "start",
     });
-    const endIconWrapperClassname = sectionIconWrapperVariant({
+    const endSegmentIconWrapperClassname = segmentedIconWrapperVariant({
       size,
       rounded,
       error,
@@ -176,7 +183,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
         return (
           <div
             className={cn(
-              iconSearchWrapperClassname,
+              inlineStartIconWrapperClassname,
               "flex",
               classes?.iconSearchWrapper
             )}
@@ -190,12 +197,12 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
         return (
           <div
             className={cn(
-              iconSearchWrapperClassname,
+              inlineStartIconWrapperClassname,
               classes?.iconSearchWrapper
             )}
           >
             <div
-              className={cn(iconClassname, classes?.icon)}
+              className={cn(iconActionClassname, classes?.icon)}
               onClick={handleOnClickLeftSectionIcon}
             >
               {startIcon}
@@ -206,7 +213,10 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
 
       return (
         <div
-          className={cn(startIconWrapperClassname, classes?.startIconWrapper)}
+          className={cn(
+            startSegmentIconWrapperClassname,
+            classes?.startIconWrapper
+          )}
           onClick={handleOnClickLeftSectionIcon}
         >
           {startIcon}
@@ -216,9 +226,9 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       hasLeftSectionIcon,
       startIcon,
       iconMode,
-      iconSearchWrapperClassname,
-      startIconWrapperClassname,
-      iconClassname,
+      inlineStartIconWrapperClassname,
+      startSegmentIconWrapperClassname,
+      iconActionClassname,
       renderStartIcon,
       handleOnClickLeftSectionIcon,
     ]);
@@ -229,7 +239,11 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       if (renderEndIcon) {
         return (
           <div
-            className={cn(iconWrapperClassname, "flex", classes?.iconWrapper)}
+            className={cn(
+              inlineEndIconWrapperClassname,
+              "flex",
+              classes?.iconWrapper
+            )}
           >
             {renderEndIcon()}
           </div>
@@ -239,10 +253,14 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       if (iconMode === "flat") {
         return (
           <div
-            className={cn(iconWrapperClassname, "flex", classes?.iconWrapper)}
+            className={cn(
+              inlineEndIconWrapperClassname,
+              "flex",
+              classes?.iconWrapper
+            )}
           >
             <div
-              className={cn(iconClassname, classes?.icon)}
+              className={cn(iconActionClassname, classes?.icon)}
               onClick={handleOnClickRightSectionIcon}
             >
               {endIcon}
@@ -253,7 +271,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
 
       return (
         <div
-          className={cn(endIconWrapperClassname, classes?.endIconWrapper)}
+          className={cn(endSegmentIconWrapperClassname, classes?.endIconWrapper)}
           onClick={handleOnClickRightSectionIcon}
         >
           {endIcon}
@@ -263,9 +281,9 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       hasRightSectionIcon,
       endIcon,
       iconMode,
-      iconSearchWrapperClassname,
-      endIconWrapperClassname,
-      iconClassname,
+      inlineEndIconWrapperClassname,
+      endSegmentIconWrapperClassname,
+      iconActionClassname,
       renderEndIcon,
       handleOnClickRightSectionIcon,
     ]);
@@ -273,18 +291,6 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
     return (
       <div className={`inline-flex flex-col ${fullwidth ? "w-full" : ""}`}>
         <div className="relative">
-          {hasSearchIcon && !hasLeftSectionIcon && (
-            <div
-              className={cn(
-                iconSearchWrapperClassname,
-                classes?.iconSearchWrapper
-              )}
-            >
-              <MagnifyingGlassIcon
-                className={cn(iconClassname, classes?.icon)}
-              />
-            </div>
-          )}
           <input
             {...props}
             placeholder=" "
@@ -294,19 +300,33 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
             disabled={disabled}
             className={cn(inputClassname, props.className)}
           />
+          {hasSearchIcon && !hasLeftSectionIcon && (
+            <div
+              className={cn(
+                inlineStartIconWrapperClassname,
+                classes?.iconSearchWrapper
+              )}
+            >
+              <Search className={cn(iconActionClassname, classes?.icon)} />
+            </div>
+          )}
           {startIconElement}
 
           {hasClearIcon && !hasRightSectionIcon && (
             <div
-              className={cn(iconWrapperClassname, classes?.iconWrapper)}
+              className={cn(inlineEndIconWrapperClassname, classes?.iconWrapper)}
               style={{
                 display:
                   keepCloseIconOnValue && props.value ? "flex" : undefined,
               }}
             >
-              <XCircleIcon
-                type="button"
-                className={cn(iconClassname, classes?.icon)}
+              <CircleX
+                className={cn(
+                  iconActionClassname,
+                  // 'fill-none stroke-current',
+                  // "fill-none stroke-input-default-text hover:stroke-input-filled-text active:stroke-input-filled-text",
+                  classes?.icon
+                )}
                 onMouseDown={handleClearInput}
               />
             </div>
@@ -317,7 +337,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
             {label}{" "}
             {required && (
               <span
-                className={cn("text-error", {
+                className={cn("text-input-error", {
                   "text-input-disable-text": disabled,
                 })}
               >
@@ -326,16 +346,24 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
             )}
           </label>
         </div>
-        {(errorMessage || helperText) && (
+        {(errorMessage || helperText || keepFooterSpace) && (
           <span className={helperTextClassname}>
-            <span className="h-full">
-              <ExclamationCircleIcon
-                width={16}
-                height={16}
-                className={error ? "fill-error" : ""}
-              />
-            </span>
-            {errorMessage || helperText}
+            {(errorMessage || helperText) && (
+              <span className="h-full shrink-0">
+                <CircleAlert
+                  width={14}
+                  height={14}
+                  className={cn(
+                    "fill-none",
+                    error ? "stroke-input-error" : "stroke-input-filled-text"
+                  )}
+                />
+              </span>
+            )}
+            {keepFooterSpace && !error && !helperText && (
+              <span className="block min-h-[14px]" aria-hidden />
+            )}
+            {(error ? errorMessage : helperText) || ''}
           </span>
         )}
       </div>