@ctlyst.id/internal-ui 2.1.16 → 2.1.18

package/dist/index.mjs

@@ -590,11 +590,21 @@ import { FiMinus, FiPlus } from "react-icons/fi";
 // src/components/form/components/input-addon.tsx
 import { InputLeftAddon, InputRightAddon } from "@chakra-ui/react";
 import { jsx as jsx19 } from "react/jsx-runtime";
-var InputAddonLeft = ({ children }) => {
-  return /* @__PURE__ */ jsx19(InputLeftAddon, { backgroundColor: "neutral.200", px: 3, py: 2.5, style: { border: 0, marginInlineEnd: 0 }, children });
+var InputAddonLeft = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx19(InputLeftAddon, { backgroundColor: "neutral.200", px: 3, py: 2.5, style: { border: 0, marginInlineEnd: 0 }, ...props, children });
 };
-var InputAddonRight = ({ children }) => {
-  return /* @__PURE__ */ jsx19(InputRightAddon, { backgroundColor: "neutral.200", px: 3, py: 2.5, style: { border: 0, marginInlineStart: 0 }, children });
+var InputAddonRight = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx19(
+    InputRightAddon,
+    {
+      backgroundColor: "neutral.200",
+      px: 3,
+      py: 2.5,
+      style: { border: 0, marginInlineStart: 0 },
+      ...props,
+      children
+    }
+  );
 };
 
 // src/components/form/components/input-element.tsx
@@ -605,40 +615,6 @@ import { InputRightElement } from "@chakra-ui/react";
 import { Box as Box9, Input as ChakraInput, InputGroup } from "@chakra-ui/react";
 import { Close as Close3, Eye as Eye2, EyeOff } from "@ctlyst.id/internal-icon";
 import React3, { useMemo as useMemo2, useState } from "react";
