@ctlyst.id/internal-ui 3.3.3 → 3.3.6

package/dist/index.js

@@ -35,16 +35,11 @@ var src_exports = {};
 __export(src_exports, {
   Accordion: () => import_react3.Accordion,
   AccordionButton: () => import_react3.AccordionButton,
-  AccordionButtonProps: () => import_react3.AccordionButtonProps,
   AccordionEye: () => AccordionEye,
   AccordionIcon: () => import_react3.AccordionIcon,
-  AccordionIconProps: () => import_react3.AccordionIconProps,
   AccordionIndicator: () => AccordionIndicator,
   AccordionItem: () => import_react3.AccordionItem,
-  AccordionItemProps: () => import_react3.AccordionItemProps,
   AccordionPanel: () => import_react3.AccordionPanel,
-  AccordionPanelProps: () => import_react3.AccordionPanelProps,
-  AccordionProps: () => import_react3.AccordionProps,
   AccordionProvider: () => import_react3.AccordionProvider,
   Alert: () => Alert,
   AlertAction: () => AlertAction,
@@ -305,10 +300,6 @@ __export(src_exports, {
   Tr: () => import_react79.Tr,
   UnorderedList: () => import_react51.UnorderedList,
   Uploader: () => uploader_default,
-  UseAccordionItemProps: () => import_react3.UseAccordionItemProps,
-  UseAccordionItemReturn: () => import_react3.UseAccordionItemReturn,
-  UseAccordionProps: () => import_react3.UseAccordionProps,
-  UseAccordionReturn: () => import_react3.UseAccordionReturn,
   UseBreakpointOptions: () => import_react91.UseBreakpointOptions,
   UseCheckboxGroupProps: () => import_react16.UseCheckboxGroupProps,
   UseCheckboxGroupReturn: () => import_react16.UseCheckboxGroupReturn,
@@ -902,39 +893,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__ */ (0, import_jsx_runtime17.jsxs)(import_react14.FormControl, { isInvalid: isError, ...boxProps, children: [
     label && (typeof label === "string" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react14.FormLabel, { mb: 1, fontSize: "text.sm", requiredIndicator: void 0, children: [
       isRequired && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react14.Box, { as: "span", color: "danger.500", ml: 0, mr: 1, children: "*" }),
       label
     ] }) : label),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      import_react14.Box,
-      {
-        transition: "all 0.15s",
-        boxShadow: "none",
-        borderRadius: "sm",
-        border: "1px solid",
-        borderColor: outlineColor,
-        _focusWithin: {
-          borderColor: focusColor
-        },
-        children
-      }
-    ),
+    children,
     (isError && errorMessage || leftHelperText || rightHelperText) && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react14.Box, { display: "flex", width: "full", justifyContent: justifyHelper, children: [
       !isError ? leftHelperText && (typeof leftHelperText === "string" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react14.FormHelperText, { fontSize: "text.xs", color: helperColor, mt: 1, children: leftHelperText }) : leftHelperText) : typeof errorMessage === "string" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react14.FormErrorMessage, { fontSize: "text.xs", color: "danger.500", mt: 1, children: errorMessage }) : errorMessage,
       rightHelperText && (typeof rightHelperText === "string" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react14.FormHelperText, { fontSize: "text.xs", color: helperColor, mt: 1, children: rightHelperText }) : rightHelperText)
@@ -1060,6 +1024,19 @@ var InputField = import_react22.default.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] = (0, import_react22.useState)(false);
   const inputType = (0, import_react22.useMemo)(() => {
     return type === "password" && isShowPassword ? "text" : type;
@@ -1073,6 +1050,7 @@ var InputField = import_react22.default.forwardRef((props, ref) => {
   const iconColor = (0, import_react22.useMemo)(() => {
     return isDisabled ? "black.low" : "black.medium";
   }, [isDisabled]);
+  const { outlineColor, focusColor } = getProperties();
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     field_default,
     {
@@ -1083,80 +1061,92 @@ var InputField = import_react22.default.forwardRef((props, ref) => {
       leftHelperText,
       rightHelperText,
       isRequired,
-      isDisabled,
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-        import_react21.InputGroup,
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        import_react21.Box,
         {
-          size: size2,
+          transition: "all 0.15s",
+          boxShadow: "none",
           borderRadius: "sm",
-          backgroundColor: isDisabled ? "neutral.300" : "white.high",
-          cursor: isDisabled ? "not-allowed" : "default",
-          children: [
-            addOnLeft,
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-              import_react21.Input,
-              {
-                ref,
-                type: inputType,
-                value,
-                isDisabled,
-                isSuccess,
-                ...inputProps,
-                fontSize
-              }
-            ),
-            (withClear || isLoading || type === "password") && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-              import_react21.Box,
-              {
-                "data-test-id": "CT_Component_ClearInput",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                width: "16px",
-                mr: "10px",
-                children: [
-                  withClear && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                    import_react21.Box,
-                    {
-                      display: "flex",
-                      justifyContent: "center",
-                      onClick: !isDisabled ? onClear : void 0,
-                      cursor: isDisabled ? "not-allowed" : "pointer",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_internal_icon5.Close, { size: 4, color: iconColor })
-                    }
-                  ),
-                  type === "password" && !isShowPassword && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                    import_react21.Box,
-                    {
-                      "data-test-id": "q2Bj2G4FlamXyHuRKMZ1Q",
-                      onClick: () => {
-                        if (!isDisabled) setIsShowPassword(true);
-                      },
-                      cursor: isDisabled ? "not-allowed" : "pointer",
-                      display: "flex",
-                      justifyContent: "center",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_internal_icon5.EyeOff, { size: 4, color: iconColor })
-                    }
-                  ),
-                  type === "password" && isShowPassword && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-                    import_react21.Box,
-                    {
-                      "data-test-id": "sfc2388bmeXBmdla45Ibk",
-                      onClick: () => {
-                        if (!isDisabled) setIsShowPassword(false);
-                      },
-                      cursor: isDisabled ? "not-allowed" : "pointer",
-                      display: "flex",
-                      justifyContent: "center",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_internal_icon5.Eye, { size: 4, color: iconColor })
-                    }
-                  ),
-                  isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(loader_default, { size: "sm" })
-                ]
-              }
-            ),
-            addOnRight
-          ]
+          border: "1px solid",
+          borderColor: outlineColor,
+          _focusWithin: {
+            borderColor: focusColor
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+            import_react21.InputGroup,
+            {
+              size: size2,
+              borderRadius: "sm",
+              backgroundColor: isDisabled ? "neutral.300" : "white.high",
+              cursor: isDisabled ? "not-allowed" : "default",
+              children: [
+                addOnLeft,
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                  import_react21.Input,
+                  {
+                    ref,
+                    type: inputType,
+                    value,
+                    isDisabled,
+                    isSuccess,
+                    ...inputProps,
+                    fontSize
+                  }
+                ),
+                (withClear || isLoading || type === "password") && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                  import_react21.Box,
+                  {
+                    "data-test-id": "CT_Component_ClearInput",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: "16px",
+                    mr: "10px",
+                    children: [
+                      withClear && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                        import_react21.Box,
+                        {
+                          display: "flex",
+                          justifyContent: "center",
+                          onClick: !isDisabled ? onClear : void 0,
+                          cursor: isDisabled ? "not-allowed" : "pointer",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_internal_icon5.Close, { size: 4, color: iconColor })
+                        }
+                      ),
+                      type === "password" && !isShowPassword && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                        import_react21.Box,
+                        {
+                          "data-test-id": "q2Bj2G4FlamXyHuRKMZ1Q",
+                          onClick: () => {
+                            if (!isDisabled) setIsShowPassword(true);
+                          },
+                          cursor: isDisabled ? "not-allowed" : "pointer",
+                          display: "flex",
+                          justifyContent: "center",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_internal_icon5.EyeOff, { size: 4, color: iconColor })
+                        }
+                      ),
+                      type === "password" && isShowPassword && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                        import_react21.Box,
+                        {
+                          "data-test-id": "sfc2388bmeXBmdla45Ibk",
+                          onClick: () => {
+                            if (!isDisabled) setIsShowPassword(false);
+                          },
+                          cursor: isDisabled ? "not-allowed" : "pointer",
+                          display: "flex",
+                          justifyContent: "center",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_internal_icon5.Eye, { size: 4, color: iconColor })
+                        }
+                      ),
+                      isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(loader_default, { size: "sm" })
+                    ]
+                  }
+                ),
+                addOnRight
+              ]
+            }
+          )
         }
       )
     }
