@ctlyst.id/internal-ui 3.3.5 → 3.3.6

package/dist/index.mjs

@@ -520,39 +520,12 @@ var Field = (props) => {
   };
   const helperColor = getHelperColor();
   const justifyHelper = getJustifyContentHelper();
-  const getProperties = () => {
-    let outlineColor2 = "neutral.400";
-    let focusColor2 = "primary.500";
-    if (isError || isDisabled || isSuccess) {
-      if (isError) outlineColor2 = "danger.500";
-      else if (isSuccess) outlineColor2 = "success.500";
-      focusColor2 = outlineColor2;
-    }
-    return {
-      outlineColor: outlineColor2,
-      focusColor: focusColor2
-    };
-  };
-  const { outlineColor, focusColor } = getProperties();
   return /* @__PURE__ */ jsxs3(FormControl, { isInvalid: isError, ...boxProps, children: [
     label && (typeof label === "string" ? /* @__PURE__ */ jsxs3(FormLabel, { mb: 1, fontSize: "text.sm", requiredIndicator: void 0, children: [
       isRequired && /* @__PURE__ */ jsx17(Box6, { as: "span", color: "danger.500", ml: 0, mr: 1, children: "*" }),
       label
     ] }) : label),
-    /* @__PURE__ */ jsx17(
-      Box6,
-      {
-        transition: "all 0.15s",
-        boxShadow: "none",
-        borderRadius: "sm",
-        border: "1px solid",
-        borderColor: outlineColor,
-        _focusWithin: {
-          borderColor: focusColor
-        },
-        children
-      }
-    ),
+    children,
     (isError && errorMessage || leftHelperText || rightHelperText) && /* @__PURE__ */ jsxs3(Box6, { display: "flex", width: "full", justifyContent: justifyHelper, children: [
       !isError ? leftHelperText && (typeof leftHelperText === "string" ? /* @__PURE__ */ jsx17(FormHelperText, { fontSize: "text.xs", color: helperColor, mt: 1, children: leftHelperText }) : leftHelperText) : typeof errorMessage === "string" ? /* @__PURE__ */ jsx17(FormErrorMessage, { fontSize: "text.xs", color: "danger.500", mt: 1, children: errorMessage }) : errorMessage,
       rightHelperText && (typeof rightHelperText === "string" ? /* @__PURE__ */ jsx17(FormHelperText, { fontSize: "text.xs", color: helperColor, mt: 1, children: rightHelperText }) : rightHelperText)
@@ -690,6 +663,19 @@ var InputField = React2.forwardRef((props, ref) => {
     isLoading,
     ...inputProps
   } = props;
+  const getProperties = () => {
+    let outlineColor2 = "neutral.400";
+    let focusColor2 = "primary.500";
+    if (isError || isDisabled || isSuccess) {
+      if (isError) outlineColor2 = "danger.500";
+      else if (isSuccess) outlineColor2 = "success.500";
+      focusColor2 = outlineColor2;
+    }
+    return {
+      outlineColor: outlineColor2,
+      focusColor: focusColor2
+    };
+  };
   const [isShowPassword, setIsShowPassword] = useState(false);
   const inputType = useMemo(() => {
     return type === "password" && isShowPassword ? "text" : type;
@@ -703,6 +689,7 @@ var InputField = React2.forwardRef((props, ref) => {
   const iconColor = useMemo(() => {
     return isDisabled ? "black.low" : "black.medium";
   }, [isDisabled]);
+  const { outlineColor, focusColor } = getProperties();
   return /* @__PURE__ */ jsx21(
     field_default,
     {
@@ -713,80 +700,92 @@ var InputField = React2.forwardRef((props, ref) => {
       leftHelperText,
       rightHelperText,
       isRequired,
-      isDisabled,
-      children: /* @__PURE__ */ jsxs5(
-        InputGroup,
+      children: /* @__PURE__ */ jsx21(
+        Box8,
         {
-          size: size2,
+          transition: "all 0.15s",
+          boxShadow: "none",
           borderRadius: "sm",
-          backgroundColor: isDisabled ? "neutral.300" : "white.high",
-          cursor: isDisabled ? "not-allowed" : "default",
-          children: [
-            addOnLeft,
-            /* @__PURE__ */ jsx21(
-              ChakraInput,
-              {
-                ref,
-                type: inputType,
-                value,
-                isDisabled,
-                isSuccess,
-                ...inputProps,
-                fontSize
-              }
-            ),
-            (withClear || isLoading || type === "password") && /* @__PURE__ */ jsxs5(
-              Box8,
-              {
-                "data-test-id": "CT_Component_ClearInput",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                width: "16px",
-                mr: "10px",
-                children: [
-                  withClear && !isLoading && /* @__PURE__ */ jsx21(
-                    Box8,
-                    {
-                      display: "flex",
-                      justifyContent: "center",
-                      onClick: !isDisabled ? onClear : void 0,
-                      cursor: isDisabled ? "not-allowed" : "pointer",
-                      children: /* @__PURE__ */ jsx21(Close2, { size: 4, color: iconColor })
-                    }
-                  ),
-                  type === "password" && !isShowPassword && !isLoading && /* @__PURE__ */ jsx21(
-                    Box8,
-                    {
-                      "data-test-id": "q2Bj2G4FlamXyHuRKMZ1Q",
-                      onClick: () => {
-                        if (!isDisabled) setIsShowPassword(true);
-                      },
-                      cursor: isDisabled ? "not-allowed" : "pointer",
-                      display: "flex",
-                      justifyContent: "center",
-                      children: /* @__PURE__ */ jsx21(EyeOff, { size: 4, color: iconColor })
-                    }
-                  ),
-                  type === "password" && isShowPassword && !isLoading && /* @__PURE__ */ jsx21(
-                    Box8,
-                    {
-                      "data-test-id": "sfc2388bmeXBmdla45Ibk",
-                      onClick: () => {
-                        if (!isDisabled) setIsShowPassword(false);
-                      },
-                      cursor: isDisabled ? "not-allowed" : "pointer",
-                      display: "flex",
-                      justifyContent: "center",
-                      children: /* @__PURE__ */ jsx21(Eye2, { size: 4, color: iconColor })
-                    }
-                  ),
-                  isLoading && /* @__PURE__ */ jsx21(loader_default, { size: "sm" })
-                ]
-              }
-            ),
-            addOnRight
-          ]
+          border: "1px solid",
+          borderColor: outlineColor,
+          _focusWithin: {
+            borderColor: focusColor
+          },
+          children: /* @__PURE__ */ jsxs5(
+            InputGroup,
+            {
+              size: size2,
+              borderRadius: "sm",
+              backgroundColor: isDisabled ? "neutral.300" : "white.high",
+              cursor: isDisabled ? "not-allowed" : "default",
+              children: [
+                addOnLeft,
+                /* @__PURE__ */ jsx21(
+                  ChakraInput,
+                  {
+                    ref,
+                    type: inputType,
+                    value,
+                    isDisabled,
+                    isSuccess,
+                    ...inputProps,
+                    fontSize
+                  }
+                ),
+                (withClear || isLoading || type === "password") && /* @__PURE__ */ jsxs5(
+                  Box8,
+                  {
+                    "data-test-id": "CT_Component_ClearInput",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: "16px",
+                    mr: "10px",
+                    children: [
+                      withClear && !isLoading && /* @__PURE__ */ jsx21(
+                        Box8,
+                        {
+                          display: "flex",
+                          justifyContent: "center",
+                          onClick: !isDisabled ? onClear : void 0,
+                          cursor: isDisabled ? "not-allowed" : "pointer",
+                          children: /* @__PURE__ */ jsx21(Close2, { size: 4, color: iconColor })
+                        }
+                      ),
+                      type === "password" && !isShowPassword && !isLoading && /* @__PURE__ */ jsx21(
+                        Box8,
+                        {
+                          "data-test-id": "q2Bj2G4FlamXyHuRKMZ1Q",
+                          onClick: () => {
+                            if (!isDisabled) setIsShowPassword(true);
+                          },
+                          cursor: isDisabled ? "not-allowed" : "pointer",
+                          display: "flex",
+                          justifyContent: "center",
+                          children: /* @__PURE__ */ jsx21(EyeOff, { size: 4, color: iconColor })
+                        }
+                      ),
+                      type === "password" && isShowPassword && !isLoading && /* @__PURE__ */ jsx21(
+                        Box8,
+                        {
+                          "data-test-id": "sfc2388bmeXBmdla45Ibk",
+                          onClick: () => {
+                            if (!isDisabled) setIsShowPassword(false);
+                          },
+                          cursor: isDisabled ? "not-allowed" : "pointer",
+                          display: "flex",
+                          justifyContent: "center",
+                          children: /* @__PURE__ */ jsx21(Eye2, { size: 4, color: iconColor })
+                        }
+                      ),
+                      isLoading && /* @__PURE__ */ jsx21(loader_default, { size: "sm" })
+                    ]
+                  }
+                ),
+                addOnRight
+              ]
+            }
+          )
         }
       )
     }
@@ -4796,6 +4795,20 @@ var TimeInput2 = forwardRef12(
     }));
     const rootProps = getRootProps();
     const hoursProps = getInputProps("hours");
+    const getProperties = () => {
+      let outlineColor2 = "neutral.400";
+      let focusColor2 = "primary.500";
+      if (isError || isDisabled || isSuccess) {
+        if (isError) outlineColor2 = "danger.500";
+        else if (isSuccess) outlineColor2 = "success.500";
+        focusColor2 = outlineColor2;
+      }
+      return {
+        outlineColor: outlineColor2,
+        focusColor: focusColor2
+      };
+    };
+    const { outlineColor, focusColor } = getProperties();
     return /* @__PURE__ */ jsx63(Box29, { ...boxProps, ...rootProps, children: /* @__PURE__ */ jsx63(
       field_default,
       {
@@ -4805,28 +4818,41 @@ var TimeInput2 = forwardRef12(
         errorMessage,
         isDisabled,
         isSuccess,
-        children: /* @__PURE__ */ jsxs29(
-          InputGroup5,
+        children: /* @__PURE__ */ jsx63(
+          Box29,
           {
+            transition: "all 0.15s",
+            boxShadow: "none",
             borderRadius: "sm",
-            backgroundColor: isDisabled ? "neutral.300" : "white.high",
-            cursor: isDisabled ? "not-allowed" : "default",
-            alignItems: "center",
-            gap: 3,
-            children: [
-              /* @__PURE__ */ jsxs29(Flex17, { gap: 1, width: "100%", alignItems: "center", pl: 2, children: [
-                /* @__PURE__ */ jsx63(InputTimeArea, { ...hoursProps }),
-                /* @__PURE__ */ jsx63("span", { children: ":" }),
-                /* @__PURE__ */ jsx63(InputTimeArea, { ...getInputProps("minutes") }),
-                seconds && /* @__PURE__ */ jsxs29(Fragment10, { children: [
-                  /* @__PURE__ */ jsx63("span", { children: ":" }),
-                  /* @__PURE__ */ jsx63(InputTimeArea, { ...getInputProps("seconds") })
-                ] }),
-                options.hour12 && /* @__PURE__ */ jsx63(Input3, { p: 0, ...getInputProps("am/pm") })
-              ] }),
-              /* @__PURE__ */ jsx63(Clock, { color: "neutral.400" }),
-              addOnRight
-            ]
+            border: "1px solid",
+            borderColor: outlineColor,
+            _focusWithin: {
+              borderColor: focusColor
+            },
+            children: /* @__PURE__ */ jsxs29(
+              InputGroup5,
+              {
+                borderRadius: "sm",
+                backgroundColor: isDisabled ? "neutral.300" : "white.high",
+                cursor: isDisabled ? "not-allowed" : "default",
+                alignItems: "center",
+                gap: 3,
+                children: [
+                  /* @__PURE__ */ jsxs29(Flex17, { gap: 1, width: "100%", alignItems: "center", pl: 2, children: [
+                    /* @__PURE__ */ jsx63(InputTimeArea, { ...hoursProps }),
+                    /* @__PURE__ */ jsx63("span", { children: ":" }),
+                    /* @__PURE__ */ jsx63(InputTimeArea, { ...getInputProps("minutes") }),
+                    seconds && /* @__PURE__ */ jsxs29(Fragment10, { children: [
+                      /* @__PURE__ */ jsx63("span", { children: ":" }),
+                      /* @__PURE__ */ jsx63(InputTimeArea, { ...getInputProps("seconds") })
+                    ] }),
+                    options.hour12 && /* @__PURE__ */ jsx63(Input3, { p: 0, ...getInputProps("am/pm") })
+                  ] }),
+                  /* @__PURE__ */ jsx63(Clock, { color: "neutral.400" }),
+                  addOnRight
+                ]
+              }
+            )
           }
         )
       }