@ctlyst.id/internal-ui 3.2.1 → 3.3.0

package/dist/index.mjs

@@ -513,6 +513,7 @@ var Field = (props) => {
     isRequired,
     children,
     isSuccess,
+    isDisabled,
     boxProps = {}
   } = props;
   const getHelperColor = () => {
@@ -526,12 +527,39 @@ 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),
-    children,
+    /* @__PURE__ */ jsx17(
+      Box6,
+      {
+        transition: "all 0.15s",
+        boxShadow: "none",
+        borderRadius: "sm",
+        border: "1px solid",
+        borderColor: outlineColor,
+        _focusWithin: {
+          borderColor: focusColor
+        },
+        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)
@@ -669,19 +697,6 @@ 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;
@@ -695,7 +710,6 @@ 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,
     {
@@ -706,92 +720,80 @@ var InputField = React2.forwardRef((props, ref) => {
       leftHelperText,
       rightHelperText,
       isRequired,
-      children: /* @__PURE__ */ jsx21(
-        Box8,
+      isDisabled,
+      children: /* @__PURE__ */ jsxs5(
+        InputGroup,
         {
-          transition: "all 0.15s",
-          boxShadow: "none",
+          size: size2,
           borderRadius: "sm",
-          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
-              ]
-            }
-          )
+          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
+          ]
         }
       )
     }
@@ -1228,7 +1230,6 @@ import {
   FormControl as FormControl3,
   FormErrorMessage as FormErrorMessage3,
   FormHelperText as FormHelperText3,
-  FormLabel as FormLabel3,
   IconButton as IconButton4,
   InputGroup as InputGroup4,
   InputRightElement as InputRightElement3
@@ -2169,7 +2170,7 @@ var Datepicker = ({
         id,
         name,
         selected,
-        customInput: /* @__PURE__ */ jsx27(input_field_default, { autoComplete: "off" }),
+        customInput: /* @__PURE__ */ jsx27(input_field_default, { label, isRequired, autoComplete: "off", isError }),
         showPopperArrow: false,
         calendarClassName: cx8({ inline: props.inline }),
         dropdownMode: "select",
@@ -2186,8 +2187,7 @@ var Datepicker = ({
   if (props.inline) {
     return component;
   }
-  return /* @__PURE__ */ jsxs10(FormControl3, { isRequired, "data-test-id": "CT_Component_datepicker_wrapper", isInvalid: isError, children: [
-    label && /* @__PURE__ */ jsx27(FormLabel3, { fontSize: "text.sm", children: label }),
+  return /* @__PURE__ */ jsxs10(FormControl3, { "data-test-id": "CT_Component_datepicker_wrapper", isInvalid: isError, children: [
     /* @__PURE__ */ jsxs10(InputGroup4, { children: [
       component,
       /* @__PURE__ */ jsxs10(InputRightElement3, { alignSelf: "center", bottom: 0, flexDir: "row-reverse", width: "auto", mr: 2, gap: 2, children: [
@@ -4812,7 +4812,7 @@ import {
   Button as Button7,
   Flex as Flex18,
   FormControl as FormControl4,
-  FormLabel as FormLabel4,
+  FormLabel as FormLabel3,
   Heading as Heading2,
   Image as ChakraImage,
   ListItem as ListItem2,
@@ -4970,7 +4970,7 @@ var Uploader = ({
   return /* @__PURE__ */ jsxs30(FormControl4, { isRequired, children: [
     label && typeof label === "string" ? (
       // eslint-disable-next-line react/jsx-no-useless-fragment
-      /* @__PURE__ */ jsxs30(FormLabel4, { requiredIndicator: /* @__PURE__ */ jsx65(Fragment11, {}), fontSize: "text.sm", children: [
+      /* @__PURE__ */ jsxs30(FormLabel3, { requiredIndicator: /* @__PURE__ */ jsx65(Fragment11, {}), fontSize: "text.sm", children: [
         isRequired && /* @__PURE__ */ jsx65(RequiredIndicator2, { mr: 1, ml: 0 }),
         label
       ] })
@@ -5884,10 +5884,10 @@ var baseStyle5 = defineStyle2({
   marginEnd: 1,
   mb: 1
 });
-var FormLabel5 = defineStyleConfig3({
+var FormLabel4 = defineStyleConfig3({
   baseStyle: baseStyle5
 });
-var form_label_default = FormLabel5;
+var form_label_default = FormLabel4;
 
 // src/config/theme/components/input.ts
 import { inputAnatomy as parts3 } from "@chakra-ui/anatomy";