@rovula/ui 0.0.28 → 0.0.30

package/src/components/TextInput/TextInput.styles.ts

@@ -142,34 +142,78 @@ export const labelVariant = cva(
   {
     variants: {
       size: {
-        sm: [
+        sm: [],
+        md: [],
+        lg: [],
+      },
+      disabled: {
+        true: "text-input-default-text placeholder:text-input-default-text",
+      },
+      error: {
+        true: "ring-error",
+      },
+      hasSearchIcon: {
+        false: "",
+      },
+      isFloatingLabel: {
+        false: "hidden peer-placeholder-shown:block peer-focus:bg-transparent",
+      },
+    },
+    compoundVariants: [
+      // floating = true
+      {
+        isFloatingLabel: true,
+        size: "sm",
+        className: [
           "left-3 -top-1.5 typography-label2 bg-input-label-bg",
           "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-small1 peer-placeholder-shown:bg-transparent",
           "peer-focus:-top-1.5 peer-focus:typography-label2",
         ],
-        md: [
+      },
+      {
+        isFloatingLabel: true,
+        size: "md",
+        className: [
           "left-3 -top-1.5 typography-label1 bg-input-label-bg",
           "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4 peer-placeholder-shown:bg-transparent",
           "peer-focus:-top-1.5 peer-focus:typography-label1",
         ],
-        lg: [
+      },
+      {
+        isFloatingLabel: true,
+        size: "lg",
+        className: [
           "left-4 -top-1.5 typography-label1 bg-input-label-bg",
           "peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1 peer-placeholder-shown:bg-transparent",
           "peer-focus:-top-1.5 peer-focus:typography-label1",
         ],
       },
-      disabled: {
-        true: "text-input-default-text placeholder:text-input-default-text",
+      // --------------
+      // flating = false
+      {
+        isFloatingLabel: false,
+        size: "sm",
+        className: [
+          "left-3 peer-placeholder-shown:top-2 peer-placeholder-shown:typography-small1",
+        ],
       },
-      error: {
-        true: "ring-error",
+      {
+        isFloatingLabel: false,
+        size: "md",
+        className: [
+          "left-3 peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4",
+        ],
       },
-      hasSearchIcon: {
-        false: "",
+      {
+        isFloatingLabel: false,
+        size: "lg",
+        className: [
+          "left-4 peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1",
+        ],
       },
-    },
-    compoundVariants: [
+      // --------------
       {
+        isFloatingLabel: true,
         hasSearchIcon: true,
         size: "sm",
         className: [
@@ -179,6 +223,7 @@ export const labelVariant = cva(
         ],
       },
       {
+        isFloatingLabel: true,
         hasSearchIcon: true,
         size: "md",
         className: [
@@ -188,6 +233,7 @@ export const labelVariant = cva(
         ],
       },
       {
+        isFloatingLabel: true,
         hasSearchIcon: true,
         size: "lg",
         className: [
@@ -196,12 +242,38 @@ export const labelVariant = cva(
           "peer-focus:-top-1.5 peer-focus:typography-label1",
         ],
       },
+      // floating = false and has search icon
+      {
+        isFloatingLabel: false,
+        hasSearchIcon: true,
+        size: "sm",
+        className: [
+          "left-6 peer-placeholder-shown:top-2 peer-placeholder-shown:typography-small1",
+        ],
+      },
+      {
+        isFloatingLabel: false,
+        hasSearchIcon: true,
+        size: "md",
+        className: [
+          "left-9 peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4",
+        ],
+      },
+      {
+        isFloatingLabel: false,
+        hasSearchIcon: true,
+        size: "lg",
+        className: [
+          "left-11 peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1",
+        ],
+      },
     ],
     defaultVariants: {
       size: "md",
       disabled: false,
       error: false,
       hasSearchIcon: false,
+      isFloatingLabel: true,
     },
   }
 );
@@ -285,6 +357,7 @@ export const iconVariant = cva(
 
 export const sectionIconWrapperVariant = cva(
   [
+    "cursor-pointer",
     "absolute items-center justify-center flex",
     "border-l border-l-input-default-stroke peer-hover:border-l-input-active-stroke peer-focus:border-l-input-active-stroke peer-disabled:border-l-input-disable-stroke",
     "fill-input-default-text peer-hover:fill-input-filled-text peer-focus:fill-input-filled-text peer-disabled:fill-input-disable-stroke",

package/src/components/TextInput/TextInput.tsx

@@ -2,6 +2,7 @@ import React, {
   FC,
   ReactNode,
   forwardRef,
+  useCallback,
   useImperativeHandle,
   useRef,
 } from "react";
@@ -34,12 +35,17 @@ export type InputProps = {
   disabled?: boolean;
   error?: boolean;
   required?: boolean;
+  isFloatingLabel?: boolean;
+  keepCloseIconOnValue?: boolean;
   hasClearIcon?: boolean;
   hasSearchIcon?: boolean;
   startIcon?: ReactNode;
   endIcon?: ReactNode;
   className?: string;
   labelClassName?: string;
+  onClickStartIcon?: () => void;
+  onClickEndIcon?: () => void;
+  renderEndIcon?: () => ReactNode;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
 
 export const TextInput = forwardRef<HTMLInputElement, InputProps>(
@@ -57,11 +63,15 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       disabled = false,
       error = false,
       required = true,
+      isFloatingLabel = true,
+      keepCloseIconOnValue = false,
       hasClearIcon = true,
       hasSearchIcon = false,
       startIcon,
       endIcon,
       labelClassName,
+      onClickEndIcon,
+      renderEndIcon,
       ...props
     },
     ref
@@ -87,6 +97,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       disabled,
       error,
       hasSearchIcon,
+      isFloatingLabel,
     });
     const helperTextClassname = helperTextVariant({ size, error, disabled });
     const iconWrapperClassname = iconWrapperVariant({ size });
@@ -101,11 +112,26 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
 
     useImperativeHandle(ref, () => inputRef?.current as HTMLInputElement);
 
-    const handleClearInput = () => {
+    const handleClearInput = useCallback(() => {
       if (inputRef.current) {
         inputRef.current.value = "";
+
+        if (props.onChange) {
+          const event = new Event("input", { bubbles: true });
+          props.onChange({ target: { value: "" } } as any);
+        }
+      }
+    }, [props.onChange]);
+
+    // TODO startIcon
+    const handleOnClickRightSectionIcon = useCallback(() => {
+      if (disabled) return;
+
+      onClickEndIcon?.();
+      if (inputRef.current) {
+        inputRef.current.focus();
       }
-    };
+    }, [disabled, onClickEndIcon]);
 
     return (
       <div className={`inline-flex flex-col ${fullwidth ? "w-full" : ""}`}>
@@ -125,7 +151,13 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
             className={cn(inputClassname, props.className)}
           />
           {hasClearIcon && !hasRightSectionIcon && (
-            <div className={iconWrapperClassname}>
+            <div
+              className={iconWrapperClassname}
+              style={{
+                display:
+                  keepCloseIconOnValue && props.value ? "flex" : undefined,
+              }}
+            >
               <XCircleIcon
                 type="button"
                 className={iconClassname}
@@ -133,8 +165,15 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
               />
             </div>
           )}
-          {hasRightSectionIcon && (
-            <div className={endIconWrapperClassname}>{endIcon}</div>
+          {hasRightSectionIcon && renderEndIcon ? (
+            renderEndIcon()
+          ) : (
+            <div
+              className={endIconWrapperClassname}
+              onClick={handleOnClickRightSectionIcon}
+            >
+              {endIcon}
+            </div>
           )}
 
           <label htmlFor={_id} className={cn(labelClassname, labelClassName)}>
@@ -152,11 +191,13 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
         </div>
         {(errorMessage || helperText) && (
           <span className={helperTextClassname}>
-            <ExclamationCircleIcon
-              width={16}
-              height={16}
-              className={error ? "fill-error" : ""}
-            />{" "}
+            <span className="h-full">
+              <ExclamationCircleIcon
+                width={16}
+                height={16}
+                className={error ? "fill-error" : ""}
+              />
+            </span>
             {errorMessage || helperText}
           </span>
         )}

package/src/index.ts

@@ -30,6 +30,7 @@ export * from "./components/DataTable/DataTable";
 export * from "./components/Dialog/Dialog";
 export * from "./components/AlertDialog/AlertDialog";
 export * from "./components/Search/Search";
+export * from "./components/InputFilter/InputFilter";
 export * from "./components/Slider/Slider";
 export * from "./components/Switch/Switch";
 export * from "./components/DropdownMenu/DropdownMenu";

package/src/theme/tokens/components/action-button.css

@@ -11,6 +11,19 @@
   /* Solid Mode Tokens                                                  */
   /* ------------------------------------------------------------------ */
 
+  /* TODO */
+  --function-default-solid: #ececec;
+  --function-default-hover: #fafafa;
+  --function-default-hover-bg: rgba(250 250 250 / 0.08);
+  --function-default-stroke: rgba(158 158 158 / 0.24);
+  --function-default-icon: #212b36;
+  --function-default-outline-icon: #9e9e9e;
+  --function-active-solid: #b1a400;
+  --function-active-hover: #ddcd00;
+  --function-active-hover-bg: rgba(221 205 0 / 0.08);
+  --function-active-stroke: rgba(177 164 0 / 0.48);
+  --function-active-icon: #212b36;
+
   /* Default State */
   --action-button-solid-default-bg: var(--state-color-primary-default);
   --action-button-solid-default-border: var(--state-color-primary-default);