@rovula/ui 0.0.19 → 0.0.21

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

@@ -4,7 +4,7 @@ export const inputVariant = cva(
   [
     "border-0 outline-none",
     "p-1 flex w-auto box-border",
-    "peer text-black placeholder:text-transparent bg-transparent caret-primary",
+    "peer text-input-filled-text placeholder:text-transparent bg-transparent caret-primary",
   ],
   {
     variants: {
@@ -15,28 +15,40 @@ export const inputVariant = cva(
       },
       rounded: {
         none: "rounded-none",
-        normal: "rounded-xl",
+        normal: "rounded-md",
         full: "rounded-full",
       },
       variant: {
         flat: "",
-        outline:
-          "ring-1 ring-inset ring-input-stroke hover:ring-input-active focus:ring-1 focus:ring-inset focus:ring-input-stroke-active",
+        outline: [
+          "ring-1 ring-inset ring-input-default-stroke",
+          "hover:ring-input-active-stroke",
+          "focus:ring-1 focus:ring-inset focus:ring-input-active-stroke",
+        ],
         underline:
-          "border-b-2 border-input-stroke transition-colors hover:border-input-stroke-active focus:border-input-stroke",
+          "border-b-2 border-input-default-stroke transition-colors hover:border-input-active-stroke focus:border-input-stroke",
       },
       fullwidth: {
         true: "w-full",
       },
       disabled: {
-        true: "text-input-text-disabled ring-input-stroke-disabled placeholder:text-input-text-disabled",
+        true: [
+          "bg-input-disable-bg text-input-disable-text ring-input-disable-stroke placeholder:text-input-disable-text",
+          "hover:ring-input-disable-stroke",
+        ],
       },
       error: {
-        true: "ring-error focus:ring-error",
+        true: "ring-input-error focus:ring-input-error",
       },
       hasClearIcon: {
         true: "",
       },
+      hasSearchIcon: {
+        false: "",
+      },
+      leftSectionIcon: {
+        false: "",
+      },
       rightSectionIcon: {
         false: "",
       },
@@ -61,6 +73,36 @@ export const inputVariant = cva(
         size: "lg",
         class: "focus:pe-10",
       },
+      {
+        hasSearchIcon: true,
+        size: "sm",
+        class: "ps-6",
+      },
+      {
+        hasSearchIcon: true,
+        size: "md",
+        class: "ps-9",
+      },
+      {
+        hasSearchIcon: true,
+        size: "lg",
+        class: "ps-11",
+      },
+      {
+        leftSectionIcon: true,
+        size: "sm",
+        class: "ps-[38px]",
+      },
+      {
+        leftSectionIcon: true,
+        size: "md",
+        class: "ps-[46px]",
+      },
+      {
+        leftSectionIcon: true,
+        size: "lg",
+        class: "ps-[72px]",
+      },
       {
         rightSectionIcon: true,
         size: "sm",
@@ -85,6 +127,8 @@ export const inputVariant = cva(
       disabled: false,
       error: false,
       hasClearIcon: false,
+      hasSearchIcon: false,
+      leftSectionIcon: false, // TODO function style
       rightSectionIcon: false,
     },
   }
@@ -92,38 +136,72 @@ export const inputVariant = cva(
 
 export const labelVariant = cva(
   [
-    "absolute block duration-450 transition-all px-[2px] text-input-text peer-focus:text-input-text-active peer-focus:bg-input-label-background",
+    "absolute block duration-450 transition-all px-[2px] text-input-default-text",
+    "peer-focus:text-input-filled-text peer-focus:bg-input-label-bg", // TODO bg
   ],
   {
     variants: {
       size: {
         sm: [
-          "left-3 -top-1.5 typography-label2 bg-input-label-background",
+          "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: [
-          "left-3 -top-1.5 typography-label1 bg-input-label-background",
+          "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: [
-          "left-4 -top-1.5 typography-label1 bg-input-label-background",
+          "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-text-disabled ring-input-stroke-disabled placeholder:text-input-text-disabled",
+        true: "text-input-default-text placeholder:text-input-default-text",
       },
       error: {
         true: "ring-error",
       },
+      hasSearchIcon: {
+        false: "",
+      },
     },
+    compoundVariants: [
+      {
+        hasSearchIcon: true,
+        size: "sm",
+        className: [
+          "left-6 -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",
+        ],
+      },
+      {
+        hasSearchIcon: true,
+        size: "md",
+        className: [
+          "left-9 -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",
+        ],
+      },
+      {
+        hasSearchIcon: true,
+        size: "lg",
+        className: [
+          "left-11 -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",
+        ],
+      },
+    ],
     defaultVariants: {
       size: "md",
       disabled: false,
       error: false,
+      hasSearchIcon: false,
     },
   }
 );
@@ -138,11 +216,11 @@ export const helperTextVariant = cva(
         lg: "mt-[6px]",
       },
       disabled: {
-        true: "text-input-text-disabled",
+        true: "text-input-disable-text",
       },
       error: {
-        true: "text-error",
-        false: "text-input-text",
+        true: "text-input-error",
+        false: "text-input-filled-text",
       },
     },
     defaultVariants: {
@@ -171,8 +249,26 @@ export const iconWrapperVariant = cva(
   }
 );
 
+export const iconSearchWrapperVariant = cva(
+  ["absolute inset-y-0 left-0 items-center justify-center flex"],
+  {
+    variants: {
+      size: {
+        sm: "ml-2",
+        md: "ml-3",
+        lg: "ml-4",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+);
+
 export const iconVariant = cva(
-  ["cursor-pointer z-50 fill-input-stroke-active hover:fill-input-text"],
+  [
+    "cursor-pointer z-50 fill-input-active-stroke hover:fill-input-default-text",
+  ],
   {
     variants: {
       size: {
@@ -189,9 +285,9 @@ export const iconVariant = cva(
 
 export const sectionIconWrapperVariant = cva(
   [
-    "absolute inset-y-0 right-0 items-center justify-center flex",
-    "border-l border-l-input-stroke peer-hover:border-l-input-active peer-focus:border-l-input-stroke-active peer-disabled:border-l-input-stroke-disabled",
-    "fill-input-text peer-hover:fill-input-text-active peer-focus:fill-input-text-active",
+    "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",
   ],
   {
     variants: {
@@ -205,10 +301,19 @@ export const sectionIconWrapperVariant = cva(
         normal: "rounded-r-xl",
         full: "rounded-r-full",
       },
+      error: {
+        true: "border-l-input-error",
+      },
+      position: {
+        start: "inset-y-0 left-0 ",
+        end: "inset-y-0 right-0 ",
+      },
     },
     defaultVariants: {
       size: "md",
       rounded: "normal",
+      error: false,
+      position: "end",
     },
   }
 );

package/src/components/TextInput/TextInput.tsx

@@ -7,13 +7,18 @@ import React, {
 } from "react";
 import {
   helperTextVariant,
+  iconSearchWrapperVariant,
   iconVariant,
   iconWrapperVariant,
   inputVariant,
   labelVariant,
   sectionIconWrapperVariant,
 } from "./TextInput.styles";
-import { XCircleIcon, ExclamationCircleIcon } from "@heroicons/react/16/solid";
+import {
+  XCircleIcon,
+  ExclamationCircleIcon,
+  MagnifyingGlassIcon,
+} from "@heroicons/react/16/solid";
 import { cn } from "@/utils/cn";
 
 export type InputProps = {
@@ -30,6 +35,8 @@ export type InputProps = {
   error?: boolean;
   required?: boolean;
   hasClearIcon?: boolean;
+  hasSearchIcon?: boolean;
+  startIcon?: ReactNode;
   endIcon?: ReactNode;
   className?: string;
   labelClassName?: string;
@@ -51,6 +58,8 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       error = false,
       required = true,
       hasClearIcon = true,
+      hasSearchIcon = false,
+      startIcon,
       endIcon,
       labelClassName,
       ...props
@@ -59,6 +68,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
   ) => {
     const inputRef = useRef<HTMLInputElement>(null);
     const _id = id || `${type}-${label}-input`;
+    const hasLeftSectionIcon = !!startIcon;
     const hasRightSectionIcon = !!endIcon;
     const inputClassname = inputVariant({
       size,
@@ -67,20 +77,26 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       fullwidth,
       disabled,
       error,
+      hasSearchIcon,
       hasClearIcon: hasRightSectionIcon ? false : hasClearIcon,
+      leftSectionIcon: hasLeftSectionIcon,
       rightSectionIcon: hasRightSectionIcon,
     });
     const labelClassname = labelVariant({
       size,
       disabled,
       error,
+      hasSearchIcon,
     });
     const helperTextClassname = helperTextVariant({ size, error, disabled });
     const iconWrapperClassname = iconWrapperVariant({ size });
+    const iconSearchWrapperClassname = iconSearchWrapperVariant({ size });
     const iconClassname = iconVariant({ size });
-    const sectionIconWrapperClassname = sectionIconWrapperVariant({
+    // TODO startIcon
+    const endIconWrapperClassname = sectionIconWrapperVariant({
       size,
       rounded,
+      error,
     });
 
     useImperativeHandle(ref, () => inputRef?.current as HTMLInputElement);
@@ -94,6 +110,11 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
     return (
       <div className={`inline-flex flex-col ${fullwidth ? "w-full" : ""}`}>
         <div className="relative">
+          {hasSearchIcon && (
+            <div className={iconSearchWrapperClassname}>
+              <MagnifyingGlassIcon className={iconClassname} />
+            </div>
+          )}
           <input
             {...props}
             placeholder=" "
@@ -113,11 +134,20 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
             </div>
           )}
           {hasRightSectionIcon && (
-            <div className={sectionIconWrapperClassname}>{endIcon}</div>
+            <div className={endIconWrapperClassname}>{endIcon}</div>
           )}
 
           <label htmlFor={_id} className={cn(labelClassname, labelClassName)}>
-            {label} {required && <span className="text-error">*</span>}
+            {label}{" "}
+            {required && (
+              <span
+                className={cn("text-error", {
+                  "text-input-disable-text": disabled,
+                })}
+              >
+                *
+              </span>
+            )}
           </label>
         </div>
         {(errorMessage || helperText) && (

package/src/index.ts

@@ -20,10 +20,13 @@ export {
   PopoverTrigger,
   PopoverContent,
 } from "./components/Popover/Popover";
+export { default as Loading } from "./components/Loading/Loading";
+export { default as ProgressBar } from "./components/ProgressBar/ProgressBar";
 export * from "./components/Table/Table";
 export * from "./components/DataTable/DataTable";
 export * from "./components/Dialog/Dialog";
 export * from "./components/AlertDialog/AlertDialog";
+export * from "./components/Search/Search";
 
 // Export component types
 export type { ButtonProps } from "./components/Button/Button";