@ctlyst.id/internal-ui 3.3.5 → 3.3.6

Sign up to get free protection for your applications and to get access to all the features.
Files changed (5) hide show
  1. package/dist/index.js +146 -120
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +146 -120
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -893,39 +893,12 @@ var Field = (props) => {
893
893
  };
894
894
  const helperColor = getHelperColor();
895
895
  const justifyHelper = getJustifyContentHelper();
896
- const getProperties = () => {
897
- let outlineColor2 = "neutral.400";
898
- let focusColor2 = "primary.500";
899
- if (isError || isDisabled || isSuccess) {
900
- if (isError) outlineColor2 = "danger.500";
901
- else if (isSuccess) outlineColor2 = "success.500";
902
- focusColor2 = outlineColor2;
903
- }
904
- return {
905
- outlineColor: outlineColor2,
906
- focusColor: focusColor2
907
- };
908
- };
909
- const { outlineColor, focusColor } = getProperties();
910
896
  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react14.FormControl, { isInvalid: isError, ...boxProps, children: [
911
897
  label && (typeof label === "string" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react14.FormLabel, { mb: 1, fontSize: "text.sm", requiredIndicator: void 0, children: [
912
898
  isRequired && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react14.Box, { as: "span", color: "danger.500", ml: 0, mr: 1, children: "*" }),
913
899
  label
914
900
  ] }) : label),