-
-// src/components/form/styles/input-field.ts
-import { defineStyle } from "@chakra-ui/react";
-var getProperties = (props) => {
-  const { isError, isDisabled, isSuccess } = props;
-  let outlineColor = "neutral.400";
-  let focusColor = "primary.500";
-  if (isError || isDisabled || isSuccess) {
-    if (isError) outlineColor = "danger.500";
-    else if (isSuccess) outlineColor = "success.500";
-    focusColor = outlineColor;
-  }
-  return {
-    outlineColor,
-    focusColor
-  };
-};
-var getWrapperStyle = (props) => {
-  const { outlineColor, focusColor } = getProperties(props);
-  const style = {
-    border: "1px solid",
-    borderColor: outlineColor,
-    borderRadius: "sm",
-    transition: "all 0.15s",
-    boxShadow: "none",
-    _focusWithin: {
-      borderColor: focusColor
-    }
-  };
-  return defineStyle(style);
-};
-var input_field_default = getWrapperStyle;
-
-// src/components/form/components/input-field.tsx
 import { jsx as jsx20, jsxs as jsxs6 } from "react/jsx-runtime";
 var InputField = React3.forwardRef((props, ref) => {
   const {
@@ -660,7 +636,19 @@ var InputField = React3.forwardRef((props, ref) => {
     isLoading,
     ...inputProps
   } = props;
-  const wrapperStyle = input_field_default(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 = useMemo2(() => {
     return type === "password" && isShowPassword ? "text" : type;
@@ -674,6 +662,7 @@ var InputField = React3.forwardRef((props, ref) => {
   const iconColor = useMemo2(() => {
     return isDisabled ? "black.low" : "black.medium";
   }, [isDisabled]);
+  const { outlineColor, focusColor } = getProperties();
   return /* @__PURE__ */ jsx20(
     field_default,
     {
@@ -684,7 +673,7 @@ var InputField = React3.forwardRef((props, ref) => {
       leftHelperText,
       rightHelperText,
       isRequired,
-      children: /* @__PURE__ */ jsx20(Box9, { __css: wrapperStyle, children: /* @__PURE__ */ jsxs6(
+      children: /* @__PURE__ */ jsx20(Box9, { children: /* @__PURE__ */ jsxs6(
         InputGroup,
         {
           size: size2,
@@ -701,6 +690,14 @@ var InputField = React3.forwardRef((props, ref) => {
                 value,
                 isDisabled,
                 isSuccess,
+                transition: "all 0.15s",
+                boxShadow: "none",
+                borderRadius: "sm",
+                border: "1px solid",
+                borderColor: outlineColor,
+                _focusWithin: {
+                  borderColor: focusColor
+                },
                 ...inputProps,
                 fontSize
               }
@@ -762,6 +759,7 @@ var InputField = React3.forwardRef((props, ref) => {
     }
   );
 });
+InputField.displayName = "InputField";
 InputField.defaultProps = {
   addOnLeft: void 0,
   addOnRight: void 0,
@@ -769,7 +767,7 @@ InputField.defaultProps = {
   isLoading: void 0,
   onClear: void 0
 };
-var input_field_default2 = InputField;
+var input_field_default = InputField;
 
 // src/components/form/components/textarea.tsx
 import { Box as Box10, Textarea as ChakraTextarea } from "@chakra-ui/react";
@@ -853,7 +851,7 @@ var Counter = ({
         }
       ),
       /* @__PURE__ */ jsx22(
-        input_field_default2,
+        input_field_default,
         {
           "data-test-id": "CT_Component_Counter_input",
           value,
@@ -866,8 +864,7 @@ var Counter = ({
           onChange: handleChange,
           isReadOnly,
           width: 12,
-          type: "number",
-          borderColor: isError ? "danger.500" : "neutral.200"
+          type: "number"
         }
       ),
       /* @__PURE__ */ jsx22(
@@ -1196,7 +1193,6 @@ import {
   FormErrorMessage as FormErrorMessage3,
   FormHelperText as FormHelperText3,
   FormLabel as FormLabel3,
-  Input as Input2,
   InputGroup as InputGroup4,
   InputRightElement as InputRightElement3
 } from "@chakra-ui/react";
@@ -2069,7 +2065,6 @@ var Datepicker = ({
   var _a;
   const selected = value ? new Date(value) : void 0;
   const dateFormat = ((_a = props.dateFormat) != null ? _a : withTime) ? "yyyy-MM-dd HH:mm" : "yyyy-MM-dd";
-  const wrapperStyle = input_field_default({});
   const getTimeProps = () => {
     if (!withTime) return {};
     return {
@@ -2086,7 +2081,7 @@ var Datepicker = ({
         id,
         name,
         selected,
-        customInput: /* @__PURE__ */ jsx26(Input2, { autoComplete: "off", ...wrapperStyle }),
+        customInput: /* @__PURE__ */ jsx26(input_field_default, { autoComplete: "off" }),
         dateFormat,
         showPopperArrow: false,
         calendarClassName: cx8({ inline: props.inline }),
@@ -2127,7 +2122,7 @@ Datepicker.defaultProps = {
 var datepicker_default = Datepicker;
 
 // src/components/datepicker/components/datepicker-month/datepicker-month.tsx
-import { Box as Box13, Input as Input3 } from "@chakra-ui/react";
+import { Box as Box13, Input as Input2 } from "@chakra-ui/react";
 import { css as css2 } from "@emotion/react";
 import React7 from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
@@ -2149,7 +2144,7 @@ var DatePickerMonth = ({ onChange, min, max, ...props }) => {
         }
       `,
       children: /* @__PURE__ */ jsx27(
-        Input3,
+        Input2,
         {
           "data-test-id": props["data-test-id"],
           type: "date",
@@ -3980,12 +3975,12 @@ __export(components_exports, {
 
 // src/config/theme/components/accordion.ts
 import { accordionAnatomy as parts } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers, defineStyle as defineStyle2 } from "@chakra-ui/styled-system";
+import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/styled-system";
 var { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(parts.keys);
-var baseStyleContainer = defineStyle2({
+var baseStyleContainer = defineStyle({
   border: "none"
 });
-var baseStyleButton = defineStyle2({
+var baseStyleButton = defineStyle({
   height: 14,
   transitionProperty: "common",
   transitionDuration: "normal",
@@ -4014,12 +4009,12 @@ var baseStyleButton = defineStyle2({
     visibility: "hidden"
   }
 });
-var baseStylePanel = defineStyle2({
+var baseStylePanel = defineStyle({
   pt: "2",
   px: "4",
   pb: "5"
 });
-var baseStyleIcon = defineStyle2({
+var baseStyleIcon = defineStyle({
   fontSize: "1.25em"
 });
 var baseStyle = definePartsStyle({
@@ -4028,14 +4023,14 @@ var baseStyle = definePartsStyle({
   panel: baseStylePanel,
   icon: baseStyleIcon
 });
-var collapseStyleButton = defineStyle2({
+var collapseStyleButton = defineStyle({
   height: 13,
   borderRadius: "sm",
   borderWidth: "1px",
   borderStyle: "solid",
   borderColor: "neutral.300"
 });
-var collapseStylePanel = defineStyle2({
+var collapseStylePanel = defineStyle({
   py: 0,
   pr: 0,
   pl: 12,
@@ -4658,8 +4653,8 @@ var Chips2 = defineStyleConfig3({
 var chips_default2 = Chips2;
 
 // src/config/theme/components/form-label.ts
-import { defineStyle as defineStyle3, defineStyleConfig as defineStyleConfig4 } from "@chakra-ui/styled-system";
-var baseStyle4 = defineStyle3({
+import { defineStyle as defineStyle2, defineStyleConfig as defineStyleConfig4 } from "@chakra-ui/styled-system";
+var baseStyle4 = defineStyle2({
   fontSize: "field.sm",
   fontWeight: "normal",
   marginEnd: 1,
@@ -4672,7 +4667,7 @@ var form_label_default = FormLabel4;
 
 // src/config/theme/components/input.ts
 import { inputAnatomy as parts3 } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers4, defineStyle as defineStyle4 } from "@chakra-ui/styled-system";
+import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers4, defineStyle as defineStyle3 } from "@chakra-ui/styled-system";
 import { mode } from "@chakra-ui/theme-tools";
 var { definePartsStyle: definePartsStyle4, defineMultiStyleConfig: defineMultiStyleConfig4 } = createMultiStyleConfigHelpers4(parts3.keys);
 var baseStyle5 = definePartsStyle4({
@@ -4701,19 +4696,19 @@ var baseStyle5 = definePartsStyle4({
   }
 });
 var size = {
-  lg: defineStyle4({
+  lg: defineStyle3({
     fontSize: "text.lg",
     h: 12,
     borderRadius: "sm"
   }),
-  md: defineStyle4({
+  md: defineStyle3({
     fontSize: "text.md",
     h: 10,
     borderRadius: "sm"
   }),
-  sm: defineStyle4({
+  sm: defineStyle3({
     fontSize: "text.sm",
-    h: 9,
+    h: 9.5,
     borderRadius: "sm"
   })
 };
@@ -4737,6 +4732,9 @@ var outline = definePartsStyle4((props) => {
     outline: 0,
     bg: mode("white", "inherit")(props),
     color: mode("inherit", "white")(props),
+    _hover: {
+      borderColor: mode("neutral.400", "inherit")(props)
+    },
     _invalid: {
       boxShadow: "none"
     },
@@ -4765,7 +4763,7 @@ var variants3 = {
   outline,
   unstyled: unstyled2
 };
-var Input4 = defineMultiStyleConfig4({
+var Input3 = defineMultiStyleConfig4({
   baseStyle: baseStyle5,
   sizes: sizes2,
   variants: variants3,
@@ -4774,7 +4772,7 @@ var Input4 = defineMultiStyleConfig4({
     variant: "outline"
   }
 });
-var input_default = Input4;
+var input_default = Input3;
 
 // src/config/theme/components/loader.ts
 import { defineStyleConfig as defineStyleConfig5 } from "@chakra-ui/styled-system";
@@ -5012,7 +5010,7 @@ var radio_default = Radio2;
 
 // src/config/theme/components/switch.ts
 import { switchAnatomy as parts4 } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers6, defineStyle as defineStyle5 } from "@chakra-ui/styled-system";
+import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers6, defineStyle as defineStyle4 } from "@chakra-ui/styled-system";
 import { calc, cssVar as cssVar2 } from "@chakra-ui/theme-tools";
 var { defineMultiStyleConfig: defineMultiStyleConfig6, definePartsStyle: definePartsStyle6 } = createMultiStyleConfigHelpers6(parts4.keys);
 var $width = cssVar2("switch-track-width");
@@ -5020,7 +5018,7 @@ var $height = cssVar2("switch-track-height");
 var $diff = cssVar2("switch-track-diff");
 var diffValue = calc.subtract($width, $height);
 var $translateX = cssVar2("switch-thumb-x");
-var baseStyleThumb = defineStyle5({
+var baseStyleThumb = defineStyle4({
   bg: "white",
   transitionProperty: "transform",
   transitionDuration: "normal",
@@ -5098,7 +5096,7 @@ var switch_default2 = Switch3;
 
 // src/config/theme/components/table.ts
 import { tableAnatomy as parts5 } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers7, defineStyle as defineStyle6 } from "@chakra-ui/styled-system";
+import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers7, defineStyle as defineStyle5 } from "@chakra-ui/styled-system";
 import { mode as mode2 } from "@chakra-ui/theme-tools";
 var { defineMultiStyleConfig: defineMultiStyleConfig7, definePartsStyle: definePartsStyle7 } = createMultiStyleConfigHelpers7(parts5.keys);
 var baseStyle8 = definePartsStyle7({
@@ -5158,7 +5156,7 @@ var baseStyle8 = definePartsStyle7({
     fontWeight: "medium"
   }
 });
-var numericStyles = defineStyle6({
+var numericStyles = defineStyle5({
   "&[data-is-numeric=true]": {
     textAlign: "end"
   }
@@ -5231,7 +5229,7 @@ var variantStripe = definePartsStyle7((props) => {
 var variants5 = {
   simple: variantSimple,
   striped: variantStripe,
-  unstyled: defineStyle6({})
+  unstyled: defineStyle5({})
 };
 var sizes4 = {
   sm: definePartsStyle7({
@@ -5338,7 +5336,7 @@ var tabsTheme = defineMultiStyleConfig8({
 var tabs_default = tabsTheme;
 
 // src/config/theme/components/textarea.ts
-import { defineStyle as defineStyle7, defineStyleConfig as defineStyleConfig7 } from "@chakra-ui/react";
+import { defineStyle as defineStyle6, defineStyleConfig as defineStyleConfig7 } from "@chakra-ui/react";
 var getProps = (props) => {
   const { isError, isSuccess, isDisabled } = props;
   let borderColor = "neutral.400";
@@ -5358,7 +5356,7 @@ var getProps = (props) => {
     borderColor
   };
 };
-var outline2 = defineStyle7((props) => {
+var outline2 = defineStyle6((props) => {
   const { focusBorderColor, borderColor } = getProps(props);
   return {
     background: "white.high",
@@ -5663,7 +5661,7 @@ export {
   InputAddonRight,
   InputLeftElement as InputElementLeft,
   InputRightElement as InputElementRight,
-  input_field_default2 as InputField,
+  input_field_default as InputField,
   InputGroup2 as InputGroup,
   InputGroupProps,
   InputLeftAddon2 as InputLeftAddon,