@rahmatsaputra-my-id/react-js-library 0.0.63 → 0.0.64

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.
Files changed (6) hide show
  1. package/dist/index.d.ts +5 -0
  2. package/dist/index.es.js +381 -48
  3. package/dist/index.es.js.map +1 -1
  4. package/dist/index.js +385 -47
  5. package/dist/index.js.map +1 -1
  6. package/package.json +1 -1
package/dist/index.es.js CHANGED
@@ -93,7 +93,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
93
93
  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
94
94
  };
95
95
 
96
- var styles$f = {
96
+ var styles$k = {
97
97
  backdrop: {
98
98
  position: 'fixed',
99
99
  top: 0,
@@ -186,10 +186,10 @@ var BottomSheet = function (_a) {
186
186
  }, [visible, onClose]);
187
187
  if (!visible)
188
188
  return null;
189
- return ReactDOM.createPortal(jsx("div", __assign({ style: styles$f.backdrop, onClick: onClose }, { children: jsxs("div", __assign({ style: __assign(__assign({}, styles$f.sheet), { paddingBottom: paddingBottom }), onClick: function (e) { return e.stopPropagation(); } }, { children: [jsxs("div", __assign({ style: styles$f.header }, { children: [jsx("span", __assign({ style: styles$f.title }, { children: title })), jsx("button", __assign({ style: styles$f.closeButton, onClick: onClose }, { children: "\u00D7" }))] })), jsx("div", __assign({ style: styles$f.content }, { children: children }))] })) })), document.body);
189
+ return ReactDOM.createPortal(jsx("div", __assign({ style: styles$k.backdrop, onClick: onClose }, { children: jsxs("div", __assign({ style: __assign(__assign({}, styles$k.sheet), { paddingBottom: paddingBottom }), onClick: function (e) { return e.stopPropagation(); } }, { children: [jsxs("div", __assign({ style: styles$k.header }, { children: [jsx("span", __assign({ style: styles$k.title }, { children: title })), jsx("button", __assign({ style: styles$k.closeButton, onClick: onClose }, { children: "\u00D7" }))] })), jsx("div", __assign({ style: styles$k.content }, { children: children }))] })) })), document.body);
190
190
  };
191
191
 
192
- var styles$e = {
192
+ var styles$j = {
193
193
  content: {
194
194
  display: 'flex',
195
195
  cursor: 'pointer',
@@ -204,7 +204,7 @@ var TouchableOpacity = function (_a) {
204
204
  onPress(event);
205
205
  }
206
206
  };
207
- return (jsx("div", __assign({ onClick: handleOnPress, style: __assign(__assign(__assign({}, styles$e.content), style), { opacity: disabled ? 0.5 : 1, pointerEvents: disabled ? 'none' : 'auto' }) }, props, { children: children })));
207
+ return (jsx("div", __assign({ onClick: handleOnPress, style: __assign(__assign(__assign({}, styles$j.content), style), { opacity: disabled ? 0.5 : 1, pointerEvents: disabled ? 'none' : 'auto' }) }, props, { children: children })));
208
208
  };
209
209
 
210
210
  var Colors = {
@@ -617,7 +617,7 @@ var CameraModal = function (_a) {
617
617
  return ReactDOM.createPortal(jsxs("div", __assign({ style: cameraStyles$1.overlay }, { children: [capturedImage ? (jsxs(Fragment, { children: [jsx("img", { src: capturedImage, alt: "Captured", style: cameraStyles$1.previewImage }), jsx(TouchableOpacity, __assign({ onPress: handleUsePhoto, style: cameraStyles$1.floatingBottomButtons }, { children: jsx(View, __assign({ style: cameraStyles$1.captureButton }, { children: jsx(View, __assign({ style: cameraStyles$1.innerButton }, { children: jsx(Images, { src: Icons.send, style: cameraStyles$1.sendButton }) })) })) }))] })) : (jsxs(Fragment, { children: [jsx("video", { ref: videoRef, autoPlay: true, playsInline: true, style: __assign(__assign({}, cameraStyles$1.video), { transform: isFrontCamera ? 'scaleX(-1)' : 'none' }) }), jsx("canvas", { ref: canvasRef, style: { display: 'none' } }), isCameraReady && (jsxs(Fragment, { children: [jsx(TouchableOpacity, __assign({ onPress: handleCapture, style: cameraStyles$1.floatingBottomButtons }, { children: jsx(View, __assign({ style: cameraStyles$1.captureButton }, { children: jsx(View, { style: cameraStyles$1.innerButton }) })) })), hasRearCamera && (jsx(TouchableOpacity, __assign({ onPress: toggleCamera, style: cameraStyles$1.floatingBottomRotateButtons }, { children: jsx(View, __assign({ style: cameraStyles$1.captureRotateButton }, { children: jsx(Images, { src: Icons.rotate, style: cameraStyles$1.rotateButton }) })) })))] }))] })), jsx("button", __assign({ onClick: handleOnPressClose, style: cameraStyles$1.closeButton }, { children: "\u00D7" }))] })), document.body);
618
618
  };
619
619
 
620
- var styles$d = {
620
+ var styles$i = {
621
621
  backdrop: {
622
622
  position: 'fixed',
623
623
  top: 0,
@@ -670,7 +670,7 @@ var styles$d = {
670
670
  },
671
671
  };
672
672
 
673
- var styles$c = {
673
+ var styles$h = {
674
674
  h1: {
675
675
  fontSize: 32,
676
676
  },
@@ -849,7 +849,7 @@ var styles$c = {
849
849
 
850
850
  var Text = function (_a) {
851
851
  var _b = _a.bottom, bottom = _b === void 0 ? 0 : _b, _c = _a.center, center = _c === void 0 ? false : _c, children = _a.children, _d = _a.color, color = _d === void 0 ? Colors.black : _d, _e = _a.left, left = _e === void 0 ? 0 : _e, _f = _a.right, right = _f === void 0 ? 0 : _f, _g = _a.style, style = _g === void 0 ? {} : _g, _h = _a.top, top = _h === void 0 ? 0 : _h, _j = _a.type, type = _j === void 0 ? 'normal_16' : _j, props = __rest(_a, ["bottom", "center", "children", "color", "left", "right", "style", "top", "type"]);
852
- return (jsx(Fragment, { children: jsx("p", __assign({ style: __assign(__assign({ marginTop: top, marginRight: right, marginBottom: bottom, marginLeft: left, color: color, textAlign: center ? 'center' : 'left' }, styles$c[type]), style) }, props, { children: children })) }));
852
+ return (jsx(Fragment, { children: jsx("p", __assign({ style: __assign(__assign({ marginTop: top, marginRight: right, marginBottom: bottom, marginLeft: left, color: color, textAlign: center ? 'center' : 'left' }, styles$h[type]), style) }, props, { children: children })) }));
853
853
  };
854
854
 
855
855
  var BottomSheetPhoto = function (_a) {
@@ -931,10 +931,10 @@ var BottomSheetPhoto = function (_a) {
931
931
  return (jsxs(Fragment, { children: [jsx("input", { type: "file", accept: ".png,.jpg,.jpeg", ref: fileInputRef, onChange: handleFileChange, style: { display: 'none' } }), cameraVisible && (jsx(CameraModal, { onClose: function () { return setCameraVisible(false); }, onCapture: function (base64) {
932
932
  onUploadBase64 === null || onUploadBase64 === void 0 ? void 0 : onUploadBase64(base64, null);
933
933
  } })), visible &&
934
- ReactDOM.createPortal(jsx("div", __assign({ style: styles$d.backdrop, onClick: onClose }, { children: jsxs("div", __assign({ style: __assign(__assign({}, styles$d.sheet), { paddingBottom: paddingBottom }), onClick: function (e) { return e.stopPropagation(); } }, { children: [jsxs("div", __assign({ style: styles$d.header }, { children: [jsx("span", __assign({ style: styles$d.title }, { children: title })), jsx("button", __assign({ style: styles$d.closeButton, onClick: onClose }, { children: "\u00D7" }))] })), jsx("div", __assign({ style: styles$d.content }, { children: bottomSheetData.map(function (val, idx) { return (jsx(TouchableOpacity, __assign({ onPress: val.onPress, style: styles$d.contentBottomSheet }, { children: jsx(Text, { children: val.title }) }), idx)); }) }))] })) })), document.body)] }));
934
+ ReactDOM.createPortal(jsx("div", __assign({ style: styles$i.backdrop, onClick: onClose }, { children: jsxs("div", __assign({ style: __assign(__assign({}, styles$i.sheet), { paddingBottom: paddingBottom }), onClick: function (e) { return e.stopPropagation(); } }, { children: [jsxs("div", __assign({ style: styles$i.header }, { children: [jsx("span", __assign({ style: styles$i.title }, { children: title })), jsx("button", __assign({ style: styles$i.closeButton, onClick: onClose }, { children: "\u00D7" }))] })), jsx("div", __assign({ style: styles$i.content }, { children: bottomSheetData.map(function (val, idx) { return (jsx(TouchableOpacity, __assign({ onPress: val.onPress, style: styles$i.contentBottomSheet }, { children: jsx(Text, { children: val.title }) }), idx)); }) }))] })) })), document.body)] }));
935
935
  };
936
936
 
937
- var styles$b = {
937
+ var styles$g = {
938
938
  content: {
939
939
  display: 'flex',
940
940
  justifyContent: 'center',
@@ -945,7 +945,7 @@ var styles$b = {
945
945
  };
946
946
 
947
947
  var isMobileDisplay = window.innerWidth <= 768;
948
- var styles$a = {
948
+ var styles$f = {
949
949
  content: {
950
950
  display: 'flex',
951
951
  justifyContent: 'center',
@@ -1012,9 +1012,9 @@ styleInject(css_248z);
1012
1012
  var LoadingSpinner = function (_a) {
1013
1013
  var _b = _a.loadingType, loadingType = _b === void 0 ? false : _b, _c = _a.loadingIcon, loadingIcon = _c === void 0 ? '' : _c;
1014
1014
  var renderSpinnerComponent = function () { return jsx("div", { className: "loading-spinner" }); };
1015
- var renderSpinnerSection = function () { return (jsx(View, __assign({ style: styles$a.loadingSpinnerSectionContainer }, { children: jsx("div", { className: "loading-spinner-section" }) }))); };
1016
- var renderSpinnerSectionS = function () { return (jsx(View, __assign({ style: styles$a.loadingSpinnerSectionContainer }, { children: jsx("div", { className: "loading-spinner-section-s" }) }))); };
1017
- var renderSpinnerPage = function () { return (jsx(View, __assign({ style: styles$a.loadingSpinnerPageContainer }, { children: jsxs(View, __assign({ style: styles$a.loadingSpinnerPageContent }, { children: [jsx("div", { className: "loading-spinner-pages" }), loadingIcon ? (jsx("img", { style: styles$a.loadingIcon, src: loadingIcon, alt: '' })) : null] })) }))); };
1015
+ var renderSpinnerSection = function () { return (jsx(View, __assign({ style: styles$f.loadingSpinnerSectionContainer }, { children: jsx("div", { className: "loading-spinner-section" }) }))); };
1016
+ var renderSpinnerSectionS = function () { return (jsx(View, __assign({ style: styles$f.loadingSpinnerSectionContainer }, { children: jsx("div", { className: "loading-spinner-section-s" }) }))); };
1017
+ var renderSpinnerPage = function () { return (jsx(View, __assign({ style: styles$f.loadingSpinnerPageContainer }, { children: jsxs(View, __assign({ style: styles$f.loadingSpinnerPageContent }, { children: [jsx("div", { className: "loading-spinner-pages" }), loadingIcon ? (jsx("img", { style: styles$f.loadingIcon, src: loadingIcon, alt: '' })) : null] })) }))); };
1018
1018
  return (jsx(Fragment, { children: loadingType === 'page'
1019
1019
  ? renderSpinnerPage()
1020
1020
  : loadingType === 'section'
@@ -1032,10 +1032,35 @@ var Button = function (_a) {
1032
1032
  ? 'transparent'
1033
1033
  : backgroundColor
1034
1034
  ? backgroundColor
1035
- : Colors.black, border: outlineColor ? '1px solid rgba(0, 0, 0, 1)' : 'none', borderRadius: borderRadius, color: outlineColor ? outlineColor : Colors.white, fontSize: size, fontWeight: bold && 'bold', marginBottom: bottom, marginLeft: left, marginRight: right, marginTop: top, outline: !outlineColor && 'none', padding: padding, textAlign: center ? 'center' : 'left' }, style), styles$b.content), disabled: isLoading || disabled, onClick: onPress, type: 'submit' }, props, { children: [!isLoading ? label : null, isLoading && jsx(LoadingSpinner, { loadingType: false })] })) }));
1035
+ : Colors.black, border: outlineColor ? '1px solid rgba(0, 0, 0, 1)' : 'none', borderRadius: borderRadius, color: outlineColor ? outlineColor : Colors.white, fontSize: size, fontWeight: bold && 'bold', marginBottom: bottom, marginLeft: left, marginRight: right, marginTop: top, outline: !outlineColor && 'none', padding: padding, textAlign: center ? 'center' : 'left' }, style), styles$g.content), disabled: isLoading || disabled, onClick: onPress, type: 'submit' }, props, { children: [!isLoading ? label : null, isLoading && jsx(LoadingSpinner, { loadingType: false })] })) }));
1036
1036
  };