915
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
916
- import_react14.Box,
917
- {
918
- transition: "all 0.15s",
919
- boxShadow: "none",
920
- borderRadius: "sm",
921
- border: "1px solid",
922
- borderColor: outlineColor,
923
- _focusWithin: {
924
- borderColor: focusColor
925
- },
926
- children
927
- }
928
- ),
901
+ children,
929
902
  (isError && errorMessage || leftHelperText || rightHelperText) && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react14.Box, { display: "flex", width: "full", justifyContent: justifyHelper, children: [
930
903
  !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,
931
904
  rightHelperText && (typeof rightHelperText === "string" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react14.FormHelperText, { fontSize: "text.xs", color: helperColor, mt: 1, children: rightHelperText }) : rightHelperText)
@@ -1051,6 +1024,19 @@ var InputField = import_react22.default.forwardRef((props, ref) => {
1051
1024
  isLoading,
1052
1025
  ...inputProps
1053
1026
  } = props;
1027
+ const getProperties = () => {
1028
+ let outlineColor2 = "neutral.400";
1029
+ let focusColor2 = "primary.500";
1030
+ if (isError || isDisabled || isSuccess) {
1031
+ if (isError) outlineColor2 = "danger.500";
1032
+ else if (isSuccess) outlineColor2 = "success.500";
1033
+ focusColor2 = outlineColor2;
1034
+ }
1035
+ return {
1036
+ outlineColor: outlineColor2,
1037
+ focusColor: focusColor2
1038
+ };
1039
+ };
1054
1040
  const [isShowPassword, setIsShowPassword] = (0, import_react22.useState)(false);
1055
1041
  const inputType = (0, import_react22.useMemo)(() => {
1056
1042
  return type === "password" && isShowPassword ? "text" : type;
@@ -1064,6 +1050,7 @@ var InputField = import_react22.default.forwardRef((props, ref) => {
1064
1050
  const iconColor = (0, import_react22.useMemo)(() => {
1065
1051
  return isDisabled ? "black.low" : "black.medium";
1066
1052
  }, [isDisabled]);
1053
+ const { outlineColor, focusColor } = getProperties();
1067
1054
  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1068
1055
  field_default,
1069
1056
  {
@@ -1074,80 +1061,92 @@ var InputField = import_react22.default.forwardRef((props, ref) => {
1074
1061
  leftHelperText,
1075
1062
  rightHelperText,
1076
1063
  isRequired,
1077
- isDisabled,
1078
- children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
1079
- import_react21.InputGroup,
1064
+ children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1065
+ import_react21.Box,
1080
1066
  {
1081
- size: size2,
1067
+ transition: "all 0.15s",
1068
+ boxShadow: "none",
1082
1069
  borderRadius: "sm",
1083
- backgroundColor: isDisabled ? "neutral.300" : "white.high",
1084
- cursor: isDisabled ? "not-allowed" : "default",
1085
- children: [
1086
- addOnLeft,
1087
- /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1088
- import_react21.Input,
1089
- {
1090
- ref,
1091
- type: inputType,
1092
- value,
1093
- isDisabled,
1094
- isSuccess,
1095
- ...inputProps,
1096
- fontSize
1097
- }
1098
- ),
1099
- (withClear || isLoading || type === "password") && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
1100
- import_react21.Box,
1101
- {
1102
- "data-test-id": "CT_Component_ClearInput",
1103
- display: "flex",
1104
- alignItems: "center",
1105
- justifyContent: "center",
1106
- width: "16px",
1107
- mr: "10px",
1108
- children: [
1109
- withClear && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1110
- import_react21.Box,
1111
- {
1112
- display: "flex",
1113
- justifyContent: "center",
1114
- onClick: !isDisabled ? onClear : void 0,
1115
- cursor: isDisabled ? "not-allowed" : "pointer",
1116
- children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_internal_icon5.Close, { size: 4, color: iconColor })
1117
- }
1118
- ),
1119
- type === "password" && !isShowPassword && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1120
- import_react21.Box,
1121
- {
1122
- "data-test-id": "q2Bj2G4FlamXyHuRKMZ1Q",
1123
- onClick: () => {
1124
- if (!isDisabled) setIsShowPassword(true);
1125
- },
1126
- cursor: isDisabled ? "not-allowed" : "pointer",
1127
- display: "flex",
1128
- justifyContent: "center",
1129
- children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_internal_icon5.EyeOff, { size: 4, color: iconColor })
1130
- }
1131
- ),
1132
- type === "password" && isShowPassword && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1133
- import_react21.Box,
1134
- {
1135
- "data-test-id": "sfc2388bmeXBmdla45Ibk",
1136
- onClick: () => {
1137
- if (!isDisabled) setIsShowPassword(false);
1138
- },
1139
- cursor: isDisabled ? "not-allowed" : "pointer",
1140
- display: "flex",
1141
- justifyContent: "center",
1142
- children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_internal_icon5.Eye, { size: 4, color: iconColor })
1143
- }
1144
- ),
1145
- isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(loader_default, { size: "sm" })
1146
- ]
1147
- }
1148
- ),
1149
- addOnRight
1150
- ]
1070
+ border: "1px solid",
1071
+ borderColor: outlineColor,
1072
+ _focusWithin: {
1073
+ borderColor: focusColor
1074
+ },
1075
+ children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
1076
+ import_react21.InputGroup,
1077
+ {
1078
+ size: size2,
1079
+ borderRadius: "sm",
1080
+ backgroundColor: isDisabled ? "neutral.300" : "white.high",
1081
+ cursor: isDisabled ? "not-allowed" : "default",
1082
+ children: [
1083
+ addOnLeft,
1084
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1085
+ import_react21.Input,
1086
+ {
1087
+ ref,
1088
+ type: inputType,
1089
+ value,
1090
+ isDisabled,
1091
+ isSuccess,
1092
+ ...inputProps,
1093
+ fontSize
1094
+ }
1095
+ ),
1096
+ (withClear || isLoading || type === "password") && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
1097
+ import_react21.Box,
1098
+ {
1099
+ "data-test-id": "CT_Component_ClearInput",
1100
+ display: "flex",
1101
+ alignItems: "center",
1102
+ justifyContent: "center",
1103
+ width: "16px",
1104
+ mr: "10px",
1105
+ children: [
1106
+ withClear && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1107
+ import_react21.Box,
1108
+ {
1109
+ display: "flex",
1110
+ justifyContent: "center",
1111
+ onClick: !isDisabled ? onClear : void 0,
1112
+ cursor: isDisabled ? "not-allowed" : "pointer",
1113
+ children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_internal_icon5.Close, { size: 4, color: iconColor })
1114
+ }
1115
+ ),
1116
+ type === "password" && !isShowPassword && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1117
+ import_react21.Box,
1118
+ {
1119
+ "data-test-id": "q2Bj2G4FlamXyHuRKMZ1Q",
1120
+ onClick: () => {
1121
+ if (!isDisabled) setIsShowPassword(true);
1122
+ },
1123
+ cursor: isDisabled ? "not-allowed" : "pointer",
1124
+ display: "flex",
1125
+ justifyContent: "center",
1126
+ children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_internal_icon5.EyeOff, { size: 4, color: iconColor })
1127
+ }
1128
+ ),
1129
+ type === "password" && isShowPassword && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1130
+ import_react21.Box,
1131
+ {
1132
+ "data-test-id": "sfc2388bmeXBmdla45Ibk",
1133
+ onClick: () => {
1134
+ if (!isDisabled) setIsShowPassword(false);
1135
+ },
1136
+ cursor: isDisabled ? "not-allowed" : "pointer",
1137
+ display: "flex",
1138
+ justifyContent: "center",
1139
+ children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_internal_icon5.Eye, { size: 4, color: iconColor })
1140
+ }
1141
+ ),
1142
+ isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(loader_default, { size: "sm" })
1143
+ ]
1144
+ }
1145
+ ),
1146
+ addOnRight
1147
+ ]
1148
+ }
1149
+ )
1151
1150
  }
