@ctlyst.id/internal-ui 3.3.0 → 3.3.1

package/dist/index.mjs

@@ -1,9 +1,11 @@
 'use client'
 var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // src/components/accordion/components/accordion-eye.tsx
 import { Box } from "@chakra-ui/react";
@@ -4649,15 +4651,130 @@ import {
 // src/components/text/index.ts
 import { Code, CodeProps, Heading, HeadingProps, Link as Link5, LinkProps, Text as Text17, TextProps } from "@chakra-ui/react";
 
+// src/components/time-input/components/index.tsx
+import { Box as Box29, Flex as Flex17, forwardRef as forwardRef12, Input as Input3, InputGroup as InputGroup5 } from "@chakra-ui/react";
+import { Clock } from "@ctlyst.id/internal-icon";
+import { useEffect as useEffect2, useImperativeHandle as useImperativeHandle2 } from "react";
+import { useTimescape } from "timescape/react";
+import { Fragment as Fragment10, jsx as jsx63, jsxs as jsxs29 } from "react/jsx-runtime";
+var Time = class {
+  constructor(hours, minutes, seconds) {
+    __publicField(this, "hours");
+    __publicField(this, "minutes");
+    __publicField(this, "seconds");
+    this.hours = hours != null ? hours : 0;
+    this.minutes = minutes != null ? minutes : 0;
+    this.seconds = seconds != null ? seconds : 0;
+  }
+  toString() {
+    return `${this.hours}:${this.minutes}:${this.seconds}`;
+  }
+};
+var InputTimeArea = forwardRef12((props, ref) => {
+  return /* @__PURE__ */ jsx63(
+    Input3,
+    {
+      _focusWithin: {
+        bg: "neutral.300"
+      },
+      boxSizing: "content-box",
+      height: "24px",
+      ref,
+      p: "2px",
+      sx: {
+        fontVariantNumeric: "tabular-nums"
+      },
+      ...props
+    }
+  );
+});
+var TimeInput2 = forwardRef12(
+  ({
+    config: config2,
+    label,
+    isError,
+    isRequired,
+    errorMessage,
+    value,
+    seconds,
+    isDisabled,
+    boxProps,
+    addOnRight,
+    isSuccess,
+    onChangeTime
+  }, ref) => {
+    const dateVal = value != null ? value : config2 == null ? void 0 : config2.date;
+    const defaultDate = /* @__PURE__ */ new Date();
+    defaultDate.setHours(0, 0, 0, 0);
+    const date = dateVal ? new Date(dateVal) : defaultDate;
+    const timeValue = new Time();
+    const { getRootProps, getInputProps, options, update, _manager } = useTimescape({
+      date,
+      ...config2
+    });
+    useEffect2(() => {
+      var _a, _b, _c, _d, _e, _f;
+      timeValue.hours = (_b = (_a = options == null ? void 0 : options.date) == null ? void 0 : _a.getHours()) != null ? _b : 0;
+      timeValue.minutes = (_d = (_c = options == null ? void 0 : options.date) == null ? void 0 : _c.getMinutes()) != null ? _d : 0;
+      timeValue.seconds = (_f = (_e = options == null ? void 0 : options.date) == null ? void 0 : _e.getSeconds()) != null ? _f : 0;
+      if (onChangeTime) {
+        onChangeTime(timeValue);
+      }
+    }, [options.date]);
+    useImperativeHandle2(ref, () => ({
+      focus() {
+        _manager.focusField("hours");
+      }
+    }));
+    const rootProps = getRootProps();
+    const hoursProps = getInputProps("hours");
+    return /* @__PURE__ */ jsx63(Box29, { ...boxProps, ...rootProps, children: /* @__PURE__ */ jsx63(
+      field_default,
+      {
+        isError,
+        label,
+        isRequired,
+        errorMessage,
+        isDisabled,
+        isSuccess,
+        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("input", { ...getInputProps("am/pm") })
+              ] }),
+              /* @__PURE__ */ jsx63(Clock, { color: "neutral.400" }),
+              addOnRight
+            ]
+          }
+        )
+      }
+    ) });
+  }
+);
+
 // src/components/toast/components/toast.tsx
