@rovula/ui 0.0.18 → 0.0.20

package/dist/components/TextInput/TextInput.styles.js

@@ -2,7 +2,7 @@ import { cva } from "class-variance-authority";
 export var inputVariant = cva([
     "border-0 outline-none",
     "p-1 flex w-auto box-border",
-    "peer text-black placeholder:text-transparent",
+    "peer text-input-filled-text placeholder:text-transparent bg-transparent caret-primary",
 ], {
     variants: {
         size: {
@@ -12,26 +12,39 @@ export var 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",
-            underline: "border-b-2 border-input-stroke transition-colors hover:border-input-stroke-active focus:border-input-stroke",
+            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-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: "",
         },
@@ -56,6 +69,36 @@ export var 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",
@@ -80,41 +123,77 @@ export var inputVariant = cva([
         disabled: false,
         error: false,
         hasClearIcon: false,
+        hasSearchIcon: false,
+        leftSectionIcon: false, // TODO function style
         rightSectionIcon: false,
     },
 });
 export var 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,
     },
 });
 export var helperTextVariant = cva(["text-small1 flex flex-row items-center gap-1"], {
@@ -125,11 +204,11 @@ export var helperTextVariant = cva(["text-small1 flex flex-row items-center gap-
             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: {
@@ -152,7 +231,21 @@ export var iconWrapperVariant = cva([
         size: "md",
     },
 });
-export var iconVariant = cva(["cursor-pointer z-50 fill-input-stroke-active hover:fill-input-text"], {
+export var 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 var iconVariant = cva([
+    "cursor-pointer z-50 fill-input-active-stroke hover:fill-input-default-text",
+], {
     variants: {
         size: {
             sm: "size-3",
@@ -165,9 +258,9 @@ export var iconVariant = cva(["cursor-pointer z-50 fill-input-stroke-active hove
     },
 });
 export var 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: {
         size: {
@@ -180,9 +273,18 @@ export var 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",
     },
 });