1152
1151
  )
1153
1152
  }
@@ -4924,6 +4923,20 @@ var TimeInput2 = (0, import_react84.forwardRef)(
4924
4923
  }));
4925
4924
  const rootProps = getRootProps();
4926
4925
  const hoursProps = getInputProps("hours");
4926
+ const getProperties = () => {
4927
+ let outlineColor2 = "neutral.400";
4928
+ let focusColor2 = "primary.500";
4929
+ if (isError || isDisabled || isSuccess) {
4930
+ if (isError) outlineColor2 = "danger.500";
4931
+ else if (isSuccess) outlineColor2 = "success.500";
4932
+ focusColor2 = outlineColor2;
4933
+ }
4934
+ return {
4935
+ outlineColor: outlineColor2,
4936
+ focusColor: focusColor2
4937
+ };
4938
+ };
4939
+ const { outlineColor, focusColor } = getProperties();
4927
4940
  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react84.Box, { ...boxProps, ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
4928
4941
  field_default,
4929
4942
  {
@@ -4933,28 +4946,41 @@ var TimeInput2 = (0, import_react84.forwardRef)(
4933
4946
  errorMessage,
4934
4947
  isDisabled,
4935
4948
  isSuccess,
4936
- children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
4937
- import_react84.InputGroup,
4949
+ children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
4950
+ import_react84.Box,
4938
4951
  {
4952
+ transition: "all 0.15s",
4953
+ boxShadow: "none",
4939
4954
  borderRadius: "sm",
4940
- backgroundColor: isDisabled ? "neutral.300" : "white.high",
4941
- cursor: isDisabled ? "not-allowed" : "default",
4942
- alignItems: "center",
4943
- gap: 3,
4944
- children: [
4945
- /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_react84.Flex, { gap: 1, width: "100%", alignItems: "center", pl: 2, children: [
4946
- /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(InputTimeArea, { ...hoursProps }),
4947
- /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { children: ":" }),
4948
- /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(InputTimeArea, { ...getInputProps("minutes") }),
4949
- seconds && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
4950
- /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { children: ":" }),
4951
- /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(InputTimeArea, { ...getInputProps("seconds") })
4952
- ] }),
4953
- options.hour12 && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react84.Input, { p: 0, ...getInputProps("am/pm") })
4954
- ] }),
4955
- /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_internal_icon10.Clock, { color: "neutral.400" }),
4956
- addOnRight
4957
- ]
4955
+ border: "1px solid",
4956
+ borderColor: outlineColor,
4957
+ _focusWithin: {
4958
+ borderColor: focusColor
4959
+ },
4960
+ children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
4961
+ import_react84.InputGroup,
4962
+ {
4963
+ borderRadius: "sm",
4964
+ backgroundColor: isDisabled ? "neutral.300" : "white.high",
4965
+ cursor: isDisabled ? "not-allowed" : "default",
4966
+ alignItems: "center",
4967
+ gap: 3,
4968
+ children: [
4969
+ /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_react84.Flex, { gap: 1, width: "100%", alignItems: "center", pl: 2, children: [
4970
+ /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(InputTimeArea, { ...hoursProps }),
4971
+ /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { children: ":" }),
4972
+ /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(InputTimeArea, { ...getInputProps("minutes") }),
4973
+ seconds && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
4974
+ /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { children: ":" }),
4975
+ /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(InputTimeArea, { ...getInputProps("seconds") })
4976
+ ] }),
4977
+ options.hour12 && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react84.Input, { p: 0, ...getInputProps("am/pm") })
4978
+ ] }),
4979
+ /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_internal_icon10.Clock, { color: "neutral.400" }),
4980
+ addOnRight
4981
+ ]
4982
+ }
4983
+ )
4958
4984
  }
4959
4985
  )
4960
4986
  }