@ctlyst.id/internal-ui 3.3.3 → 3.3.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +148 -140
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +148 -140
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -35,16 +35,11 @@ var src_exports = {};
|
|
|
35
35
|
__export(src_exports, {
|
|
36
36
|
Accordion: () => import_react3.Accordion,
|
|
37
37
|
AccordionButton: () => import_react3.AccordionButton,
|
|
38
|
-
AccordionButtonProps: () => import_react3.AccordionButtonProps,
|
|
39
38
|
AccordionEye: () => AccordionEye,
|
|
40
39
|
AccordionIcon: () => import_react3.AccordionIcon,
|
|
41
|
-
AccordionIconProps: () => import_react3.AccordionIconProps,
|
|
42
40
|
AccordionIndicator: () => AccordionIndicator,
|
|
43
41
|
AccordionItem: () => import_react3.AccordionItem,
|
|
44
|
-
AccordionItemProps: () => import_react3.AccordionItemProps,
|
|
45
42
|
AccordionPanel: () => import_react3.AccordionPanel,
|
|
46
|
-
AccordionPanelProps: () => import_react3.AccordionPanelProps,
|
|
47
|
-
AccordionProps: () => import_react3.AccordionProps,
|
|
48
43
|
AccordionProvider: () => import_react3.AccordionProvider,
|
|
49
44
|
Alert: () => Alert,
|
|
50
45
|
AlertAction: () => AlertAction,
|
|
@@ -305,10 +300,6 @@ __export(src_exports, {
|
|
|
305
300
|
Tr: () => import_react79.Tr,
|
|
306
301
|
UnorderedList: () => import_react51.UnorderedList,
|
|
307
302
|
Uploader: () => uploader_default,
|
|
308
|
-
UseAccordionItemProps: () => import_react3.UseAccordionItemProps,
|
|
309
|
-
UseAccordionItemReturn: () => import_react3.UseAccordionItemReturn,
|
|
310
|
-
UseAccordionProps: () => import_react3.UseAccordionProps,
|
|
311
|
-
UseAccordionReturn: () => import_react3.UseAccordionReturn,
|
|
312
303
|
UseBreakpointOptions: () => import_react91.UseBreakpointOptions,
|
|
313
304
|
UseCheckboxGroupProps: () => import_react16.UseCheckboxGroupProps,
|
|
314
305
|
UseCheckboxGroupReturn: () => import_react16.UseCheckboxGroupReturn,
|
|
@@ -902,39 +893,12 @@ var Field = (props) => {
|
|
|
902
893
|
};
|
|
903
894
|
const helperColor = getHelperColor();
|
|
904
895
|
const justifyHelper = getJustifyContentHelper();
|
|
905
|
-
const getProperties = () => {
|
|
906
|
-
let outlineColor2 = "neutral.400";
|
|
907
|
-
let focusColor2 = "primary.500";
|
|
908
|
-
if (isError || isDisabled || isSuccess) {
|
|
909
|
-
if (isError) outlineColor2 = "danger.500";
|
|
910
|
-
else if (isSuccess) outlineColor2 = "success.500";
|
|
911
|
-
focusColor2 = outlineColor2;
|
|
912
|
-
}
|
|
913
|
-
return {
|
|
914
|
-
outlineColor: outlineColor2,
|
|
915
|
-
focusColor: focusColor2
|
|
916
|
-
};
|
|
917
|
-
};
|
|
918
|
-
const { outlineColor, focusColor } = getProperties();
|
|
919
896
|
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react14.FormControl, { isInvalid: isError, ...boxProps, children: [
|
|
920
897
|
label && (typeof label === "string" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react14.FormLabel, { mb: 1, fontSize: "text.sm", requiredIndicator: void 0, children: [
|
|
921
898
|
isRequired && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react14.Box, { as: "span", color: "danger.500", ml: 0, mr: 1, children: "*" }),
|
|
922
899
|
label
|
|
923
900
|
] }) : label),
|
|
924
|
-
|
|
925
|
-
import_react14.Box,
|
|
926
|
-
{
|
|
927
|
-
transition: "all 0.15s",
|
|
928
|
-
boxShadow: "none",
|
|
929
|
-
borderRadius: "sm",
|
|
930
|
-
border: "1px solid",
|
|
931
|
-
borderColor: outlineColor,
|
|
932
|
-
_focusWithin: {
|
|
933
|
-
borderColor: focusColor
|
|
934
|
-
},
|
|
935
|
-
children
|
|
936
|
-
}
|
|
937
|
-
),
|
|
901
|
+
children,
|
|
938
902
|
(isError && errorMessage || leftHelperText || rightHelperText) && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react14.Box, { display: "flex", width: "full", justifyContent: justifyHelper, children: [
|
|
939
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,
|
|
940
904
|
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) => {
|
|
|
1060
1024
|
isLoading,
|
|
1061
1025
|
...inputProps
|
|
1062
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
|
+
};
|
|
1063
1040
|
const [isShowPassword, setIsShowPassword] = (0, import_react22.useState)(false);
|
|
1064
1041
|
const inputType = (0, import_react22.useMemo)(() => {
|
|
1065
1042
|
return type === "password" && isShowPassword ? "text" : type;
|
|
@@ -1073,6 +1050,7 @@ var InputField = import_react22.default.forwardRef((props, ref) => {
|
|
|
1073
1050
|
const iconColor = (0, import_react22.useMemo)(() => {
|
|
1074
1051
|
return isDisabled ? "black.low" : "black.medium";
|
|
1075
1052
|
}, [isDisabled]);
|
|
1053
|
+
const { outlineColor, focusColor } = getProperties();
|
|
1076
1054
|
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1077
1055
|
field_default,
|
|
1078
1056
|
{
|
|
@@ -1083,80 +1061,92 @@ var InputField = import_react22.default.forwardRef((props, ref) => {
|
|
|
1083
1061
|
leftHelperText,
|
|
1084
1062
|
rightHelperText,
|
|
1085
1063
|
isRequired,
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
import_react21.InputGroup,
|
|
1064
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1065
|
+
import_react21.Box,
|
|
1089
1066
|
{
|
|
1090
|
-
|
|
1067
|
+
transition: "all 0.15s",
|
|
1068
|
+
boxShadow: "none",
|
|
1091
1069
|
borderRadius: "sm",
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
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
|
+
)
|
|
1160
1150
|
}
|
|
1161
1151
|
)
|
|
1162
1152
|
}
|
|
@@ -4790,9 +4780,9 @@ var import_internal_icon10 = require("@ctlyst.id/internal-icon");
|
|
|
4790
4780
|
var import_react85 = require("react");
|
|
4791
4781
|
|
|
4792
4782
|
// src/components/time-input/components/integration.tsx
|
|
4783
|
+
var import_timescape = require("@zamiru/timescape");
|
|
4784
|
+
var import_timescape2 = require("@zamiru/timescape");
|
|
4793
4785
|
var import_react83 = require("react");
|
|
4794
|
-
var import_timescape = require("timescape");
|
|
4795
|
-
var import_timescape2 = require("timescape");
|
|
4796
4786
|
var useTimescape = (options = {}) => {
|
|
4797
4787
|
var _a;
|
|
4798
4788
|
const { date, onChangeDate, ...rest } = options;
|
|
@@ -4933,6 +4923,20 @@ var TimeInput2 = (0, import_react84.forwardRef)(
|
|
|
4933
4923
|
}));
|
|
4934
4924
|
const rootProps = getRootProps();
|
|
4935
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();
|
|
4936
4940
|
return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react84.Box, { ...boxProps, ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
4937
4941
|
field_default,
|
|
4938
4942
|
{
|
|
@@ -4942,28 +4946,41 @@ var TimeInput2 = (0, import_react84.forwardRef)(
|
|
|
4942
4946
|
errorMessage,
|
|
4943
4947
|
isDisabled,
|
|
4944
4948
|
isSuccess,
|
|
4945
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime63.
|
|
4946
|
-
import_react84.
|
|
4949
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
4950
|
+
import_react84.Box,
|
|
4947
4951
|
{
|
|
4952
|
+
transition: "all 0.15s",
|
|
4953
|
+
boxShadow: "none",
|
|
4948
4954
|
borderRadius: "sm",
|
|
4949
|
-
|
|
4950
|
-
|
|
4951
|
-
|
|
4952
|
-
|
|
4953
|
-
|
|
4954
|
-
|
|
4955
|
-
|
|
4956
|
-
|
|
4957
|
-
|
|
4958
|
-
|
|
4959
|
-
|
|
4960
|
-
|
|
4961
|
-
|
|
4962
|
-
|
|
4963
|
-
|
|
4964
|
-
|
|
4965
|
-
|
|
4966
|
-
|
|
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
|
+
)
|
|
4967
4984
|
}
|
|
4968
4985
|
)
|
|
4969
4986
|
}
|
|
@@ -7110,16 +7127,11 @@ var import_react104 = require("@chakra-ui/react");
|
|
|
7110
7127
|
0 && (module.exports = {
|
|
7111
7128
|
Accordion,
|
|
7112
7129
|
AccordionButton,
|
|
7113
|
-
AccordionButtonProps,
|
|
7114
7130
|
AccordionEye,
|
|
7115
7131
|
AccordionIcon,
|
|
7116
|
-
AccordionIconProps,
|
|
7117
7132
|
AccordionIndicator,
|
|
7118
7133
|
AccordionItem,
|
|
7119
|
-
AccordionItemProps,
|
|
7120
7134
|
AccordionPanel,
|
|
7121
|
-
AccordionPanelProps,
|
|
7122
|
-
AccordionProps,
|
|
7123
7135
|
AccordionProvider,
|
|
7124
7136
|
Alert,
|
|
7125
7137
|
AlertAction,
|
|
@@ -7380,10 +7392,6 @@ var import_react104 = require("@chakra-ui/react");
|
|
|
7380
7392
|
Tr,
|
|
7381
7393
|
UnorderedList,
|
|
7382
7394
|
Uploader,
|
|
7383
|
-
UseAccordionItemProps,
|
|
7384
|
-
UseAccordionItemReturn,
|
|
7385
|
-
UseAccordionProps,
|
|
7386
|
-
UseAccordionReturn,
|
|
7387
7395
|
UseBreakpointOptions,
|
|
7388
7396
|
UseCheckboxGroupProps,
|
|
7389
7397
|
UseCheckboxGroupReturn,
|