@@ -4790,9 +4780,9 @@ var import_internal_icon10 = require("@ctlyst.id/internal-icon");
 var import_react85 = require("react");
 
 // src/components/time-input/components/integration.tsx
+var import_timescape = require("@zamiru/timescape");
+var import_timescape2 = require("@zamiru/timescape");
 var import_react83 = require("react");
-var import_timescape = require("timescape");
-var import_timescape2 = require("timescape");
 var useTimescape = (options = {}) => {
   var _a;
   const { date, onChangeDate, ...rest } = options;
@@ -4933,6 +4923,20 @@ var TimeInput2 = (0, import_react84.forwardRef)(
     }));
     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__ */ (0, import_jsx_runtime63.jsx)(import_react84.Box, { ...boxProps, ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
       field_default,
       {
@@ -4942,28 +4946,41 @@ var TimeInput2 = (0, import_react84.forwardRef)(
         errorMessage,
         isDisabled,
         isSuccess,
-        children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
-          import_react84.InputGroup,
+        children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+          import_react84.Box,
           {
+            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__ */ (0, import_jsx_runtime63.jsxs)(import_react84.Flex, { gap: 1, width: "100%", alignItems: "center", pl: 2, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(InputTimeArea, { ...hoursProps }),
-                /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { children: ":" }),
-                /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(InputTimeArea, { ...getInputProps("minutes") }),
-                seconds && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { children: ":" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(InputTimeArea, { ...getInputProps("seconds") })
-                ] }),
-                options.hour12 && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react84.Input, { p: 0, ...getInputProps("am/pm") })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_internal_icon10.Clock, { color: "neutral.400" }),
-              addOnRight
-            ]
+            border: "1px solid",
+            borderColor: outlineColor,
+            _focusWithin: {
+              borderColor: focusColor
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+              import_react84.InputGroup,
+              {
+                borderRadius: "sm",
+                backgroundColor: isDisabled ? "neutral.300" : "white.high",
+                cursor: isDisabled ? "not-allowed" : "default",
+                alignItems: "center",
+                gap: 3,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_react84.Flex, { gap: 1, width: "100%", alignItems: "center", pl: 2, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(InputTimeArea, { ...hoursProps }),
+                    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { children: ":" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(InputTimeArea, { ...getInputProps("minutes") }),
+                    seconds && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { children: ":" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(InputTimeArea, { ...getInputProps("seconds") })
+                    ] }),
+                    options.hour12 && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react84.Input, { p: 0, ...getInputProps("am/pm") })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_internal_icon10.Clock, { color: "neutral.400" }),
+                  addOnRight
+                ]
+              }
+            )
           }
         )
       }
@@ -7110,16 +7127,11 @@ var import_react104 = require("@chakra-ui/react");
 0 && (module.exports = {
   Accordion,
   AccordionButton,
-  AccordionButtonProps,
   AccordionEye,
   AccordionIcon,
-  AccordionIconProps,
   AccordionIndicator,
   AccordionItem,
-  AccordionItemProps,
   AccordionPanel,
-  AccordionPanelProps,
-  AccordionProps,
   AccordionProvider,
   Alert,
   AlertAction,
@@ -7380,10 +7392,6 @@ var import_react104 = require("@chakra-ui/react");
   Tr,
   UnorderedList,
   Uploader,
-  UseAccordionItemProps,
-  UseAccordionItemReturn,
-  UseAccordionProps,
-  UseAccordionReturn,
   UseBreakpointOptions,
   UseCheckboxGroupProps,
   UseCheckboxGroupReturn,