@ctlyst.id/internal-ui 3.2.2 → 3.3.1
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.d.mts +33 -2
- package/dist/index.d.ts +33 -2
- package/dist/index.js +379 -257
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +271 -152
- package/dist/index.mjs.map +1 -1
- package/package.json +6 -4
- package/dist/index.css +0 -50
- package/dist/index.css.map +0 -1
- package/dist/poppins-latin-400-normal-SFWTNBQB.woff2 +0 -0
- package/dist/poppins-latin-400-normal-ZPTYLX7I.woff +0 -0
- package/dist/poppins-latin-ext-400-normal-7PFKV6Y5.woff +0 -0
- package/dist/poppins-latin-ext-400-normal-K3FV5HAI.woff2 +0 -0
package/dist/index.mjs
CHANGED
@@ -1,9 +1,11 @@
|
|
1
1
|
'use client'
|
2
2
|
var __defProp = Object.defineProperty;
|
3
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
3
4
|
var __export = (target, all) => {
|
4
5
|
for (var name in all)
|
5
6
|
__defProp(target, name, { get: all[name], enumerable: true });
|
6
7
|
};
|
8
|
+
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
7
9
|
|
8
10
|
// src/components/accordion/components/accordion-eye.tsx
|
9
11
|
import { Box } from "@chakra-ui/react";
|
@@ -513,6 +515,7 @@ var Field = (props) => {
|
|
513
515
|
isRequired,
|
514
516
|
children,
|
515
517
|
isSuccess,
|
518
|
+
isDisabled,
|
516
519
|
boxProps = {}
|
517
520
|
} = props;
|
518
521
|
const getHelperColor = () => {
|
@@ -526,12 +529,39 @@ var Field = (props) => {
|
|
526
529
|
};
|
527
530
|
const helperColor = getHelperColor();
|
528
531
|
const justifyHelper = getJustifyContentHelper();
|
532
|
+
const getProperties = () => {
|
533
|
+
let outlineColor2 = "neutral.400";
|
534
|
+
let focusColor2 = "primary.500";
|
535
|
+
if (isError || isDisabled || isSuccess) {
|
536
|
+
if (isError) outlineColor2 = "danger.500";
|
537
|
+
else if (isSuccess) outlineColor2 = "success.500";
|
538
|
+
focusColor2 = outlineColor2;
|
539
|
+
}
|
540
|
+
return {
|
541
|
+
outlineColor: outlineColor2,
|
542
|
+
focusColor: focusColor2
|
543
|
+
};
|
544
|
+
};
|
545
|
+
const { outlineColor, focusColor } = getProperties();
|
529
546
|
return /* @__PURE__ */ jsxs3(FormControl, { isInvalid: isError, ...boxProps, children: [
|
530
547
|
label && (typeof label === "string" ? /* @__PURE__ */ jsxs3(FormLabel, { mb: 1, fontSize: "text.sm", requiredIndicator: void 0, children: [
|
531
548
|
isRequired && /* @__PURE__ */ jsx17(Box6, { as: "span", color: "danger.500", ml: 0, mr: 1, children: "*" }),
|
532
549
|
label
|
533
550
|
] }) : label),
|
534
|
-
|
551
|
+
/* @__PURE__ */ jsx17(
|
552
|
+
Box6,
|
553
|
+
{
|
554
|
+
transition: "all 0.15s",
|
555
|
+
boxShadow: "none",
|
556
|
+
borderRadius: "sm",
|
557
|
+
border: "1px solid",
|
558
|
+
borderColor: outlineColor,
|
559
|
+
_focusWithin: {
|
560
|
+
borderColor: focusColor
|
561
|
+
},
|
562
|
+
children
|
563
|
+
}
|
564
|
+
),
|
535
565
|
(isError && errorMessage || leftHelperText || rightHelperText) && /* @__PURE__ */ jsxs3(Box6, { display: "flex", width: "full", justifyContent: justifyHelper, children: [
|
536
566
|
!isError ? leftHelperText && (typeof leftHelperText === "string" ? /* @__PURE__ */ jsx17(FormHelperText, { fontSize: "text.xs", color: helperColor, mt: 1, children: leftHelperText }) : leftHelperText) : typeof errorMessage === "string" ? /* @__PURE__ */ jsx17(FormErrorMessage, { fontSize: "text.xs", color: "danger.500", mt: 1, children: errorMessage }) : errorMessage,
|
537
567
|
rightHelperText && (typeof rightHelperText === "string" ? /* @__PURE__ */ jsx17(FormHelperText, { fontSize: "text.xs", color: helperColor, mt: 1, children: rightHelperText }) : rightHelperText)
|
@@ -669,19 +699,6 @@ var InputField = React2.forwardRef((props, ref) => {
|
|
669
699
|
isLoading,
|
670
700
|
...inputProps
|
671
701
|
} = props;
|
672
|
-
const getProperties = () => {
|
673
|
-
let outlineColor2 = "neutral.400";
|
674
|
-
let focusColor2 = "primary.500";
|
675
|
-
if (isError || isDisabled || isSuccess) {
|
676
|
-
if (isError) outlineColor2 = "danger.500";
|
677
|
-
else if (isSuccess) outlineColor2 = "success.500";
|
678
|
-
focusColor2 = outlineColor2;
|
679
|
-
}
|
680
|
-
return {
|
681
|
-
outlineColor: outlineColor2,
|
682
|
-
focusColor: focusColor2
|
683
|
-
};
|
684
|
-
};
|
685
702
|
const [isShowPassword, setIsShowPassword] = useState(false);
|
686
703
|
const inputType = useMemo(() => {
|
687
704
|
return type === "password" && isShowPassword ? "text" : type;
|
@@ -695,7 +712,6 @@ var InputField = React2.forwardRef((props, ref) => {
|
|
695
712
|
const iconColor = useMemo(() => {
|
696
713
|
return isDisabled ? "black.low" : "black.medium";
|
697
714
|
}, [isDisabled]);
|
698
|
-
const { outlineColor, focusColor } = getProperties();
|
699
715
|
return /* @__PURE__ */ jsx21(
|
700
716
|
field_default,
|
701
717
|
{
|
@@ -706,92 +722,80 @@ var InputField = React2.forwardRef((props, ref) => {
|
|
706
722
|
leftHelperText,
|
707
723
|
rightHelperText,
|
708
724
|
isRequired,
|
709
|
-
|
710
|
-
|
725
|
+
isDisabled,
|
726
|
+
children: /* @__PURE__ */ jsxs5(
|
727
|
+
InputGroup,
|
711
728
|
{
|
712
|
-
|
713
|
-
boxShadow: "none",
|
729
|
+
size: size2,
|
714
730
|
borderRadius: "sm",
|
715
|
-
|
716
|
-
|
717
|
-
|
718
|
-
|
719
|
-
|
720
|
-
|
721
|
-
|
722
|
-
|
723
|
-
|
724
|
-
|
725
|
-
|
726
|
-
|
727
|
-
|
728
|
-
|
729
|
-
|
730
|
-
|
731
|
-
|
732
|
-
|
733
|
-
|
734
|
-
|
735
|
-
|
736
|
-
|
737
|
-
|
738
|
-
|
739
|
-
|
740
|
-
|
741
|
-
|
742
|
-
|
743
|
-
|
744
|
-
|
745
|
-
|
746
|
-
|
747
|
-
|
748
|
-
|
749
|
-
|
750
|
-
|
751
|
-
|
752
|
-
|
753
|
-
|
754
|
-
|
755
|
-
|
756
|
-
|
757
|
-
|
758
|
-
|
759
|
-
|
760
|
-
|
761
|
-
|
762
|
-
|
763
|
-
|
764
|
-
|
765
|
-
|
766
|
-
|
767
|
-
|
768
|
-
|
769
|
-
|
770
|
-
|
771
|
-
|
772
|
-
|
773
|
-
|
774
|
-
|
775
|
-
|
776
|
-
|
777
|
-
|
778
|
-
|
779
|
-
|
780
|
-
|
781
|
-
|
782
|
-
|
783
|
-
justifyContent: "center",
|
784
|
-
children: /* @__PURE__ */ jsx21(Eye2, { size: 4, color: iconColor })
|
785
|
-
}
|
786
|
-
),
|
787
|
-
isLoading && /* @__PURE__ */ jsx21(loader_default, { size: "sm" })
|
788
|
-
]
|
789
|
-
}
|
790
|
-
),
|
791
|
-
addOnRight
|
792
|
-
]
|
793
|
-
}
|
794
|
-
)
|
731
|
+
backgroundColor: isDisabled ? "neutral.300" : "white.high",
|
732
|
+
cursor: isDisabled ? "not-allowed" : "default",
|
733
|
+
children: [
|
734
|
+
addOnLeft,
|
735
|
+
/* @__PURE__ */ jsx21(
|
736
|
+
ChakraInput,
|
737
|
+
{
|
738
|
+
ref,
|
739
|
+
type: inputType,
|
740
|
+
value,
|
741
|
+
isDisabled,
|
742
|
+
isSuccess,
|
743
|
+
...inputProps,
|
744
|
+
fontSize
|
745
|
+
}
|
746
|
+
),
|
747
|
+
(withClear || isLoading || type === "password") && /* @__PURE__ */ jsxs5(
|
748
|
+
Box8,
|
749
|
+
{
|
750
|
+
"data-test-id": "CT_Component_ClearInput",
|
751
|
+
display: "flex",
|
752
|
+
alignItems: "center",
|
753
|
+
justifyContent: "center",
|
754
|
+
width: "16px",
|
755
|
+
mr: "10px",
|
756
|
+
children: [
|
757
|
+
withClear && !isLoading && /* @__PURE__ */ jsx21(
|
758
|
+
Box8,
|
759
|
+
{
|
760
|
+
display: "flex",
|
761
|
+
justifyContent: "center",
|
762
|
+
onClick: !isDisabled ? onClear : void 0,
|
763
|
+
cursor: isDisabled ? "not-allowed" : "pointer",
|
764
|
+
children: /* @__PURE__ */ jsx21(Close2, { size: 4, color: iconColor })
|
765
|
+
}
|
766
|
+
),
|
767
|
+
type === "password" && !isShowPassword && !isLoading && /* @__PURE__ */ jsx21(
|
768
|
+
Box8,
|
769
|
+
{
|
770
|
+
"data-test-id": "q2Bj2G4FlamXyHuRKMZ1Q",
|
771
|
+
onClick: () => {
|
772
|
+
if (!isDisabled) setIsShowPassword(true);
|
773
|
+
},
|
774
|
+
cursor: isDisabled ? "not-allowed" : "pointer",
|
775
|
+
display: "flex",
|
776
|
+
justifyContent: "center",
|
777
|
+
children: /* @__PURE__ */ jsx21(EyeOff, { size: 4, color: iconColor })
|
778
|
+
}
|
779
|
+
),
|
780
|
+
type === "password" && isShowPassword && !isLoading && /* @__PURE__ */ jsx21(
|
781
|
+
Box8,
|
782
|
+
{
|
783
|
+
"data-test-id": "sfc2388bmeXBmdla45Ibk",
|
784
|
+
onClick: () => {
|
785
|
+
if (!isDisabled) setIsShowPassword(false);
|
786
|
+
},
|
787
|
+
cursor: isDisabled ? "not-allowed" : "pointer",
|
788
|
+
display: "flex",
|
789
|
+
justifyContent: "center",
|
790
|
+
children: /* @__PURE__ */ jsx21(Eye2, { size: 4, color: iconColor })
|
791
|
+
}
|
792
|
+
),
|
793
|
+
isLoading && /* @__PURE__ */ jsx21(loader_default, { size: "sm" })
|
794
|
+
]
|
795
|
+
}
|
796
|
+
),
|
797
|
+
addOnRight
|
798
|
+
]
|
795
799
|
}
|
796
800
|
)
|
797
801
|
}
|
@@ -1228,7 +1232,6 @@ import {
|
|
1228
1232
|
FormControl as FormControl3,
|
1229
1233
|
FormErrorMessage as FormErrorMessage3,
|
1230
1234
|
FormHelperText as FormHelperText3,
|
1231
|
-
FormLabel as FormLabel3,
|
1232
1235
|
IconButton as IconButton4,
|
1233
1236
|
InputGroup as InputGroup4,
|
1234
1237
|
InputRightElement as InputRightElement3
|
@@ -2169,7 +2172,7 @@ var Datepicker = ({
|
|
2169
2172
|
id,
|
2170
2173
|
name,
|
2171
2174
|
selected,
|
2172
|
-
customInput: /* @__PURE__ */ jsx27(input_field_default, { autoComplete: "off" }),
|
2175
|
+
customInput: /* @__PURE__ */ jsx27(input_field_default, { label, isRequired, autoComplete: "off", isError }),
|
2173
2176
|
showPopperArrow: false,
|
2174
2177
|
calendarClassName: cx8({ inline: props.inline }),
|
2175
2178
|
dropdownMode: "select",
|
@@ -2186,8 +2189,7 @@ var Datepicker = ({
|
|
2186
2189
|
if (props.inline) {
|
2187
2190
|
return component;
|
2188
2191
|
}
|
2189
|
-
return /* @__PURE__ */ jsxs10(FormControl3, {
|
2190
|
-
label && /* @__PURE__ */ jsx27(FormLabel3, { fontSize: "text.sm", children: label }),
|
2192
|
+
return /* @__PURE__ */ jsxs10(FormControl3, { "data-test-id": "CT_Component_datepicker_wrapper", isInvalid: isError, children: [
|
2191
2193
|
/* @__PURE__ */ jsxs10(InputGroup4, { children: [
|
2192
2194
|
component,
|
2193
2195
|
/* @__PURE__ */ jsxs10(InputRightElement3, { alignSelf: "center", bottom: 0, flexDir: "row-reverse", width: "auto", mr: 2, gap: 2, children: [
|
@@ -4649,15 +4651,130 @@ import {
|
|
4649
4651
|
// src/components/text/index.ts
|
4650
4652
|
import { Code, CodeProps, Heading, HeadingProps, Link as Link5, LinkProps, Text as Text17, TextProps } from "@chakra-ui/react";
|
4651
4653
|
|
4654
|
+
// src/components/time-input/components/index.tsx
|
4655
|
+
import { Box as Box29, Flex as Flex17, forwardRef as forwardRef12, Input as Input3, InputGroup as InputGroup5 } from "@chakra-ui/react";
|
4656
|
+
import { Clock } from "@ctlyst.id/internal-icon";
|
4657
|
+
import { useEffect as useEffect2, useImperativeHandle as useImperativeHandle2 } from "react";
|
4658
|
+
import { useTimescape } from "timescape/react";
|
4659
|
+
import { Fragment as Fragment10, jsx as jsx63, jsxs as jsxs29 } from "react/jsx-runtime";
|
4660
|
+
var Time = class {
|
4661
|
+
constructor(hours, minutes, seconds) {
|
4662
|
+
__publicField(this, "hours");
|
4663
|
+
__publicField(this, "minutes");
|
4664
|
+
__publicField(this, "seconds");
|
4665
|
+
this.hours = hours != null ? hours : 0;
|
4666
|
+
this.minutes = minutes != null ? minutes : 0;
|
4667
|
+
this.seconds = seconds != null ? seconds : 0;
|
4668
|
+
}
|
4669
|
+
toString() {
|
4670
|
+
return `${this.hours}:${this.minutes}:${this.seconds}`;
|
4671
|
+
}
|
4672
|
+
};
|
4673
|
+
var InputTimeArea = forwardRef12((props, ref) => {
|
4674
|
+
return /* @__PURE__ */ jsx63(
|
4675
|
+
Input3,
|
4676
|
+
{
|
4677
|
+
_focusWithin: {
|
4678
|
+
bg: "neutral.300"
|
4679
|
+
},
|
4680
|
+
boxSizing: "content-box",
|
4681
|
+
height: "24px",
|
4682
|
+
ref,
|
4683
|
+
p: "2px",
|
4684
|
+
sx: {
|
4685
|
+
fontVariantNumeric: "tabular-nums"
|
4686
|
+
},
|
4687
|
+
...props
|
4688
|
+
}
|
4689
|
+
);
|
4690
|
+
});
|
4691
|
+
var TimeInput2 = forwardRef12(
|
4692
|
+
({
|
4693
|
+
config: config2,
|
4694
|
+
label,
|
4695
|
+
isError,
|
4696
|
+
isRequired,
|
4697
|
+
errorMessage,
|
4698
|
+
value,
|
4699
|
+
seconds,
|
4700
|
+
isDisabled,
|
4701
|
+
boxProps,
|
4702
|
+
addOnRight,
|
4703
|
+
isSuccess,
|
4704
|
+
onChangeTime
|
4705
|
+
}, ref) => {
|
4706
|
+
const dateVal = value != null ? value : config2 == null ? void 0 : config2.date;
|
4707
|
+
const defaultDate = /* @__PURE__ */ new Date();
|
4708
|
+
defaultDate.setHours(0, 0, 0, 0);
|
4709
|
+
const date = dateVal ? new Date(dateVal) : defaultDate;
|
4710
|
+
const timeValue = new Time();
|
4711
|
+
const { getRootProps, getInputProps, options, update, _manager } = useTimescape({
|
4712
|
+
date,
|
4713
|
+
...config2
|
4714
|
+
});
|
4715
|
+
useEffect2(() => {
|
4716
|
+
var _a, _b, _c, _d, _e, _f;
|
4717
|
+
timeValue.hours = (_b = (_a = options == null ? void 0 : options.date) == null ? void 0 : _a.getHours()) != null ? _b : 0;
|
4718
|
+
timeValue.minutes = (_d = (_c = options == null ? void 0 : options.date) == null ? void 0 : _c.getMinutes()) != null ? _d : 0;
|
4719
|
+
timeValue.seconds = (_f = (_e = options == null ? void 0 : options.date) == null ? void 0 : _e.getSeconds()) != null ? _f : 0;
|
4720
|
+
if (onChangeTime) {
|
4721
|
+
onChangeTime(timeValue);
|
4722
|
+
}
|
4723
|
+
}, [options.date]);
|
4724
|
+
useImperativeHandle2(ref, () => ({
|
4725
|
+
focus() {
|
4726
|
+
_manager.focusField("hours");
|
4727
|
+
}
|
4728
|
+
}));
|
4729
|
+
const rootProps = getRootProps();
|
4730
|
+
const hoursProps = getInputProps("hours");
|
4731
|
+
return /* @__PURE__ */ jsx63(Box29, { ...boxProps, ...rootProps, children: /* @__PURE__ */ jsx63(
|
4732
|
+
field_default,
|
4733
|
+
{
|
4734
|
+
isError,
|
4735
|
+
label,
|
4736
|
+
isRequired,
|
4737
|
+
errorMessage,
|
4738
|
+
isDisabled,
|
4739
|
+
isSuccess,
|
4740
|
+
children: /* @__PURE__ */ jsxs29(
|
4741
|
+
InputGroup5,
|
4742
|
+
{
|
4743
|
+
borderRadius: "sm",
|
4744
|
+
backgroundColor: isDisabled ? "neutral.300" : "white.high",
|
4745
|
+
cursor: isDisabled ? "not-allowed" : "default",
|
4746
|
+
alignItems: "center",
|
4747
|
+
gap: 3,
|
4748
|
+
children: [
|
4749
|
+
/* @__PURE__ */ jsxs29(Flex17, { gap: 1, width: "100%", alignItems: "center", pl: 2, children: [
|
4750
|
+
/* @__PURE__ */ jsx63(InputTimeArea, { ...hoursProps }),
|
4751
|
+
/* @__PURE__ */ jsx63("span", { children: ":" }),
|
4752
|
+
/* @__PURE__ */ jsx63(InputTimeArea, { ...getInputProps("minutes") }),
|
4753
|
+
seconds && /* @__PURE__ */ jsxs29(Fragment10, { children: [
|
4754
|
+
/* @__PURE__ */ jsx63("span", { children: ":" }),
|
4755
|
+
/* @__PURE__ */ jsx63(InputTimeArea, { ...getInputProps("seconds") })
|
4756
|
+
] }),
|
4757
|
+
options.hour12 && /* @__PURE__ */ jsx63("input", { ...getInputProps("am/pm") })
|
4758
|
+
] }),
|
4759
|
+
/* @__PURE__ */ jsx63(Clock, { color: "neutral.400" }),
|
4760
|
+
addOnRight
|
4761
|
+
]
|
4762
|
+
}
|
4763
|
+
)
|
4764
|
+
}
|
4765
|
+
) });
|
4766
|
+
}
|
4767
|
+
);
|
4768
|
+
|
4652
4769
|
// src/components/toast/components/toast.tsx
|
4653
|
-
import { chakra as chakra7, Flex as
|
4770
|
+
import { chakra as chakra7, Flex as Flex18, Link as Link6, useToken } from "@chakra-ui/react";
|
4654
4771
|
import { Bounce, toast } from "react-toastify";
|
4655
4772
|
|
4656
4773
|
// src/components/toast/components/styles.tsx
|
4657
4774
|
import { Global as Global2 } from "@emotion/react";
|
4658
|
-
import { jsx as
|
4775
|
+
import { jsx as jsx64 } from "react/jsx-runtime";
|
4659
4776
|
var Styles2 = () => {
|
4660
|
-
return /* @__PURE__ */
|
4777
|
+
return /* @__PURE__ */ jsx64(
|
4661
4778
|
Global2,
|
4662
4779
|
{
|
4663
4780
|
styles: `
|
@@ -4689,7 +4806,7 @@ var Styles2 = () => {
|
|
4689
4806
|
var styles_default2 = Styles2;
|
4690
4807
|
|
4691
4808
|
// src/components/toast/components/toast.tsx
|
4692
|
-
import { Fragment as
|
4809
|
+
import { Fragment as Fragment11, jsx as jsx65, jsxs as jsxs30 } from "react/jsx-runtime";
|
4693
4810
|
var DEFAULT_OPTIONS = {
|
4694
4811
|
position: "top-right",
|
4695
4812
|
autoClose: 5e3,
|
@@ -4720,14 +4837,14 @@ var useToast = () => {
|
|
4720
4837
|
"success.500"
|
4721
4838
|
]);
|
4722
4839
|
const content = (icon, message, link) => {
|
4723
|
-
return /* @__PURE__ */
|
4724
|
-
/* @__PURE__ */
|
4725
|
-
/* @__PURE__ */
|
4726
|
-
/* @__PURE__ */
|
4727
|
-
icon && /* @__PURE__ */
|
4728
|
-
/* @__PURE__ */
|
4840
|
+
return /* @__PURE__ */ jsxs30(Fragment11, { children: [
|
4841
|
+
/* @__PURE__ */ jsx65(styles_default2, {}),
|
4842
|
+
/* @__PURE__ */ jsxs30(Flex18, { justifyContent: "space-between", alignItems: "center", gap: 4, children: [
|
4843
|
+
/* @__PURE__ */ jsxs30(Flex18, { alignItems: "center", children: [
|
4844
|
+
icon && /* @__PURE__ */ jsx65(chakra7.span, { mr: 2, w: 4, h: 4, children: renderIcon(icon, "default") }),
|
4845
|
+
/* @__PURE__ */ jsx65(chakra7.span, { noOfLines: 2, children: message })
|
4729
4846
|
] }),
|
4730
|
-
link && /* @__PURE__ */
|
4847
|
+
link && /* @__PURE__ */ jsx65(
|
4731
4848
|
Link6,
|
4732
4849
|
{
|
4733
4850
|
href: link.url,
|
@@ -4808,11 +4925,11 @@ import { ToastContainer } from "react-toastify";
|
|
4808
4925
|
|
4809
4926
|
// src/components/uploader/components/uploader.tsx
|
4810
4927
|
import {
|
4811
|
-
Box as
|
4928
|
+
Box as Box30,
|
4812
4929
|
Button as Button7,
|
4813
|
-
Flex as
|
4930
|
+
Flex as Flex19,
|
4814
4931
|
FormControl as FormControl4,
|
4815
|
-
FormLabel as
|
4932
|
+
FormLabel as FormLabel3,
|
4816
4933
|
Heading as Heading2,
|
4817
4934
|
Image as ChakraImage,
|
4818
4935
|
ListItem as ListItem2,
|
@@ -4821,7 +4938,7 @@ import {
|
|
4821
4938
|
UnorderedList as UnorderedList2
|
4822
4939
|
} from "@chakra-ui/react";
|
4823
4940
|
import { Close as X, Plus } from "@ctlyst.id/internal-icon";
|
4824
|
-
import { useCallback as useCallback2, useEffect as
|
4941
|
+
import { useCallback as useCallback2, useEffect as useEffect3, useRef, useState as useState4 } from "react";
|
4825
4942
|
import { useDropzone } from "react-dropzone";
|
4826
4943
|
|
4827
4944
|
// src/components/uploader/constants.ts
|
@@ -4851,7 +4968,7 @@ var concatList = (list) => {
|
|
4851
4968
|
var formatValidationMessage = (extension) => `Foto harus dalam format ${concatList(extension.map((ext) => `.${ext}`))}.`;
|
4852
4969
|
|
4853
4970
|
// src/components/uploader/components/uploader.tsx
|
4854
|
-
import { Fragment as
|
4971
|
+
import { Fragment as Fragment12, jsx as jsx66, jsxs as jsxs31 } from "react/jsx-runtime";
|
4855
4972
|
import { createElement } from "react";
|
4856
4973
|
var Uploader = ({
|
4857
4974
|
onHandleUploadFile,
|
@@ -4940,18 +5057,18 @@ var Uploader = ({
|
|
4940
5057
|
});
|
4941
5058
|
const renderHelperText = () => {
|
4942
5059
|
if (Array.isArray(helperText)) {
|
4943
|
-
return /* @__PURE__ */
|
5060
|
+
return /* @__PURE__ */ jsx66(UnorderedList2, { pl: 2, fontSize: 12, color: "gray.600", "data-test-id": "CT_component_base-image-uploader_helperText", children: helperText.map((text2) => /* @__PURE__ */ jsx66(ListItem2, { children: text2 }, text2)) });
|
4944
5061
|
}
|
4945
5062
|
return helperText;
|
4946
5063
|
};
|
4947
|
-
const renderErrorText = (text2) => /* @__PURE__ */
|
5064
|
+
const renderErrorText = (text2) => /* @__PURE__ */ jsx66(Box30, { mb: 2, children: /* @__PURE__ */ jsx66(Text18, { textStyle: "text.xs", color: "danger.500", children: text2 }) });
|
4948
5065
|
const handleRemove = (e) => {
|
4949
5066
|
e.stopPropagation();
|
4950
5067
|
setFilePreview(void 0);
|
4951
5068
|
onHandleUploadFile == null ? void 0 : onHandleUploadFile(null, null);
|
4952
5069
|
acceptedFiles.pop();
|
4953
5070
|
};
|
4954
|
-
|
5071
|
+
useEffect3(() => {
|
4955
5072
|
if (value) {
|
4956
5073
|
if (typeof value === "string") {
|
4957
5074
|
setFilePreview(value);
|
@@ -4967,16 +5084,16 @@ var Uploader = ({
|
|
4967
5084
|
const color = isDisabled ? "neutral.500" : "primary.500";
|
4968
5085
|
const containerHeight = !isSmall ? "160px" : "120px";
|
4969
5086
|
const cursorType = filePreview ? "initial" : "pointer";
|
4970
|
-
return /* @__PURE__ */
|
5087
|
+
return /* @__PURE__ */ jsxs31(FormControl4, { isRequired, children: [
|
4971
5088
|
label && typeof label === "string" ? (
|
4972
5089
|
// eslint-disable-next-line react/jsx-no-useless-fragment
|
4973
|
-
/* @__PURE__ */
|
4974
|
-
isRequired && /* @__PURE__ */
|
5090
|
+
/* @__PURE__ */ jsxs31(FormLabel3, { requiredIndicator: /* @__PURE__ */ jsx66(Fragment12, {}), fontSize: "text.sm", children: [
|
5091
|
+
isRequired && /* @__PURE__ */ jsx66(RequiredIndicator2, { mr: 1, ml: 0 }),
|
4975
5092
|
label
|
4976
5093
|
] })
|
4977
5094
|
) : label,
|
4978
|
-
/* @__PURE__ */
|
4979
|
-
|
5095
|
+
/* @__PURE__ */ jsxs31(
|
5096
|
+
Flex19,
|
4980
5097
|
{
|
4981
5098
|
minH: containerHeight,
|
4982
5099
|
maxW: !isSmall ? "full" : "120px",
|
@@ -4993,7 +5110,7 @@ var Uploader = ({
|
|
4993
5110
|
...props,
|
4994
5111
|
...getRootProps(),
|
4995
5112
|
children: [
|
4996
|
-
filePreview && isShowCloseButton && /* @__PURE__ */
|
5113
|
+
filePreview && isShowCloseButton && /* @__PURE__ */ jsx66(Box30, { position: "absolute", top: 1, right: 1, children: /* @__PURE__ */ jsx66(
|
4997
5114
|
Button7,
|
4998
5115
|
{
|
4999
5116
|
"data-test-id": `CT_component_base-image-uploader_remove-image${testId ? `_${testId}` : ""}`,
|
@@ -5008,17 +5125,17 @@ var Uploader = ({
|
|
5008
5125
|
border: "none",
|
5009
5126
|
zIndex: 1,
|
5010
5127
|
onClick: handleRemove,
|
5011
|
-
children: /* @__PURE__ */
|
5128
|
+
children: /* @__PURE__ */ jsx66(X, { size: 3, color: "white" })
|
5012
5129
|
}
|
5013
5130
|
) }),
|
5014
|
-
filePreview && /* @__PURE__ */
|
5015
|
-
|
5131
|
+
filePreview && /* @__PURE__ */ jsx66(Box30, { w: "full", children: /* @__PURE__ */ jsx66(
|
5132
|
+
Flex19,
|
5016
5133
|
{
|
5017
5134
|
position: "relative",
|
5018
5135
|
"data-test-id": `CT_component_base-image-uploader_image-preview${testId ? `_${testId}` : ""}`,
|
5019
5136
|
justify: "center",
|
5020
5137
|
align: "center",
|
5021
|
-
children: /* @__PURE__ */
|
5138
|
+
children: /* @__PURE__ */ jsx66(
|
5022
5139
|
ChakraImage,
|
5023
5140
|
{
|
5024
5141
|
h: size2 === "lg" ? "120" : "100",
|
@@ -5029,18 +5146,18 @@ var Uploader = ({
|
|
5029
5146
|
)
|
5030
5147
|
}
|
5031
5148
|
) }),
|
5032
|
-
!filePreview && /* @__PURE__ */
|
5033
|
-
/* @__PURE__ */
|
5149
|
+
!filePreview && /* @__PURE__ */ jsxs31(Fragment12, { children: [
|
5150
|
+
/* @__PURE__ */ jsx66(
|
5034
5151
|
"input",
|
5035
5152
|
{
|
5036
5153
|
"data-test-id": `CT_component_base-image-uploader_input-file${testId ? `_${testId}` : ""}`,
|
5037
5154
|
...getInputProps()
|
5038
5155
|
}
|
5039
5156
|
),
|
5040
|
-
isDragActive ? /* @__PURE__ */
|
5041
|
-
size2 === "sm" && /* @__PURE__ */
|
5042
|
-
/* @__PURE__ */
|
5043
|
-
!filePreview && /* @__PURE__ */
|
5157
|
+
isDragActive ? /* @__PURE__ */ jsx66(Text18, { children: dragActiveText != null ? dragActiveText : messages.dragActive }) : /* @__PURE__ */ jsxs31(Flex19, { gap: 2, flexDirection: "column", alignItems: "center", color: isError ? "danger.500" : color, children: [
|
5158
|
+
size2 === "sm" && /* @__PURE__ */ jsx66(Plus, { size: 6, color }),
|
5159
|
+
/* @__PURE__ */ jsxs31(Box30, { children: [
|
5160
|
+
!filePreview && /* @__PURE__ */ jsx66(
|
5044
5161
|
Heading2,
|
5045
5162
|
{
|
5046
5163
|
fontWeight: "400",
|
@@ -5050,14 +5167,14 @@ var Uploader = ({
|
|
5050
5167
|
children: uploadFileText && size2 === "lg" ? messages.uploadFile : "Upload"
|
5051
5168
|
}
|
5052
5169
|
),
|
5053
|
-
size2 === "lg" && /* @__PURE__ */
|
5170
|
+
size2 === "lg" && /* @__PURE__ */ jsx66(Text18, { fontSize: 12, children: filePreview ? dragReplaceText != null ? dragReplaceText : messages.dragReplace : dragInActiveText != null ? dragInActiveText : messages.dragInActive })
|
5054
5171
|
] })
|
5055
5172
|
] })
|
5056
5173
|
] })
|
5057
5174
|
]
|
5058
5175
|
}
|
5059
5176
|
),
|
5060
|
-
filePreview && !isSmall && /* @__PURE__ */
|
5177
|
+
filePreview && !isSmall && /* @__PURE__ */ jsxs31(Flex19, { align: "center", justify: "center", my: 2, children: [
|
5061
5178
|
/* @__PURE__ */ createElement(
|
5062
5179
|
"input",
|
5063
5180
|
{
|
@@ -5068,7 +5185,7 @@ var Uploader = ({
|
|
5068
5185
|
"data-test-id": `CT_component_base-image-uploader_change-img${testId ? `_${testId}` : ""}`
|
5069
5186
|
}
|
5070
5187
|
),
|
5071
|
-
isShowReupload && /* @__PURE__ */
|
5188
|
+
isShowReupload && /* @__PURE__ */ jsx66(
|
5072
5189
|
Button7,
|
5073
5190
|
{
|
5074
5191
|
"data-test-id": `CT_component_base-image-uploader_change-img-btn${testId ? `_${testId}` : ""}`,
|
@@ -5884,10 +6001,10 @@ var baseStyle5 = defineStyle2({
|
|
5884
6001
|
marginEnd: 1,
|
5885
6002
|
mb: 1
|
5886
6003
|
});
|
5887
|
-
var
|
6004
|
+
var FormLabel4 = defineStyleConfig3({
|
5888
6005
|
baseStyle: baseStyle5
|
5889
6006
|
});
|
5890
|
-
var form_label_default =
|
6007
|
+
var form_label_default = FormLabel4;
|
5891
6008
|
|
5892
6009
|
// src/config/theme/components/input.ts
|
5893
6010
|
import { inputAnatomy as parts3 } from "@chakra-ui/anatomy";
|
@@ -5997,7 +6114,7 @@ var variants3 = {
|
|
5997
6114
|
outline: outline2,
|
5998
6115
|
unstyled: unstyled2
|
5999
6116
|
};
|
6000
|
-
var
|
6117
|
+
var Input4 = defineMultiStyleConfig5({
|
6001
6118
|
baseStyle: baseStyle6,
|
6002
6119
|
sizes: sizes2,
|
6003
6120
|
variants: variants3,
|
@@ -6006,7 +6123,7 @@ var Input3 = defineMultiStyleConfig5({
|
|
6006
6123
|
variant: "outline"
|
6007
6124
|
}
|
6008
6125
|
});
|
6009
|
-
var input_default =
|
6126
|
+
var input_default = Input4;
|
6010
6127
|
|
6011
6128
|
// src/config/theme/components/loader.ts
|
6012
6129
|
import { defineStyleConfig as defineStyleConfig4 } from "@chakra-ui/styled-system";
|
@@ -6785,9 +6902,9 @@ import { useMemo as useMemo5 } from "react";
|
|
6785
6902
|
|
6786
6903
|
// src/provider/components/provider.tsx
|
6787
6904
|
import axios from "axios";
|
6788
|
-
import { createContext as createContext2, useContext, useEffect as
|
6905
|
+
import { createContext as createContext2, useContext, useEffect as useEffect4, useMemo as useMemo4, useRef as useRef2 } from "react";
|
6789
6906
|
import { ToastContainer as ToastContainer2 } from "react-toastify";
|
6790
|
-
import { jsx as
|
6907
|
+
import { jsx as jsx67, jsxs as jsxs32 } from "react/jsx-runtime";
|
6791
6908
|
var ProviderContext = createContext2({
|
6792
6909
|
instance: void 0
|
6793
6910
|
});
|
@@ -6797,7 +6914,7 @@ var useInternalUI = () => {
|
|
6797
6914
|
};
|
6798
6915
|
var Provider = ({ children, config: config2, requestInterceptors, responseInterceptors }) => {
|
6799
6916
|
const instanceRef = useRef2(axios.create(config2));
|
6800
|
-
|
6917
|
+
useEffect4(() => {
|
6801
6918
|
requestInterceptors == null ? void 0 : requestInterceptors.forEach((interceptor) => {
|
6802
6919
|
instanceRef.current.interceptors.request.use(interceptor);
|
6803
6920
|
});
|
@@ -6806,8 +6923,8 @@ var Provider = ({ children, config: config2, requestInterceptors, responseInterc
|
|
6806
6923
|
});
|
6807
6924
|
}, [requestInterceptors, responseInterceptors]);
|
6808
6925
|
const provider = useMemo4(() => ({ instance: instanceRef.current }), []);
|
6809
|
-
return /* @__PURE__ */
|
6810
|
-
/* @__PURE__ */
|
6926
|
+
return /* @__PURE__ */ jsxs32(ProviderContext.Provider, { value: provider, children: [
|
6927
|
+
/* @__PURE__ */ jsx67(ToastContainer2, {}),
|
6811
6928
|
children
|
6812
6929
|
] });
|
6813
6930
|
};
|
@@ -6864,7 +6981,7 @@ import {
|
|
6864
6981
|
} from "@chakra-ui/react";
|
6865
6982
|
|
6866
6983
|
// src/index.ts
|
6867
|
-
import { extendTheme, forwardRef as
|
6984
|
+
import { extendTheme, forwardRef as forwardRef13 } from "@chakra-ui/react";
|
6868
6985
|
export {
|
6869
6986
|
Accordion,
|
6870
6987
|
AccordionButton,
|
@@ -7131,6 +7248,8 @@ export {
|
|
7131
7248
|
Th2 as Th,
|
7132
7249
|
Thead2 as Thead,
|
7133
7250
|
ThemeTypings,
|
7251
|
+
Time,
|
7252
|
+
TimeInput2 as TimeInput,
|
7134
7253
|
ToastContainer,
|
7135
7254
|
Tooltip,
|
7136
7255
|
Tr2 as Tr,
|
@@ -7177,7 +7296,7 @@ export {
|
|
7177
7296
|
XMSLogo,
|
7178
7297
|
createExtendTheme,
|
7179
7298
|
extendTheme,
|
7180
|
-
|
7299
|
+
forwardRef13 as forwardRef,
|
7181
7300
|
getSelectAllCheckboxState,
|
7182
7301
|
getTheme,
|
7183
7302
|
isCellDisabled,
|