-import { chakra as chakra7, Flex as Flex17, Link as Link6, useToken } from "@chakra-ui/react";
+import { chakra as chakra7, Flex as Flex18, Link as Link6, useToken } from "@chakra-ui/react";
 import { Bounce, toast } from "react-toastify";
 
 // src/components/toast/components/styles.tsx
 import { Global as Global2 } from "@emotion/react";
-import { jsx as jsx63 } from "react/jsx-runtime";
+import { jsx as jsx64 } from "react/jsx-runtime";
 var Styles2 = () => {
-  return /* @__PURE__ */ jsx63(
+  return /* @__PURE__ */ jsx64(
     Global2,
     {
       styles: `
@@ -4689,7 +4806,7 @@ var Styles2 = () => {
 var styles_default2 = Styles2;
 
 // src/components/toast/components/toast.tsx
-import { Fragment as Fragment10, jsx as jsx64, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx65, jsxs as jsxs30 } from "react/jsx-runtime";
 var DEFAULT_OPTIONS = {
   position: "top-right",
   autoClose: 5e3,
@@ -4720,14 +4837,14 @@ var useToast = () => {
     "success.500"
   ]);
   const content = (icon, message, link) => {
-    return /* @__PURE__ */ jsxs29(Fragment10, { children: [
-      /* @__PURE__ */ jsx64(styles_default2, {}),
-      /* @__PURE__ */ jsxs29(Flex17, { justifyContent: "space-between", alignItems: "center", gap: 4, children: [
-        /* @__PURE__ */ jsxs29(Flex17, { alignItems: "center", children: [
-          icon && /* @__PURE__ */ jsx64(chakra7.span, { mr: 2, w: 4, h: 4, children: renderIcon(icon, "default") }),
-          /* @__PURE__ */ jsx64(chakra7.span, { noOfLines: 2, children: message })
+    return /* @__PURE__ */ jsxs30(Fragment11, { children: [
+      /* @__PURE__ */ jsx65(styles_default2, {}),
+      /* @__PURE__ */ jsxs30(Flex18, { justifyContent: "space-between", alignItems: "center", gap: 4, children: [
+        /* @__PURE__ */ jsxs30(Flex18, { alignItems: "center", children: [
+          icon && /* @__PURE__ */ jsx65(chakra7.span, { mr: 2, w: 4, h: 4, children: renderIcon(icon, "default") }),
+          /* @__PURE__ */ jsx65(chakra7.span, { noOfLines: 2, children: message })
         ] }),
-        link && /* @__PURE__ */ jsx64(
+        link && /* @__PURE__ */ jsx65(
           Link6,
           {
             href: link.url,
@@ -4808,9 +4925,9 @@ import { ToastContainer } from "react-toastify";
 
 // src/components/uploader/components/uploader.tsx
 import {
-  Box as Box29,
+  Box as Box30,
   Button as Button7,
-  Flex as Flex18,
+  Flex as Flex19,
   FormControl as FormControl4,
   FormLabel as FormLabel3,
   Heading as Heading2,
@@ -4821,7 +4938,7 @@ import {
   UnorderedList as UnorderedList2
 } from "@chakra-ui/react";
 import { Close as X, Plus } from "@ctlyst.id/internal-icon";
-import { useCallback as useCallback2, useEffect as useEffect2, useRef, useState as useState4 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect3, useRef, useState as useState4 } from "react";
 import { useDropzone } from "react-dropzone";
 
 // src/components/uploader/constants.ts
@@ -4851,7 +4968,7 @@ var concatList = (list) => {
 var formatValidationMessage = (extension) => `Foto harus dalam format ${concatList(extension.map((ext) => `.${ext}`))}.`;
 
 // src/components/uploader/components/uploader.tsx
-import { Fragment as Fragment11, jsx as jsx65, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx66, jsxs as jsxs31 } from "react/jsx-runtime";
 import { createElement } from "react";
 var Uploader = ({
   onHandleUploadFile,
@@ -4940,18 +5057,18 @@ var Uploader = ({
   });
   const renderHelperText = () => {
     if (Array.isArray(helperText)) {
-      return /* @__PURE__ */ jsx65(UnorderedList2, { pl: 2, fontSize: 12, color: "gray.600", "data-test-id": "CT_component_base-image-uploader_helperText", children: helperText.map((text2) => /* @__PURE__ */ jsx65(ListItem2, { children: text2 }, text2)) });
+      return /* @__PURE__ */ jsx66(UnorderedList2, { pl: 2, fontSize: 12, color: "gray.600", "data-test-id": "CT_component_base-image-uploader_helperText", children: helperText.map((text2) => /* @__PURE__ */ jsx66(ListItem2, { children: text2 }, text2)) });
     }
     return helperText;
   };
-  const renderErrorText = (text2) => /* @__PURE__ */ jsx65(Box29, { mb: 2, children: /* @__PURE__ */ jsx65(Text18, { textStyle: "text.xs", color: "danger.500", children: text2 }) });
+  const renderErrorText = (text2) => /* @__PURE__ */ jsx66(Box30, { mb: 2, children: /* @__PURE__ */ jsx66(Text18, { textStyle: "text.xs", color: "danger.500", children: text2 }) });
   const handleRemove = (e) => {
     e.stopPropagation();
     setFilePreview(void 0);
     onHandleUploadFile == null ? void 0 : onHandleUploadFile(null, null);
     acceptedFiles.pop();
   };
-  useEffect2(() => {
+  useEffect3(() => {
     if (value) {
       if (typeof value === "string") {
         setFilePreview(value);
@@ -4967,16 +5084,16 @@ var Uploader = ({
   const color = isDisabled ? "neutral.500" : "primary.500";
   const containerHeight = !isSmall ? "160px" : "120px";
   const cursorType = filePreview ? "initial" : "pointer";
-  return /* @__PURE__ */ jsxs30(FormControl4, { isRequired, children: [
+  return /* @__PURE__ */ jsxs31(FormControl4, { isRequired, children: [
     label && typeof label === "string" ? (
       // eslint-disable-next-line react/jsx-no-useless-fragment
-      /* @__PURE__ */ jsxs30(FormLabel3, { requiredIndicator: /* @__PURE__ */ jsx65(Fragment11, {}), fontSize: "text.sm", children: [
-        isRequired && /* @__PURE__ */ jsx65(RequiredIndicator2, { mr: 1, ml: 0 }),
+      /* @__PURE__ */ jsxs31(FormLabel3, { requiredIndicator: /* @__PURE__ */ jsx66(Fragment12, {}), fontSize: "text.sm", children: [
+        isRequired && /* @__PURE__ */ jsx66(RequiredIndicator2, { mr: 1, ml: 0 }),
         label
       ] })
     ) : label,
-    /* @__PURE__ */ jsxs30(
-      Flex18,
+    /* @__PURE__ */ jsxs31(
+      Flex19,
       {
         minH: containerHeight,
         maxW: !isSmall ? "full" : "120px",
@@ -4993,7 +5110,7 @@ var Uploader = ({
         ...props,
         ...getRootProps(),
         children: [
-          filePreview && isShowCloseButton && /* @__PURE__ */ jsx65(Box29, { position: "absolute", top: 1, right: 1, children: /* @__PURE__ */ jsx65(
+          filePreview && isShowCloseButton && /* @__PURE__ */ jsx66(Box30, { position: "absolute", top: 1, right: 1, children: /* @__PURE__ */ jsx66(
             Button7,
             {
               "data-test-id": `CT_component_base-image-uploader_remove-image${testId ? `_${testId}` : ""}`,
@@ -5008,17 +5125,17 @@ var Uploader = ({
               border: "none",
               zIndex: 1,
               onClick: handleRemove,
-              children: /* @__PURE__ */ jsx65(X, { size: 3, color: "white" })
+              children: /* @__PURE__ */ jsx66(X, { size: 3, color: "white" })
             }
           ) }),
-          filePreview && /* @__PURE__ */ jsx65(Box29, { w: "full", children: /* @__PURE__ */ jsx65(
-            Flex18,
+          filePreview && /* @__PURE__ */ jsx66(Box30, { w: "full", children: /* @__PURE__ */ jsx66(
+            Flex19,
             {
               position: "relative",
               "data-test-id": `CT_component_base-image-uploader_image-preview${testId ? `_${testId}` : ""}`,
               justify: "center",
               align: "center",
-              children: /* @__PURE__ */ jsx65(
+              children: /* @__PURE__ */ jsx66(
                 ChakraImage,
                 {
                   h: size2 === "lg" ? "120" : "100",
@@ -5029,18 +5146,18 @@ var Uploader = ({
               )
             }
           ) }),
-          !filePreview && /* @__PURE__ */ jsxs30(Fragment11, { children: [
-            /* @__PURE__ */ jsx65(
+          !filePreview && /* @__PURE__ */ jsxs31(Fragment12, { children: [
+            /* @__PURE__ */ jsx66(
               "input",
               {
                 "data-test-id": `CT_component_base-image-uploader_input-file${testId ? `_${testId}` : ""}`,
                 ...getInputProps()
               }
             ),
-            isDragActive ? /* @__PURE__ */ jsx65(Text18, { children: dragActiveText != null ? dragActiveText : messages.dragActive }) : /* @__PURE__ */ jsxs30(Flex18, { gap: 2, flexDirection: "column", alignItems: "center", color: isError ? "danger.500" : color, children: [
-              size2 === "sm" && /* @__PURE__ */ jsx65(Plus, { size: 6, color }),
-              /* @__PURE__ */ jsxs30(Box29, { children: [
-                !filePreview && /* @__PURE__ */ jsx65(
+            isDragActive ? /* @__PURE__ */ jsx66(Text18, { children: dragActiveText != null ? dragActiveText : messages.dragActive }) : /* @__PURE__ */ jsxs31(Flex19, { gap: 2, flexDirection: "column", alignItems: "center", color: isError ? "danger.500" : color, children: [
+              size2 === "sm" && /* @__PURE__ */ jsx66(Plus, { size: 6, color }),
+              /* @__PURE__ */ jsxs31(Box30, { children: [
+                !filePreview && /* @__PURE__ */ jsx66(
                   Heading2,
                   {
                     fontWeight: "400",
@@ -5050,14 +5167,14 @@ var Uploader = ({
                     children: uploadFileText && size2 === "lg" ? messages.uploadFile : "Upload"
                   }
                 ),
-                size2 === "lg" && /* @__PURE__ */ jsx65(Text18, { fontSize: 12, children: filePreview ? dragReplaceText != null ? dragReplaceText : messages.dragReplace : dragInActiveText != null ? dragInActiveText : messages.dragInActive })
+                size2 === "lg" && /* @__PURE__ */ jsx66(Text18, { fontSize: 12, children: filePreview ? dragReplaceText != null ? dragReplaceText : messages.dragReplace : dragInActiveText != null ? dragInActiveText : messages.dragInActive })
               ] })
             ] })
           ] })
         ]
       }
     ),
-    filePreview && !isSmall && /* @__PURE__ */ jsxs30(Flex18, { align: "center", justify: "center", my: 2, children: [
+    filePreview && !isSmall && /* @__PURE__ */ jsxs31(Flex19, { align: "center", justify: "center", my: 2, children: [
       /* @__PURE__ */ createElement(
         "input",
         {
@@ -5068,7 +5185,7 @@ var Uploader = ({
           "data-test-id": `CT_component_base-image-uploader_change-img${testId ? `_${testId}` : ""}`
         }
       ),
-      isShowReupload && /* @__PURE__ */ jsx65(
+      isShowReupload && /* @__PURE__ */ jsx66(
         Button7,
         {
           "data-test-id": `CT_component_base-image-uploader_change-img-btn${testId ? `_${testId}` : ""}`,
@@ -5997,7 +6114,7 @@ var variants3 = {
   outline: outline2,
   unstyled: unstyled2
 };
-var Input3 = defineMultiStyleConfig5({
+var Input4 = defineMultiStyleConfig5({
   baseStyle: baseStyle6,
   sizes: sizes2,
   variants: variants3,
@@ -6006,7 +6123,7 @@ var Input3 = defineMultiStyleConfig5({
     variant: "outline"
   }
 });
-var input_default = Input3;
+var input_default = Input4;
 
 // src/config/theme/components/loader.ts
 import { defineStyleConfig as defineStyleConfig4 } from "@chakra-ui/styled-system";
@@ -6785,9 +6902,9 @@ import { useMemo as useMemo5 } from "react";
 
 // src/provider/components/provider.tsx
 import axios from "axios";
-import { createContext as createContext2, useContext, useEffect as useEffect3, useMemo as useMemo4, useRef as useRef2 } from "react";
+import { createContext as createContext2, useContext, useEffect as useEffect4, useMemo as useMemo4, useRef as useRef2 } from "react";
 import { ToastContainer as ToastContainer2 } from "react-toastify";
-import { jsx as jsx66, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs32 } from "react/jsx-runtime";
 var ProviderContext = createContext2({
   instance: void 0
 });
@@ -6797,7 +6914,7 @@ var useInternalUI = () => {
 };
 var Provider = ({ children, config: config2, requestInterceptors, responseInterceptors }) => {
   const instanceRef = useRef2(axios.create(config2));
-  useEffect3(() => {
+  useEffect4(() => {
     requestInterceptors == null ? void 0 : requestInterceptors.forEach((interceptor) => {
       instanceRef.current.interceptors.request.use(interceptor);
     });
@@ -6806,8 +6923,8 @@ var Provider = ({ children, config: config2, requestInterceptors, responseInterc
     });
   }, [requestInterceptors, responseInterceptors]);
   const provider = useMemo4(() => ({ instance: instanceRef.current }), []);
-  return /* @__PURE__ */ jsxs31(ProviderContext.Provider, { value: provider, children: [
-    /* @__PURE__ */ jsx66(ToastContainer2, {}),
+  return /* @__PURE__ */ jsxs32(ProviderContext.Provider, { value: provider, children: [
+    /* @__PURE__ */ jsx67(ToastContainer2, {}),
     children
   ] });
 };
@@ -6864,7 +6981,7 @@ import {
 } from "@chakra-ui/react";
 
 // src/index.ts
-import { extendTheme, forwardRef as forwardRef12 } from "@chakra-ui/react";
+import { extendTheme, forwardRef as forwardRef13 } from "@chakra-ui/react";
 export {
   Accordion,
   AccordionButton,
@@ -7131,6 +7248,8 @@ export {
   Th2 as Th,
   Thead2 as Thead,
   ThemeTypings,
+  Time,
+  TimeInput2 as TimeInput,
   ToastContainer,
   Tooltip,
   Tr2 as Tr,
@@ -7177,7 +7296,7 @@ export {
   XMSLogo,
   createExtendTheme,
   extendTheme,
-  forwardRef12 as forwardRef,
+  forwardRef13 as forwardRef,
   getSelectAllCheckboxState,
   getTheme,
   isCellDisabled,