@rovula/ui 0.0.29 → 0.0.31

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

@@ -2,6 +2,7 @@ import { cva } from "class-variance-authority";
 
 export const inputVariant = cva(
   [
+    "truncate",
     "border-0 outline-none",
     "p-1 flex w-auto box-border",
     "peer text-input-filled-text placeholder:text-transparent bg-transparent caret-primary",
@@ -76,47 +77,47 @@ export const inputVariant = cva(
       {
         hasSearchIcon: true,
         size: "sm",
-        class: "ps-6",
+        class: "!ps-6",
       },
       {
         hasSearchIcon: true,
         size: "md",
-        class: "ps-9",
+        class: "!ps-9",
       },
       {
         hasSearchIcon: true,
         size: "lg",
-        class: "ps-11",
+        class: "!ps-11",
       },
       {
         leftSectionIcon: true,
         size: "sm",
-        class: "ps-[38px]",
+        class: "!ps-[38px]",
       },
       {
         leftSectionIcon: true,
         size: "md",
-        class: "ps-[46px]",
+        class: "!ps-[46px]",
       },
       {
         leftSectionIcon: true,
         size: "lg",
-        class: "ps-[72px]",
+        class: "!ps-[72px]",
       },
       {
         rightSectionIcon: true,
         size: "sm",
-        class: "pe-[38px]",
+        class: "!pe-[38px]",
       },
       {
         rightSectionIcon: true,
         size: "md",
-        class: "pe-[46px]",
+        class: "!pe-[46px]",
       },
       {
         rightSectionIcon: true,
         size: "lg",
-        class: "pe-[72px]",
+        class: "!pe-[72px]",
       },
     ],
     defaultVariants: {
@@ -142,34 +143,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 +224,7 @@ export const labelVariant = cva(
         ],
       },
       {
+        isFloatingLabel: true,
         hasSearchIcon: true,
         size: "md",
         className: [
@@ -188,6 +234,7 @@ export const labelVariant = cva(
         ],
       },
       {
+        isFloatingLabel: true,
         hasSearchIcon: true,
         size: "lg",
         className: [
@@ -196,12 +243,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 +358,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,9 +165,17 @@ 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)}>
             {label}{" "}
@@ -152,11 +192,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/presets/colors.js

@@ -71,6 +71,27 @@ module.exports = {
         "input-label-bg": withColorMixin("--input-color-label-bg"),
         "input-error": withColorMixin("--input-color-error"),
 
+        "function-default-solid": withColorMixin("--function-default-solid"),
+        "function-default-hover": withColorMixin("--function-default-hover"),
+        "function-default-hover-bg": withColorMixin(
+          "--function-default-hover-bg"
+        ),
+        "function-default-hover-bg": withColorMixin(
+          "--function-default-hover-bg"
+        ),
+        "function-default-stroke": withColorMixin("--function-default-stroke"),
+        "function-default-icon": withColorMixin("--function-default-icon"),
+        "function-default-outline": withColorMixin(
+          "--function-default-outline-icon"
+        ),
+        "function-active-solid": withColorMixin("--function-active-solid"),
+        "function-active-hover": withColorMixin("--function-active-hover"),
+        "function-active-hover-bg": withColorMixin(
+          "--function-active-hover-bg"
+        ),
+        "function-active-stroke": withColorMixin("--function-active-stroke"),
+        "function-active-icon": withColorMixin("--function-active-icon"),
+
         "base-bg": withColorMixin("--base-color-bg"),
         "base-bg2": withColorMixin("--base-color-bg2"),
         "base-bg3": withColorMixin("--base-color-bg3"),

package/src/theme/themes/xspector/color.css

@@ -11,6 +11,19 @@
   --input-color-label-bg: #2d2e30;
   --input-color-error: #ff4d35;
 
+  /* Function button */
+  --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;
+
   --text-dark: #212b36;
   --text-medium: #637381;
   --text-light: #919eab;

package/src/theme/themes/xspector/components/action-button.css

@@ -12,34 +12,34 @@
   /* ------------------------------------------------------------------ */
 
   /* Default State */
-  --action-button-solid-default-bg: var(--state-color-secondary-default);
-  --action-button-solid-default-border: var(--state-color-secondary-default);
-  --action-button-solid-default-text: var(--state-color-secondary-text-solid);
+  --action-button-solid-default-bg: var(--function-default-solid);
+  --action-button-solid-default-border: var(--function-default-solid);
+  --action-button-solid-default-text: var(--function-default-icon);
 
   /* Hover State */
-  --action-button-solid-hover-bg: var(--state-color-secondary-hover);
-  --action-button-solid-hover-border: var(--state-color-secondary-hover);
-  --action-button-solid-hover-text: var(--state-color-secondary-text-solid);
+  --action-button-solid-hover-bg: var(--function-default-hover);
+  --action-button-solid-hover-border: var(--function-default-hover);
+  --action-button-solid-hover-text: var(--function-default-icon);
 
   /* Pressed State */
-  --action-button-solid-pressed-bg: var(--state-color-secondary-pressed);
-  --action-button-solid-pressed-border: var(--state-color-secondary-pressed);
-  --action-button-solid-pressed-text: var(--state-color-secondary-text-solid);
+  --action-button-solid-pressed-bg: var(--function-default-solid);
+  --action-button-solid-pressed-border: var(--function-default-solid);
+  --action-button-solid-pressed-text: var(--function-default-icon);
 
   /* Active State */
-  --action-button-solid-active-bg: var(--state-color-primary-default);
-  --action-button-solid-active-border: var(--state-color-primary-default);
-  --action-button-solid-active-text: var(--state-color-primary-text-solid);
+  --action-button-solid-active-bg: var(--function-active-solid);
+  --action-button-solid-active-border: var(--function-active-solid);
+  --action-button-solid-active-text: var(--function-active-icon);
 
   /* Active Hover State */
-  --action-button-solid-active-hover-bg: var(--state-color-primary-hover);
-  --action-button-solid-active-hover-border: var(--state-color-primary-hover);
-  --action-button-solid-active-hover-text: var(--state-color-primary-text-solid);
+  --action-button-solid-active-hover-bg: var(--function-active-hover);
+  --action-button-solid-active-hover-border: var(--function-active-hover);
+  --action-button-solid-active-hover-text: var(--function-active-icon);
 
   /* Active Pressed State */
-  --action-button-solid-active-pressed-bg: var(--state-color-primary-pressed);
-  --action-button-solid-active-pressed-border: var(--state-color-primary-pressed);
-  --action-button-solid-active-pressed-text: var(--state-color-primary-text-solid);
+  --action-button-solid-active-pressed-bg: var(--function-active-solid);
+  --action-button-solid-active-pressed-border: var(--function-active-solid);
+  --action-button-solid-active-pressed-text: var(--function-active-icon);
 
 
   /* ------------------------------------------------------------------ */
@@ -47,52 +47,54 @@
   /* ------------------------------------------------------------------ */
 
   /* Default State */
-  --action-button-outline-default-border: var(--state-color-secondary-stroke);
-  --action-button-outline-default-text: var(--state-color-secondary-text-outline);
+  --action-button-outline-default-border: var(--function-default-stroke);
+  --action-button-outline-default-text: var(--function-default-outline-icon);
 
   /* Hover State */
-  --action-button-outline-hover-bg:  var(--state-color-secondary-hover-bg);
-  --action-button-outline-hover-border: var(--state-color-secondary-hover);
-  --action-button-outline-hover-text: var(--state-color-secondary-text-hover);
+  --action-button-outline-hover-bg: var(--function-default-hover-bg);
+  --action-button-outline-hover-border: var(--function-default-hover);
+  --action-button-outline-hover-text: var(--function-default-hover);
 
   /* Pressed State */
-  --action-button-outline-pressed-bg: var(--state-color-secondary-hover-bg);
-  --action-button-outline-pressed-border: var(--state-color-secondary-pressed);
-  --action-button-outline-pressed-text: var(--state-color-secondary-text-pressed);
+  --action-button-outline-pressed-bg: var(--function-default-hover-bg);
+  --action-button-outline-pressed-border: var(--function-default-stroke);
+  --action-button-outline-pressed-text: var(--function-default-outline-icon);
 
   /* Active State */
-  --action-button-outline-active-border: var(--state-color-primary-stroke);
-  --action-button-outline-active-text: var(--state-color-primary-text-outline);
+  --action-button-outline-active-border: var(--function-active-stroke);
+  --action-button-outline-active-text: var(--function-active-solid);
 
   /* Active Hover State */
-  --action-button-outline-active-hover-bg:  var(--state-color-primary-hover-bg);
-  --action-button-outline-active-hover-border: var(--state-color-primary-hover);
-  --action-button-outline-active-hover-text: var(--state-color-primary-text-hover);
+  --action-button-outline-active-hover-bg:  var(--function-active-hover-bg);;
+  --action-button-outline-active-hover-border: var(--function-active-hover);
+  --action-button-outline-active-hover-text: var(--function-active-hover);
 
   /* Active Pressed State */
-  --action-button-outline-active-pressed-bg: var(--state-color-primary-hover-bg);
-  --action-button-outline-active-pressed-border: var(--state-color-primary-pressed);
-  --action-button-outline-active-pressed-text: var(--state-color-primary-text-pressed);
+  --action-button-outline-active-pressed-bg: var(--function-active-hover-bg);;
+  --action-button-outline-active-pressed-border: var(--function-active-stroke);
+  --action-button-outline-active-pressed-text: var(--function-active-solid);
 
   /* ------------------------------------------------------------------ */
   /* Icon Mode Tokens                                                  */
   /* ------------------------------------------------------------------ */
 
   /* Default State */
-  --action-button-icon-default-text: var(--state-color-secondary-text-outline);
+  --action-button-icon-default-text: var(--function-default-outline-icon);
 
   /* Hover State */
-  --action-button-icon-hover-bg: var(--state-color-secondary-hover-bg);
-  --action-button-icon-hover-text: var(--state-color-secondary-text-hover);
+  --action-button-icon-hover-bg: var(--function-default-hover-bg);
+  --action-button-icon-hover-text: var(--function-default-hover);
 
   /* Pressed State */
-  --action-button-icon-pressed-text: var(--state-color-secondary-text-pressed);
+  --action-button-icon-pressed-text: var(--function-default-outline-icon);
 
   /* Active State */
-  --action-button-icon-active-text: var(--state-color-primary-text-outline);
+  --action-button-icon-active-text: var(--function-active-solid);
 
   /* Active Hover State */
-  --action-button-icon-active-hover-bg:  var(--state-color-primary-hover-bg);
-  --action-button-icon-active-hover-text: var(--state-color-primary-text-hover);
-  --action-button-icon-active-pressed-text: var(--state-color-primary-text-pressed);
+  --action-button-icon-active-hover-bg: var(--function-active-hover-bg);
+  --action-button-icon-active-hover-text: var(--function-active-hover);
+
+  /* Active Pressed State */
+  --action-button-icon-active-pressed-text: var(--function-active-solid);
 }

package/src/theme/themes/xspector/state.css

@@ -84,6 +84,6 @@
   --state-color-error-text-pressed: #a5210f;
 
   --state-color-disable-solid: #454f5b;
-  --state-color-disable-outline: #D3DADF;
+  --state-color-disable-outline: #637381;
 }
 

package/src/theme/tokens/color.css

@@ -11,6 +11,19 @@
   --input-color-label-bg: #ffffff;/* #2d2e30; */
   --input-color-error: #ed2f15;
 
+  /* Function button */
+  --function-default-solid: #1e3249;
+  --function-default-hover: #35475b;
+  --function-default-hover-bg: rgba(30 50 73 / 0.08);
+  --function-default-stroke: rgba(30 50 73 / 0.48);
+  --function-default-icon: #ffffff;
+  --function-default-outline-icon: #1e3249;
+  --function-active-solid: #9b8f00;
+  --function-active-hover: #b1a400;
+  --function-active-hover-bg: rgba(221 205 0 / 0.08);
+  --function-active-stroke: rgba(177 164 0 / 0.48);
+  --function-active-icon: #ffffff;
+
   --text-dark: #18283a;
   --text-medium: #4b5b6d;
   --text-light: #8e98a4;