1037
1037
 
1038
- var styles$9 = {
1038
+ var styles$e = {
1039
+ label: {
1040
+ display: 'flex',
1041
+ alignItems: 'center',
1042
+ userSelect: 'none',
1043
+ },
1044
+ input: {
1045
+ width: 18,
1046
+ height: 18,
1047
+ marginRight: 8,
1048
+ },
1049
+ };
1050
+
1051
+ var Checkbox = function (_a) {
1052
+ var _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, handleOnChecked = _a.handleOnChecked;
1053
+ var handleChange = function (event) {
1054
+ if (disabled)
1055
+ return;
1056
+ if (handleOnChecked) {
1057
+ handleOnChecked(event.target.checked);
1058
+ }
1059
+ };
1060
+ return (jsx("label", __assign({ style: __assign(__assign({}, styles$e.label), { cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.6 : 1 }) }, { children: jsx("input", { type: "checkbox", checked: disabled ? false : checked, disabled: disabled, onChange: handleChange, style: __assign(__assign({}, styles$e.input), { cursor: disabled ? 'not-allowed' : 'pointer' }) }) })));
1061
+ };
1062
+
1063
+ var styles$d = {
1039
1064
  container: {
1040
1065
  flex: 1,
1041
1066
  minHeight: '100vh',
@@ -1050,10 +1075,50 @@ var styles$9 = {
1050
1075
 
1051
1076
  var Container = function (_a) {
1052
1077
  var children = _a.children, containerStyle = _a.containerStyle, contentStyle = _a.contentStyle;
1053
- return (jsx(View, __assign({ style: __assign(__assign({}, styles$9.container), { containerStyle: containerStyle }) }, { children: jsx(View, __assign({ style: __assign(__assign({}, styles$9.content), { contentStyle: contentStyle }) }, { children: children })) })));
1078
+ return (jsx(View, __assign({ style: __assign(__assign({}, styles$d.container), { containerStyle: containerStyle }) }, { children: jsx(View, __assign({ style: __assign(__assign({}, styles$d.content), { contentStyle: contentStyle }) }, { children: children })) })));
1054
1079
  };
1055
1080
 
1056
- var styles$8 = {
1081
+ var styles$c = {
1082
+ badgeContainer: {
1083
+ position: 'absolute',
1084
+ zIndex: 1,
1085
+ pointerEvents: 'none',
1086
+ },
1087
+ ribbon: {
1088
+ position: 'absolute',
1089
+ top: 0,
1090
+ left: 0,
1091
+ width: '150px',
1092
+ height: '150px',
1093
+ overflow: 'hidden',
1094
+ },
1095
+ text: {
1096
+ position: 'absolute',
1097
+ left: -28,
1098
+ top: 10,
1099
+ transform: 'rotate(-45deg)',
1100
+ background: "linear-gradient(145deg, ".concat(Colors.red60, ", ").concat(Colors.red, ")"),
1101
+ color: Colors.white,
1102
+ paddingLeft: 30,
1103
+ paddingRight: 30,
1104
+ paddingTop: 2,
1105
+ paddingBottom: 2,
1106
+ fontWeight: 'bold',
1107
+ fontSize: 13,
1108
+ boxShadow: '0 3px 6px rgba(0,0,0,0.3)',
1109
+ borderTopRightRadius: '8px',
1110
+ borderBottomLeftRadius: '8px',
1111
+ },
1112
+ };
1113
+
1114
+ var CornerBadge = function (_a) {
1115
+ var _b = _a.text, text = _b === void 0 ? 'NEW' : _b, _c = _a.visible, visible = _c === void 0 ? true : _c;
1116
+ if (!visible)
1117
+ return null;
1118
+ return (jsx(View, __assign({ style: styles$c.badgeContainer }, { children: jsx(View, __assign({ style: styles$c.ribbon }, { children: jsx(Text, __assign({ style: styles$c.text }, { children: text })) })) })));
1119
+ };
1120
+
1121
+ var styles$b = {
1057
1122
  cardWrapper: {
1058
1123
  flexDirection: 'row',
1059
1124
  width: '100%',
@@ -1130,12 +1195,191 @@ var Countdown = function (_a) {
1130
1195
  }, [(_b = weddingDate === null || weddingDate === void 0 ? void 0 : weddingDate.reception) === null || _b === void 0 ? void 0 : _b.start]);
1131
1196
  var renderCardBox = function (_a, idx) {
1132
1197
  var label = _a.label, value = _a.value;
1133
- return (jsxs(View, __assign({ style: __assign(__assign({}, styles$8.cardBox), { cardStyle: cardStyle, marginRight: idx === data.length - 1 ? 0 : 8 }) }, { children: [jsx(Text, { style: __assign(__assign({}, styles$8.cardTitle), { fontStyle: fontStyle }), children: value ? (value < 0 ? '00' : value) : '' }), jsx(Text, { children: label, style: __assign(__assign({}, styles$8.cardDescription), { fontStyle: fontStyle }) })] }), idx));
1198
+ return (jsxs(View, __assign({ style: __assign(__assign({}, styles$b.cardBox), { cardStyle: cardStyle, marginRight: idx === data.length - 1 ? 0 : 8 }) }, { children: [jsx(Text, { style: __assign(__assign({}, styles$b.cardTitle), { fontStyle: fontStyle }), children: value ? (value < 0 ? '00' : value) : '' }), jsx(Text, { children: label, style: __assign(__assign({}, styles$b.cardDescription), { fontStyle: fontStyle }) })] }), idx));
1134
1199
  };
1135
- var render = function () { return (jsx(View, __assign({ style: __assign(__assign({}, styles$8.cardWrapper), { containerStyle: containerStyle }) }, { children: data === null || data === void 0 ? void 0 : data.map(function (val, idx) { return renderCardBox(val, idx); }) }))); };
1200
+ var render = function () { return (jsx(View, __assign({ style: __assign(__assign({}, styles$b.cardWrapper), { containerStyle: containerStyle }) }, { children: data === null || data === void 0 ? void 0 : data.map(function (val, idx) { return renderCardBox(val, idx); }) }))); };
1136
1201
  return render();
1137
1202
  };
1138
1203
 
1204
+ var translationID = {
1205
+ allowedFormat: function (formats) { return "Format: ".concat(formats); },
1206
+ errorInvalidFormat: function (formats) { return "File harus berformat: ".concat(formats); },
1207
+ errorMaxSize: function (size) { return "Ukuran file maksimal ".concat(size, "MB"); },
1208
+ errorMaxUpload: function (max) { return "Maksimal upload ".concat(max, " file."); },
1209
+ maxData: function (max) { return "Data: ".concat(max, " baris"); },
1210
+ maxSize: function (size) { return "Ukuran: ".concat(size, " MB"); },
1211
+ maxUpload: function (max) { return "Upload: ".concat(max, " file"); },
1212
+ pickFile: 'Pilih File',
1213
+ remove: 'Hapus',
1214
+ selectFileTitle: 'Pilih file mu di sini.',
1215
+ uploadingFiles: function (count, max) { return "Mengunggah File (".concat(count, "/").concat(max, ")"); },
1216
+ maximumLimit: 'Batas Maksimal:',
1217
+ };
1218
+
1219
+ var translationUS = {
1220
+ allowedFormat: function (formats) { return "Allowed formats: ".concat(formats); },
1221
+ errorInvalidFormat: function (formats) { return "File must be in format: ".concat(formats); },
1222
+ errorMaxSize: function (size) { return "Maximum file size is ".concat(size, "MB"); },
1223
+ errorMaxUpload: function (max) { return "Maximum upload is ".concat(max, " files."); },
1224
+ maxData: function (max) { return "Data: ".concat(max, " rows"); },
1225
+ maxSize: function (size) { return "Size: ".concat(size, " MB"); },
1226
+ maxUpload: function (max) { return "Upload: ".concat(max, " files"); },
1227
+ pickFile: 'Pick File',
1228
+ remove: 'Remove',
1229
+ selectFileTitle: 'Choose your file here.',
1230
+ uploadingFiles: function (count, max) { return "Uploading Files (".concat(count, "/").concat(max, ")"); },
1231
+ maximumLimit: 'Maximum Limit:',
1232
+ };
1233
+
1234
+ var styles$a = {
1235
+ wrapper: {
1236
+ width: '100%',
1237
+ display: 'flex',
1238
+ flexDirection: 'column',
1239
+ },
1240
+ uploadBox: {
1241
+ border: '1px solid #d1d5db',
1242
+ borderRadius: '12px',
1243
+ backgroundColor: '#f9fafb',
1244
+ textAlign: 'center',
1245
+ paddingBottom: 20,
1246
+ },
1247
+ cloudIcon: {
1248
+ fontSize: '48px',
1249
+ color: '#9ca3af',
1250
+ },
1251
+ title: {
1252
+ color: '#4b5563',
1253
+ marginTop: '8px',
1254
+ fontSize: '16px',
1255
+ },
1256
+ subtitle: {
1257
+ color: '#9ca3af',
1258
+ fontSize: '14px',
1259
+ marginTop: '4px',
1260
+ },
1261
+ noteContainer: {
1262
+ alignItems: 'center',
1263
+ },
1264
+ note: {
1265
+ color: '#9ca3af',
1266
+ marginBottom: 4,
1267
+ },
1268
+ button: {
1269
+ marginTop: '24px',
1270
+ color: 'white',
1271
+ padding: '12px 24px',
1272
+ borderRadius: '8px',
1273
+ fontSize: 14,
1274
+ fontWeight: 500,
1275
+ border: 'none',
1276
+ display: 'inline-block',
1277
+ },
1278
+ hiddenInput: {
1279
+ display: 'none',
1280
+ },
1281
+ error: {
1282
+ marginTop: '16px',
1283
+ color: '#ef4444',
1284
+ fontSize: '14px',
1285
+ paddingLeft: 32,
1286
+ paddingRight: 32,
1287
+ },
1288
+ success: {
1289
+ marginTop: '16px',
1290
+ color: '#229403ff',
1291
+ fontSize: '14px',
1292
+ paddingLeft: 32,
1293
+ paddingRight: 32,
1294
+ },
1295
+ fileListBox: {
1296
+ border: '1px solid #d1d5db',
1297
+ borderRadius: '12px',
1298
+ paddingLeft: 16,
1299
+ paddingRight: 16,
1300
+ backgroundColor: 'white',
1301
+ marginTop: 20,
1302
+ },
1303
+ fileListHeader: {
1304
+ fontSize: '16px',
1305
+ color: '#374151',
1306
+ fontWeight: 600,
1307
+ marginBottom: 10,
1308
+ },
1309
+ fileRow: {
1310
+ display: 'flex',
1311
+ justifyContent: 'space-between',
1312
+ alignItems: 'center',
1313
+ marginBottom: 8,
1314
+ },
1315
+ fileName: {
1316
+ color: '#16a34a',
1317
+ fontSize: '14px',
1318
+ },
1319
+ removeButton: {
1320
+ backgroundColor: '#ef4444',
1321
+ color: 'white',
1322
+ border: 'none',
1323
+ padding: '6px 12px',
1324
+ borderRadius: '6px',
1325
+ fontSize: '12px',
1326
+ cursor: 'pointer',
1327
+ },
1328
+ };
1329
+
1330
+ var translations = { id: translationID, us: translationUS };
1331
+ var DocumentUploader = function (_a) {
1332
+ var _b;
1333
+ var _c = _a.allowedExtensions, allowedExtensions = _c === void 0 ? ['.xlsx'] : _c, _d = _a.maxUpload, maxUpload = _d === void 0 ? 1 : _d, _e = _a.maxSizeMB, maxSizeMB = _e === void 0 ? 1 : _e, _f = _a.lang, lang = _f === void 0 ? 'us' : _f, _g = _a.maxData, maxData = _g === void 0 ? 70 : _g, _h = _a.onChangeFiles, onChangeFiles = _h === void 0 ? function () { } : _h, _j = _a.listErrorMessage, listErrorMessage = _j === void 0 ? false : _j, _k = _a.successMessage, successMessage = _k === void 0 ? false : _k;
1334
+ var t = (_b = translations[lang]) !== null && _b !== void 0 ? _b : translations.us;
1335
+ var _l = useState([]), files = _l[0], setFiles = _l[1];
1336
+ var _m = useState(null), error = _m[0], setError = _m[1];
1337
+ var fileInputRef = useRef(null);
1338
+ var handleFileChange = function (e) {
1339
+ var _a;
1340
+ var file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
1341
+ if (!file)
1342
+ return;
1343
+ if (files.length >= maxUpload) {
1344
+ setError(t.errorMaxUpload(maxUpload));
1345
+ fileInputRef.current && (fileInputRef.current.value = '');
1346
+ return;
1347
+ }
1348
+ var isValidExt = allowedExtensions.some(function (ext) {
1349
+ return file.name.toLowerCase().endsWith(ext.toLowerCase());
1350
+ });
1351
+ if (!isValidExt) {
1352
+ setError(t.errorInvalidFormat(allowedExtensions.join(', ')));
1353
+ return;
1354
+ }
1355
+ if (file.size > maxSizeMB * 1024 * 1024) {
1356
+ setError(t.errorMaxSize(maxSizeMB));
1357
+ return;
1358
+ }
1359
+ var updated = __spreadArray(__spreadArray([], files, true), [file], false);
1360
+ setFiles(updated);
1361
+ setError(null);
1362
+ onChangeFiles(updated);
1363
+ fileInputRef.current && (fileInputRef.current.value = '');
1364
+ };
1365
+ var handleRemove = function (index) {
1366
+ var updated = files.filter(function (_, i) { return i !== index; });
1367
+ setFiles(updated);
1368
+ setError(null);
1369
+ onChangeFiles(updated);
1370
+ };
1371
+ var shortenFileName = function (name, max) {
1372
+ if (max === void 0) { max = 25; }
1373
+ if (name.length <= max)
1374
+ return name;
1375
+ var dot = name.lastIndexOf('.');
1376
+ var ext = dot !== -1 ? name.slice(dot) : '';
1377
+ return name.slice(0, max - ext.length - 3) + '...' + ext;
1378
+ };
1379
+ return (jsxs("div", __assign({ style: styles$a.wrapper }, { children: [jsxs("div", __assign({ style: styles$a.uploadBox }, { children: [jsx("div", __assign({ style: styles$a.cloudIcon }, { children: "\u2601\uFE0F" })), jsx("p", __assign({ style: styles$a.title }, { children: t.selectFileTitle })), jsxs("p", __assign({ style: styles$a.subtitle }, { children: [t.allowedFormat(allowedExtensions.join(', ')), " \u2014 ", t.maximumLimit] })), jsxs(View, __assign({ style: styles$a.noteContainer }, { children: [jsx(Text, __assign({ type: "normal_14", style: styles$a.note }, { children: t.maxSize(maxSizeMB) })), jsx(Text, __assign({ type: "normal_14", style: styles$a.note }, { children: t.maxUpload(maxUpload) })), jsx(Text, __assign({ type: "normal_14", style: styles$a.note }, { children: t.maxData(maxData) }))] })), jsxs("label", __assign({ style: __assign(__assign({}, styles$a.button), { backgroundColor: files.length >= maxUpload ? '#9ca3af' : '#f97316', cursor: files.length >= maxUpload ? 'not-allowed' : 'pointer' }) }, { children: [t.pickFile, jsx("input", { ref: fileInputRef, type: "file", accept: allowedExtensions.join(','), disabled: files.length >= maxUpload, style: styles$a.hiddenInput, onChange: handleFileChange })] })), error && jsxs("p", __assign({ style: styles$a.error }, { children: ["\u26A0\uFE0F ", error] })), Array.isArray(listErrorMessage) &&
1380
+ listErrorMessage.map(function (msg, i) { return (jsxs("p", __assign({ style: styles$a.error }, { children: ["\u26A0\uFE0F ", msg] }), i)); }), successMessage && jsxs("p", __assign({ style: styles$a.success }, { children: ["\u2705 ", successMessage] }))] })), files.length > 0 && (jsxs("div", __assign({ style: styles$a.fileListBox }, { children: [jsx("p", __assign({ style: styles$a.fileListHeader }, { children: t.uploadingFiles(files.length, maxUpload) })), files.map(function (file, i) { return (jsxs("div", __assign({ style: styles$a.fileRow }, { children: [jsxs("p", __assign({ style: styles$a.fileName }, { children: ["\uD83D\uDCC4 ", shortenFileName(file.name)] })), jsx("button", __assign({ style: styles$a.removeButton, onClick: function () { return handleRemove(i); } }, { children: t.remove }))] }), i)); })] })))] })));
1381
+ };
1382
+
1139
1383
  var DropDown = function (_a) {
1140
1384
  var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? Colors.darkBlue : _b, _c = _a.bottom, bottom = _c === void 0 ? 0 : _c, _d = _a.color, color = _d === void 0 ? Colors.grey2 : _d, _e = _a.fontSize, fontSize = _e === void 0 ? 12 : _e, _f = _a.id, id = _f === void 0 ? 'dropdown' : _f, _g = _a.left, left = _g === void 0 ? 0 : _g, _h = _a.onChange, onChange = _h === void 0 ? function () { } : _h, _j = _a.options, options = _j === void 0 ? [
1141
1385
  { value: 'y', label: 'Present' },
@@ -1147,7 +1391,7 @@ var DropDown = function (_a) {
1147
1391
  }) })));
1148
1392
  };
1149
1393
 
1150
- var styles$7 = {
1394
+ var styles$9 = {
1151
1395
  container: {
1152
1396
  borderRadius: 8,
1153
1397
  paddingRight: 16,
@@ -1192,7 +1436,7 @@ var styles$7 = {
1192
1436
  },
1193
1437
  };
1194
1438
 
1195
- var styles$6 = {
1439
+ var styles$8 = {
1196
1440
  backdrop: {
1197
1441
  position: 'fixed',
1198
1442
  top: 0,
@@ -1243,11 +1487,11 @@ var PhotoPreviewModal = function (_a) {
1243
1487
  }, [visible, onDismiss]);
1244
1488
  if (!visible)
1245
1489
  return null;
1246
- return ReactDOM.createPortal(jsx("div", __assign({ onClick: onDismiss, style: styles$6.backdrop }, { children: jsx("div", __assign({ onClick: function (e) { return e.stopPropagation(); }, style: styles$6.modalContent }, { children: imageUrl ? (jsx("img", { src: imageUrl, alt: '', onError: function (_a) {
1490
+ return ReactDOM.createPortal(jsx("div", __assign({ onClick: onDismiss, style: styles$8.backdrop }, { children: jsx("div", __assign({ onClick: function (e) { return e.stopPropagation(); }, style: styles$8.modalContent }, { children: imageUrl ? (jsx("img", { src: imageUrl, alt: '', onError: function (_a) {
1247
1491
  var currentTarget = _a.currentTarget;
1248
1492
  currentTarget.onerror = null;
1249
1493
  currentTarget.src = Icons.image_not_available;
1250
- }, style: styles$6.image })) : (jsx("p", __assign({ style: styles$6.noImageContainer }, { children: "No image provided" }))) })) })), document.body);
1494
+ }, style: styles$8.image })) : (jsx("p", __assign({ style: styles$8.noImageContainer }, { children: "No image provided" }))) })) })), document.body);
1251
1495
  };
1252
1496
 
1253
1497
  var ImageInput = function (_a) {
@@ -1257,7 +1501,7 @@ var ImageInput = function (_a) {
1257
1501
  var _h = useState(false), isPreviewVisible = _h[0], setIsPreviewVisible = _h[1];
1258
1502
  var handleOnUpload = function () { return setIsVisibleBottomSheet(true); };
1259
1503
  var handleOnPreview = function () { return setIsPreviewVisible(true); };
1260
- return (jsxs(View, __assign({ style: __assign(__assign({}, styles$7.container), containerStyle) }, { children: [jsx(TouchableOpacity, __assign({ style: styles$7.containerImage, onPress: imagePreview ? handleOnPreview : handleOnUpload }, { children: jsx(Images, { src: imagePreview ? imagePreview : Icons.camera, style: imagePreview ? styles$7.image : styles$7.iconCamera }) })), jsxs(View, __assign({ style: styles$7.containerText }, { children: [label && (jsx(Text, __assign({ type: "bold_16", style: styles$7.label }, { children: label }))), subLabel && jsx(Text, { children: subLabel }), isMandatory && jsx(Text, __assign({ type: "normal_14_red" }, { children: '*Wajib' }))] })), isEditAble && imagePreview && (jsx(TouchableOpacity, __assign({ onPress: handleOnUpload }, { children: jsx(Images, { src: Icons.edit, style: styles$7.iconEdit }) }))), jsx(PhotoPreviewModal, { visible: isPreviewVisible, onDismiss: function () { return setIsPreviewVisible(false); }, imageUrl: imagePreview }), jsx(BottomSheetPhoto, { visible: isVisibleBottomSheet, onClose: function () { return setIsVisibleBottomSheet(false); }, onUploadBase64: function (base64) {
1504
+ return (jsxs(View, __assign({ style: __assign(__assign({}, styles$9.container), containerStyle) }, { children: [jsx(TouchableOpacity, __assign({ style: styles$9.containerImage, onPress: imagePreview ? handleOnPreview : handleOnUpload }, { children: jsx(Images, { src: imagePreview ? imagePreview : Icons.camera, style: imagePreview ? styles$9.image : styles$9.iconCamera }) })), jsxs(View, __assign({ style: styles$9.containerText }, { children: [label && (jsx(Text, __assign({ type: "bold_16", style: styles$9.label }, { children: label }))), subLabel && jsx(Text, { children: subLabel }), isMandatory && jsx(Text, __assign({ type: "normal_14_red" }, { children: '*Wajib' }))] })), isEditAble && imagePreview && (jsx(TouchableOpacity, __assign({ onPress: handleOnUpload }, { children: jsx(Images, { src: Icons.edit, style: styles$9.iconEdit }) }))), jsx(PhotoPreviewModal, { visible: isPreviewVisible, onDismiss: function () { return setIsPreviewVisible(false); }, imageUrl: imagePreview }), jsx(BottomSheetPhoto, { visible: isVisibleBottomSheet, onClose: function () { return setIsVisibleBottomSheet(false); }, onUploadBase64: function (base64) {
1261
1505
  if (typeof base64 === 'string') {
1262
1506
  setImagePreview(base64);
1263
1507
  if (typeof handleOnPickImage === 'function') {
@@ -1267,7 +1511,7 @@ var ImageInput = function (_a) {
1267
1511
  } })] })));
1268
1512
  };
1269
1513
 
1270
- var styles$5 = {
1514
+ var styles$7 = {
1271
1515
  sliderContainer: {
1272
1516
  position: 'relative',
1273
1517
  maxWidth: '600px',
@@ -1367,16 +1611,16 @@ var ImageSlider = function (_a) {
1367
1611
  return prevIndex === images.length - 1 ? 0 : prevIndex + 1;
1368
1612
  });
1369
1613
  };
1370
- return (jsxs(Fragment, { children: [images && (images === null || images === void 0 ? void 0 : images.length) > 0 ? (jsxs(TouchableOpacity, __assign({ onPress: function () { return setIsPreviewVisible(true); }, style: __assign(__assign({}, styles$5.sliderContainer), style), onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseLeave }, { children: [jsx("img", { src: (_b = images === null || images === void 0 ? void 0 : images[currentIndex]) === null || _b === void 0 ? void 0 : _b.file, alt: "slide-".concat(currentIndex), style: styles$5.image, draggable: false, onError: function (_a) {
1614
+ return (jsxs(Fragment, { children: [images && (images === null || images === void 0 ? void 0 : images.length) > 0 ? (jsxs(TouchableOpacity, __assign({ onPress: function () { return setIsPreviewVisible(true); }, style: __assign(__assign({}, styles$7.sliderContainer), style), onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseLeave }, { children: [jsx("img", { src: (_b = images === null || images === void 0 ? void 0 : images[currentIndex]) === null || _b === void 0 ? void 0 : _b.file, alt: "slide-".concat(currentIndex), style: styles$7.image, draggable: false, onError: function (_a) {
1371
1615
  var currentTarget = _a.currentTarget;
1372
1616
  currentTarget.onerror = null;
1373
1617
  currentTarget.src = Icons.image_not_available;
1374
- } }), jsxs("div", __assign({ style: styles$5.counter }, { children: [currentIndex + 1, " / ", images.length] }))] }))) : (jsx(Images, { src: '', style: __assign(__assign({}, styles$5.imageNotAvailable), style) })), jsx(PhotoPreviewModal, { visible: isPreviewVisible, onDismiss: function () { return setIsPreviewVisible(false); }, imageUrl: images.length > 0
1618
+ } }), jsxs("div", __assign({ style: styles$7.counter }, { children: [currentIndex + 1, " / ", images.length] }))] }))) : (jsx(Images, { src: '', style: __assign(__assign({}, styles$7.imageNotAvailable), style) })), jsx(PhotoPreviewModal, { visible: isPreviewVisible, onDismiss: function () { return setIsPreviewVisible(false); }, imageUrl: images.length > 0
1375
1619
  ? (_c = images === null || images === void 0 ? void 0 : images[currentIndex]) === null || _c === void 0 ? void 0 : _c.file
1376
1620
  : Icons.image_not_available })] }));
1377
1621
  };
1378
1622
 
1379
- var styles$4 = {
1623
+ var styles$6 = {
1380
1624
  container: {
1381
1625
  padding: 16,
1382
1626
  backgroundColor: Colors.white,
@@ -1496,20 +1740,20 @@ var MultipleImageInput = function (_a) {
1496
1740
  return updated;
1497
1741
  });
1498
1742
  };
1499
- return (jsxs(Fragment, { children: [jsx(Text, __assign({ style: styles$4.title }, { children: label })), jsxs(View, __assign({ style: __assign(__assign({}, styles$4.container), style) }, { children: [jsx("div", __assign({ style: styles$4.card }, props, { children: jsxs("div", __assign({ style: styles$4.previewContainer }, { children: [images.map(function (_a, index) {
1743
+ return (jsxs(Fragment, { children: [jsx(Text, __assign({ style: styles$6.title }, { children: label })), jsxs(View, __assign({ style: __assign(__assign({}, styles$6.container), style) }, { children: [jsx("div", __assign({ style: styles$6.card }, props, { children: jsxs("div", __assign({ style: styles$6.previewContainer }, { children: [images.map(function (_a, index) {
1500
1744
  var src = _a.src;
1501
- return (jsxs("div", __assign({ style: styles$4.previewWrapper }, { children: [jsx("button", __assign({ onClick: function () { return removeImage(index); }, style: styles$4.closeButton, "aria-label": "Remove image" }, { children: "\u00D7" })), jsx("img", { src: src, alt: "preview", style: styles$4.previewImage }), jsx("button", __assign({ onClick: function () {
1745
+ return (jsxs("div", __assign({ style: styles$6.previewWrapper }, { children: [jsx("button", __assign({ onClick: function () { return removeImage(index); }, style: styles$6.closeButton, "aria-label": "Remove image" }, { children: "\u00D7" })), jsx("img", { src: src, alt: "preview", style: styles$6.previewImage }), jsx("button", __assign({ onClick: function () {
1502
1746
  setImagePreview(src);
1503
1747
  setIsPreviewVisible(true);
1504
- }, style: styles$4.eyeButton, "aria-label": "Preview image" }, { children: "\uD83D\uDC41\uFE0F" }))] }), index));
1505
- }), jsx("div", __assign({ onClick: function () { return setIsVisibleBottomSheet(true); }, style: styles$4.addButton, role: "button", tabIndex: 0, onKeyDown: function (e) {
1748
+ }, style: styles$6.eyeButton, "aria-label": "Preview image" }, { children: "\uD83D\uDC41\uFE0F" }))] }), index));
1749
+ }), jsx("div", __assign({ onClick: function () { return setIsVisibleBottomSheet(true); }, style: styles$6.addButton, role: "button", tabIndex: 0, onKeyDown: function (e) {
1506
1750
  if (e.key === 'Enter' || e.key === ' ') {
1507
1751
  setIsVisibleBottomSheet(true);
1508
1752
  }
1509
- }, "aria-label": "Add images" }, { children: jsx("span", __assign({ style: styles$4.plusSign }, { children: "+" })) }))] })) })), jsx(PhotoPreviewModal, { visible: isPreviewVisible, onDismiss: function () { return setIsPreviewVisible(false); }, imageUrl: imagePreview }), jsx(BottomSheetPhoto, { visible: isVisibleBottomSheet, onClose: function () { return setIsVisibleBottomSheet(false); }, title: "Pemilihan Gambar", onUploadBase64: function (data) { return handleChange(data); } })] }))] }));
1753
+ }, "aria-label": "Add images" }, { children: jsx("span", __assign({ style: styles$6.plusSign }, { children: "+" })) }))] })) })), jsx(PhotoPreviewModal, { visible: isPreviewVisible, onDismiss: function () { return setIsPreviewVisible(false); }, imageUrl: imagePreview }), jsx(BottomSheetPhoto, { visible: isVisibleBottomSheet, onClose: function () { return setIsVisibleBottomSheet(false); }, title: "Pemilihan Gambar", onUploadBase64: function (data) { return handleChange(data); } })] }))] }));
1510
1754
  };
1511
1755
 
1512
- var styles$3 = {
1756
+ var styles$5 = {
1513
1757
  container: {
1514
1758
  justifyContent: 'center',
1515
1759
  alignItems: 'center',
@@ -1519,10 +1763,10 @@ var styles$3 = {
1519
1763
 
1520
1764
  var NoRecord = function (_a) {
1521
1765
  var title = _a.title, _b = _a.style, style = _b === void 0 ? {} : _b, props = __rest(_a, ["title", "style"]);
1522
- return (jsx(View, __assign({ style: __assign(__assign({}, styles$3.container), style) }, props, { children: jsx(Text, { children: title !== null && title !== void 0 ? title : 'No Record Found' }) })));
1766
+ return (jsx(View, __assign({ style: __assign(__assign({}, styles$5.container), style) }, props, { children: jsx(Text, { children: title !== null && title !== void 0 ? title : 'No Record Found' }) })));
1523
1767
  };
1524
1768
 
1525
- var styles$2 = {
1769
+ var styles$4 = {
1526
1770
  container: {
1527
1771
  position: 'fixed',
1528
1772
  left: 0,
@@ -1567,7 +1811,58 @@ var PopUp = function (_a) {
1567
1811
  var _b = _a.backgroundButtonColor, backgroundButtonColor = _b === void 0 ? Colors.black : _b, _c = _a.isLoading, isLoading = _c === void 0 ? false : _c, popUpData = _a.popUpData, _d = _a.visible, visible = _d === void 0 ? false : _d, _e = _a.styleContainer, styleContainer = _e === void 0 ? {} : _e;
1568
1812
  if (!visible)
1569
1813
  return null;
1570
- return (jsx(View, __assign({ style: __assign(__assign({}, styles$2.container), styleContainer) }, { children: jsxs(View, __assign({ style: styles$2.card }, { children: [jsxs(View, { children: [jsx(Text, __assign({ style: styles$2.headerTitle }, { children: popUpData === null || popUpData === void 0 ? void 0 : popUpData.title })), (popUpData === null || popUpData === void 0 ? void 0 : popUpData.description) && (jsx(Text, __assign({ style: styles$2.headerDescription }, { children: popUpData.description })))] }), jsxs(View, { children: [(popUpData === null || popUpData === void 0 ? void 0 : popUpData.labelDecline) && (popUpData === null || popUpData === void 0 ? void 0 : popUpData.onPressDecline) && (jsx(Button, { style: styles$2.buttonNegative, backgroundColor: backgroundButtonColor, outlineColor: Colors.black, isLoading: isLoading, label: popUpData.labelDecline, onPress: popUpData.onPressDecline })), jsx(Button, { style: styles$2.buttonPositive, backgroundColor: backgroundButtonColor, isLoading: isLoading, label: popUpData === null || popUpData === void 0 ? void 0 : popUpData.labelAccept, onPress: popUpData === null || popUpData === void 0 ? void 0 : popUpData.onPressAccept })] })] })) })));
1814
+ return (jsx(View, __assign({ style: __assign(__assign({}, styles$4.container), styleContainer) }, { children: jsxs(View, __assign({ style: styles$4.card }, { children: [jsxs(View, { children: [jsx(Text, __assign({ style: styles$4.headerTitle }, { children: popUpData === null || popUpData === void 0 ? void 0 : popUpData.title })), (popUpData === null || popUpData === void 0 ? void 0 : popUpData.description) && (jsx(Text, __assign({ style: styles$4.headerDescription }, { children: popUpData.description })))] }), jsxs(View, { children: [(popUpData === null || popUpData === void 0 ? void 0 : popUpData.labelDecline) && (popUpData === null || popUpData === void 0 ? void 0 : popUpData.onPressDecline) && (jsx(Button, { style: styles$4.buttonNegative, backgroundColor: backgroundButtonColor, outlineColor: Colors.black, isLoading: isLoading, label: popUpData.labelDecline, onPress: popUpData.onPressDecline })), jsx(Button, { style: styles$4.buttonPositive, backgroundColor: backgroundButtonColor, isLoading: isLoading, label: popUpData === null || popUpData === void 0 ? void 0 : popUpData.labelAccept, onPress: popUpData === null || popUpData === void 0 ? void 0 : popUpData.onPressAccept })] })] })) })));
1815
+ };
1816
+
1817
+ var styles$3 = {
1818
+ label: {
1819
+ marginBottom: 16,
1820
+ },
1821
+ singleRadioContainer: {
1822
+ display: 'flex',
1823
+ marginBottom: '10px',
1824
+ flexDirection: 'row',
1825
+ },
1826
+ outterBullet: {
1827
+ width: 20,
1828
+ height: 20,
1829
+ borderRadius: 10,
1830
+ justifyContent: 'center',
1831
+ alignItems: 'center',
1832
+ backgroundColor: Colors.white,
1833
+ marginRight: 8,
1834
+ border: '1px solid rgba(0, 0, 0, 0.6)',
1835
+ },
1836
+ innerBulletActive: {
1837
+ width: 12,
1838
+ height: 12,
1839
+ borderRadius: 6,
1840
+ backgroundColor: Colors.black100,
1841
+ },
1842
+ innerBulletNotActive: {
1843
+ width: 12,
1844
+ height: 12,
1845
+ borderRadius: 6,
1846
+ backgroundColor: Colors.white,
1847
+ },
1848
+ };
1849
+
1850
+ var SingleRadioButton = function (_a) {
1851
+ var value = _a.value, handleChange = _a.handleChange, selectedOption = _a.selectedOption, children = _a.children;
1852
+ return (jsxs(TouchableOpacity, __assign({ onPress: function () { return handleChange(value); }, style: styles$3.singleRadioContainer }, { children: [jsx(View, __assign({ style: styles$3.outterBullet }, { children: jsx(View, { style: selectedOption === value
1853
+ ? styles$3.innerBulletActive
1854
+ : styles$3.innerBulletNotActive }) })), jsx(View, __assign({ style: { flex: 1 } }, { children: children }))] })));
1855
+ };
1856
+
1857
+ var RadioButton = function (_a) {
1858
+ var label = _a.label, _b = _a.options, options = _b === void 0 ? [] : _b, selectedValue = _a.selectedValue, onSelect = _a.onSelect, _c = _a.keyField, keyField = _c === void 0 ? 'key' : _c, _d = _a.valueField, valueField = _d === void 0 ? 'value' : _d, styleContainer = _a.styleContainer, renderItem = _a.renderItem;
1859
+ var _e = useState(selectedValue), selectedOption = _e[0], setSelectedOption = _e[1];
1860
+ var handleChange = function (value) {
1861
+ setSelectedOption(value);
1862
+ if (onSelect)
1863
+ onSelect(value);
1864
+ };
1865
+ return (jsxs(View, __assign({ style: __assign({}, styleContainer) }, { children: [jsx(Text, __assign({ type: "bold_16", style: styles$3.label }, { children: label })), options.map(function (item, index) { return (jsx(SingleRadioButton, __assign({ value: item[valueField], selectedOption: selectedOption, handleChange: handleChange }, { children: renderItem ? (renderItem(item)) : (jsx(Text, __assign({ type: "normal_14" }, { children: item[valueField] }))) }), item[keyField] || index)); })] })));
1571
1866
  };
1572
1867
 
1573
1868
  var cameraStyles = {
@@ -30150,7 +30445,7 @@ var ScannerCamera = function (_a) {
30150
30445
  return ReactDOM.createPortal(jsxs("div", __assign({ style: cameraStyles.overlay }, { children: [jsx("video", { ref: videoRef, autoPlay: true, playsInline: true, style: __assign(__assign({}, cameraStyles.video), { transform: isFrontCamera ? 'scaleX(-1)' : 'none', position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', objectFit: 'cover' }) }), drawBoundingBox(), isCameraReady && hasRearCamera && (jsx(TouchableOpacity, __assign({ onPress: toggleCamera, style: cameraStyles.floatingBottomRotateButtons }, { children: jsx(View, __assign({ style: cameraStyles.captureRotateButton }, { children: jsx(Images, { src: Icons.rotate, style: cameraStyles.rotateButton }) })) }))), jsx("button", __assign({ onClick: handleOnPressClose, style: cameraStyles.closeButton }, { children: "\u00D7" }))] })), document.body);
30151
30446
  };
30152
30447
 
30153
- var styles$1 = {
30448
+ var styles$2 = {
30154
30449
  textInputContainer: {
30155
30450
  width: '100%',
30156
30451
  },
@@ -30193,7 +30488,7 @@ var styles$1 = {
30193
30488
  },
30194
30489
  };
30195
30490
 
30196
- var styles = {
30491
+ var styles$1 = {
30197
30492
  label: {
30198
30493
  marginBottom: 4,
30199
30494
  fontSize: 16,
@@ -30288,14 +30583,14 @@ var TextInput = function (_a) {
30288
30583
  }
30289
30584
  }, [value, multiline]);
30290
30585
  var adjustedStyleTextInput = __assign(__assign({}, styleTextInput), { paddingRight: handleOnScanQr ? 40 : styleTextInput.paddingRight, resize: 'none' });
30291
- var stylesTextInput = __assign(__assign({ borderColor: borderColor, borderRadius: borderRadius, textAlign: center ? 'center' : 'left', paddingBottom: multiline ? 16 : 8 }, styles.textArea), adjustedStyleTextInput);
30586
+ var stylesTextInput = __assign(__assign({ borderColor: borderColor, borderRadius: borderRadius, textAlign: center ? 'center' : 'left', paddingBottom: multiline ? 16 : 8 }, styles$1.textArea), adjustedStyleTextInput);
30292
30587
  var inputType = isInputRupiah || isInputNumber ? 'tel' : 'text';
30293
- return (jsxs(Fragment, { children: [jsxs(View, __assign({ style: styles.container }, { children: [jsxs(View, __assign({ style: __assign({ marginTop: top, marginRight: right, marginBottom: bottom, marginLeft: left, padding: padding }, style) }, { children: [label && (jsx(Text, { style: __assign(__assign({}, styles.label), styleLabel), children: label })), jsx(View, { children: multiline ? (jsx("textarea", __assign({ ref: textAreaRef, rows: rows, inputMode: isInputNumber ? 'numeric' : 'text', style: stylesTextInput, value: isInputRupiah ? formatRupiahDisplay(value) : value !== null && value !== void 0 ? value : '', onChange: handleChange }, props))) : (jsx("input", __assign({ type: inputType, inputMode: isInputNumber ? 'numeric' : 'text', style: stylesTextInput, value: isInputRupiah ? formatRupiahDisplay(value) : value !== null && value !== void 0 ? value : '', onChange: handleChange }, props))) }), labelError ? (jsx(Text, { style: styles.labelError, children: labelError })) : null] })), handleOnScanQr && (jsx(TouchableOpacity, __assign({ style: label
30294
- ? styles.scanQrImageContainerWithLabel
30295
- : styles.scanQrImageContainer, onPress: function () {
30588
+ return (jsxs(Fragment, { children: [jsxs(View, __assign({ style: styles$1.container }, { children: [jsxs(View, __assign({ style: __assign({ marginTop: top, marginRight: right, marginBottom: bottom, marginLeft: left, padding: padding }, style) }, { children: [label && (jsx(Text, { style: __assign(__assign({}, styles$1.label), styleLabel), children: label })), jsx(View, { children: multiline ? (jsx("textarea", __assign({ ref: textAreaRef, rows: rows, inputMode: isInputNumber ? 'numeric' : 'text', style: stylesTextInput, value: isInputRupiah ? formatRupiahDisplay(value) : value !== null && value !== void 0 ? value : '', onChange: handleChange }, props))) : (jsx("input", __assign({ type: inputType, inputMode: isInputNumber ? 'numeric' : 'text', style: stylesTextInput, value: isInputRupiah ? formatRupiahDisplay(value) : value !== null && value !== void 0 ? value : '', onChange: handleChange }, props))) }), labelError ? (jsx(Text, { style: styles$1.labelError, children: labelError })) : null] })), handleOnScanQr && (jsx(TouchableOpacity, __assign({ style: label
30589
+ ? styles$1.scanQrImageContainerWithLabel
30590
+ : styles$1.scanQrImageContainer, onPress: function () {
30296
30591
  handleOnScanQr();
30297
30592
  setIsScannerVisible(true);
30298
- } }, { children: jsx(Images, { style: styles.scanQrImage, src: Icons.scan_qr }) })))] })), isScannerVisible && (jsx(ScannerCamera, { onClose: function () { return setIsScannerVisible(false); }, onCapture: function (data) { return handleOnScanQr && handleOnScanQr(data); } }))] }));
30593
+ } }, { children: jsx(Images, { style: styles$1.scanQrImage, src: Icons.scan_qr }) })))] })), isScannerVisible && (jsx(ScannerCamera, { onClose: function () { return setIsScannerVisible(false); }, onCapture: function (data) { return handleOnScanQr && handleOnScanQr(data); } }))] }));
30299
30594
  };
30300
30595
 
30301
30596
  var SearchBox = function (_a) {
@@ -30307,14 +30602,14 @@ var SearchBox = function (_a) {
30307
30602
  handleOnSubmitSearch(value);
30308
30603
  }
30309
30604
  };
30310
- return (jsxs(Fragment, { children: [jsxs(View, __assign({ style: styles$1.searchContainer }, { children: [jsx(TouchableOpacity, __assign({ onPress: function () { return handleOnSubmitSearch(value); } }, { children: jsx(Text, __assign({ style: styles$1.iconSearch }, { children: "\uD83D\uDD0D" })) })), jsx(TextInput, __assign({ style: styles$1.textInputContainer, styleTextInput: __assign(__assign({}, styles$1.textInput), { paddingRight: handleOnScanQr ? 72 : 40 }), placeholder: placeholder, onKeyPress: handleKeyPress, value: value, onChange: onChange, onBlur: function () {
30605
+ return (jsxs(Fragment, { children: [jsxs(View, __assign({ style: styles$2.searchContainer }, { children: [jsx(TouchableOpacity, __assign({ onPress: function () { return handleOnSubmitSearch(value); } }, { children: jsx(Text, __assign({ style: styles$2.iconSearch }, { children: "\uD83D\uDD0D" })) })), jsx(TextInput, __assign({ style: styles$2.textInputContainer, styleTextInput: __assign(__assign({}, styles$2.textInput), { paddingRight: handleOnScanQr ? 72 : 40 }), placeholder: placeholder, onKeyPress: handleKeyPress, value: value, onChange: onChange, onBlur: function () {
30311
30606
  if (handleOnSubmitSearch && !handleOnScanQr) {
30312
30607
  handleOnSubmitSearch(value);
30313
30608
  }
30314
- } }, props)), (value === null || value === void 0 ? void 0 : value.length) > 0 && (jsx(TouchableOpacity, __assign({ style: styles$1.closeSearchButton, onPress: handleOnClearSearch }, { children: jsx(Images, { style: __assign(__assign({}, styles$1.closeSearchButtonImage), { paddingRight: handleOnScanQr ? 48 : 16 }), src: (_b = Icons.close) !== null && _b !== void 0 ? _b : '' }) }))), handleOnScanQr && (jsx(TouchableOpacity, __assign({ style: styles$1.scanQrImageContainer, onPress: function () {
30609
+ } }, props)), (value === null || value === void 0 ? void 0 : value.length) > 0 && (jsx(TouchableOpacity, __assign({ style: styles$2.closeSearchButton, onPress: handleOnClearSearch }, { children: jsx(Images, { style: __assign(__assign({}, styles$2.closeSearchButtonImage), { paddingRight: handleOnScanQr ? 48 : 16 }), src: (_b = Icons.close) !== null && _b !== void 0 ? _b : '' }) }))), handleOnScanQr && (jsx(TouchableOpacity, __assign({ style: styles$2.scanQrImageContainer, onPress: function () {
30315
30610
  handleOnScanQr();
30316
30611
  setIsScannerVisible(true);
30317
- } }, { children: jsx(Images, { style: styles$1.scanQrImage, src: Icons.scan_qr }) })))] })), isScannerVisible && (jsx(ScannerCamera, { onClose: function () { return setIsScannerVisible(false); }, onCapture: function (data) { return handleOnScanQr === null || handleOnScanQr === void 0 ? void 0 : handleOnScanQr(data); } }))] }));
30612
+ } }, { children: jsx(Images, { style: styles$2.scanQrImage, src: Icons.scan_qr }) })))] })), isScannerVisible && (jsx(ScannerCamera, { onClose: function () { return setIsScannerVisible(false); }, onCapture: function (data) { return handleOnScanQr === null || handleOnScanQr === void 0 ? void 0 : handleOnScanQr(data); } }))] }));
30318
30613
  };
30319
30614
 
30320
30615
  var Swipeable = function (_a) {
@@ -30339,5 +30634,43 @@ var Swipeable = function (_a) {
30339
30634
  return (jsx("div", __assign({ style: style, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd }, props, { children: children })));
30340
30635
  };
30341
30636
 
30342
- export { BottomSheet, BottomSheetPhoto, Button, Colors, Container, Countdown as CountDown, DropDown, Icons, Images as Image, ImageInput, ImageSlider, LoadingSpinner, MultipleImageInput, NoRecord, PopUp, PhotoPreviewModal as PreviewPhoto, ScannerCamera as ScannerQR, SearchBox, Swipeable, Text, TextInput, TouchableOpacity, View };
30637
+ var styles = {
30638
+ containerWithBorder: {
30639
+ display: 'flex',
30640
+ alignItems: 'center',
30641
+ justifyContent: 'space-between',
30642
+ marginTop: 16,
30643
+ marginBottom: 16,
30644
+ backgroundColor: Colors.white,
30645
+ padding: 8,
30646
+ borderRadius: 4,
30647
+ border: "0.5px solid ".concat(Colors.grey80),
30648
+ },
30649
+ container: {
30650
+ display: 'flex',
30651
+ alignItems: 'center',
30652
+ justifyContent: 'space-between',
30653
+ marginTop: 8,
30654
+ marginBottom: 8,
30655
+ },
30656
+ toogleContainer: {
30657
+ display: 'flex',
30658
+ flexDirection: 'row',
30659
+ alignItems: 'center',
30660
+ },
30661
+ toogleText: {
30662
+ fontSize: '14px',
30663
+ marginLeft: 8,
30664
+ },
30665
+ };
30666
+
30667
+ var Switch = function (_a) {
30668
+ var _b = _a.label, label = _b === void 0 ? '' : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, onChange = _a.onChange, style = _a.style, _d = _a.labelOn, labelOn = _d === void 0 ? 'ON' : _d, _e = _a.labelOff, labelOff = _e === void 0 ? 'OFF' : _e, _f = _a.isShowLabelToogle, isShowLabelToogle = _f === void 0 ? true : _f, _g = _a.withBorder, withBorder = _g === void 0 ? true : _g;
30669
+ var styleContainer = withBorder
30670
+ ? styles.containerWithBorder
30671
+ : styles.container;
30672
+ return (jsxs("div", __assign({ style: __assign(__assign({}, styleContainer), style) }, { children: [label && jsx(Text, { children: label }), jsxs(View, __assign({ style: styles.toogleContainer }, { children: [jsxs("label", __assign({ className: "switch" }, { children: [jsx("input", { type: "checkbox", checked: checked, onChange: function (e) { return onChange(e.target.checked); } }), jsx("span", { className: "slider" })] })), isShowLabelToogle && (jsx("span", __assign({ style: styles.toogleText }, { children: checked ? labelOn : labelOff })))] }))] })));
30673
+ };
30674
+
30675
+ export { BottomSheet, BottomSheetPhoto, Button, Checkbox as CheckBox, Colors, Container, CornerBadge, Countdown as CountDown, DocumentUploader, DropDown, Icons, Images as Image, ImageInput, ImageSlider, LoadingSpinner, MultipleImageInput, NoRecord, PopUp, PhotoPreviewModal as PreviewPhoto, RadioButton, ScannerCamera as ScannerQR, SearchBox, Swipeable, Switch, Text, TextInput, TouchableOpacity, View };
30343
30676
  //# sourceMappingURL=index.es.js.map