@ctlyst.id/internal-ui 3.3.3 → 3.3.6
Sign up to get free protection for your applications and to get access to all the features.
- 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.mjs
CHANGED
@@ -38,23 +38,14 @@ var AccordionIndicator = () => {
|
|
38
38
|
import {
|
39
39
|
Accordion,
|
40
40
|
AccordionButton,
|
41
|
-
AccordionButtonProps,
|
42
41
|
AccordionIcon,
|
43
|
-
AccordionIconProps,
|
44
42
|
AccordionItem,
|
45
|
-
AccordionItemProps,
|
46
43
|
AccordionPanel,
|
47
|
-
AccordionPanelProps,
|
48
|
-
AccordionProps,
|
49
44
|
AccordionProvider,
|
50
45
|
useAccordion,
|
51
46
|
useAccordionContext,
|
52
47
|
useAccordionItem,
|
53
|
-
UseAccordionItemProps,
|
54
|
-
UseAccordionItemReturn,
|
55
48
|
useAccordionItemState as useAccordionItemState2,
|
56
|
-
UseAccordionProps,
|
57
|
-
UseAccordionReturn,
|
58
49
|
useAccordionStyles
|
59
50
|
} from "@chakra-ui/react";
|
60
51
|
|
@@ -529,39 +520,12 @@ var Field = (props) => {
|
|
529
520
|
};
|
530
521
|
const helperColor = getHelperColor();
|
531
522
|
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();
|
546
523
|
return /* @__PURE__ */ jsxs3(FormControl, { isInvalid: isError, ...boxProps, children: [
|
547
524
|
label && (typeof label === "string" ? /* @__PURE__ */ jsxs3(FormLabel, { mb: 1, fontSize: "text.sm", requiredIndicator: void 0, children: [
|
548
525
|
isRequired && /* @__PURE__ */ jsx17(Box6, { as: "span", color: "danger.500", ml: 0, mr: 1, children: "*" }),
|
549
526
|
label
|
550
527
|
] }) : label),
|
551
|
-
|
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
|
-
),
|
528
|
+
children,
|
565
529
|
(isError && errorMessage || leftHelperText || rightHelperText) && /* @__PURE__ */ jsxs3(Box6, { display: "flex", width: "full", justifyContent: justifyHelper, children: [
|
566
530
|
!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,
|
567
531
|
rightHelperText && (typeof rightHelperText === "string" ? /* @__PURE__ */ jsx17(FormHelperText, { fontSize: "text.xs", color: helperColor, mt: 1, children: rightHelperText }) : rightHelperText)
|
@@ -699,6 +663,19 @@ var InputField = React2.forwardRef((props, ref) => {
|
|
699
663
|
isLoading,
|
700
664
|
...inputProps
|
701
665
|
} = props;
|
666
|
+
const getProperties = () => {
|
667
|
+
let outlineColor2 = "neutral.400";
|
668
|
+
let focusColor2 = "primary.500";
|
669
|
+
if (isError || isDisabled || isSuccess) {
|
670
|
+
if (isError) outlineColor2 = "danger.500";
|
671
|
+
else if (isSuccess) outlineColor2 = "success.500";
|
672
|
+
focusColor2 = outlineColor2;
|
673
|
+
}
|
674
|
+
return {
|
675
|
+
outlineColor: outlineColor2,
|
676
|
+
focusColor: focusColor2
|
677
|
+
};
|
678
|
+
};
|
702
679
|
const [isShowPassword, setIsShowPassword] = useState(false);
|
703
680
|
const inputType = useMemo(() => {
|
704
681
|
return type === "password" && isShowPassword ? "text" : type;
|
@@ -712,6 +689,7 @@ var InputField = React2.forwardRef((props, ref) => {
|
|
712
689
|
const iconColor = useMemo(() => {
|
713
690
|
return isDisabled ? "black.low" : "black.medium";
|
714
691
|
}, [isDisabled]);
|
692
|
+
const { outlineColor, focusColor } = getProperties();
|
715
693
|
return /* @__PURE__ */ jsx21(
|
716
694
|
field_default,
|
717
695
|
{
|
@@ -722,80 +700,92 @@ var InputField = React2.forwardRef((props, ref) => {
|
|
722
700
|
leftHelperText,
|
723
701
|
rightHelperText,
|
724
702
|
isRequired,
|
725
|
-
|
726
|
-
|
727
|
-
InputGroup,
|
703
|
+
children: /* @__PURE__ */ jsx21(
|
704
|
+
Box8,
|
728
705
|
{
|
729
|
-
|
706
|
+
transition: "all 0.15s",
|
707
|
+
boxShadow: "none",
|
730
708
|
borderRadius: "sm",
|
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
|
-
|
784
|
-
|
785
|
-
|
786
|
-
|
787
|
-
|
788
|
-
|
789
|
-
|
790
|
-
|
791
|
-
|
792
|
-
|
793
|
-
|
794
|
-
|
795
|
-
|
796
|
-
|
797
|
-
|
798
|
-
|
709
|
+
border: "1px solid",
|
710
|
+
borderColor: outlineColor,
|
711
|
+
_focusWithin: {
|
712
|
+
borderColor: focusColor
|
713
|
+
},
|
714
|
+
children: /* @__PURE__ */ jsxs5(
|
715
|
+
InputGroup,
|
716
|
+
{
|
717
|
+
size: size2,
|
718
|
+
borderRadius: "sm",
|
719
|
+
backgroundColor: isDisabled ? "neutral.300" : "white.high",
|
720
|
+
cursor: isDisabled ? "not-allowed" : "default",
|
721
|
+
children: [
|
722
|
+
addOnLeft,
|
723
|
+
/* @__PURE__ */ jsx21(
|
724
|
+
ChakraInput,
|
725
|
+
{
|
726
|
+
ref,
|
727
|
+
type: inputType,
|
728
|
+
value,
|
729
|
+
isDisabled,
|
730
|
+
isSuccess,
|
731
|
+
...inputProps,
|
732
|
+
fontSize
|
733
|
+
}
|
734
|
+
),
|
735
|
+
(withClear || isLoading || type === "password") && /* @__PURE__ */ jsxs5(
|
736
|
+
Box8,
|
737
|
+
{
|
738
|
+
"data-test-id": "CT_Component_ClearInput",
|
739
|
+
display: "flex",
|
740
|
+
alignItems: "center",
|
741
|
+
justifyContent: "center",
|
742
|
+
width: "16px",
|
743
|
+
mr: "10px",
|
744
|
+
children: [
|
745
|
+
withClear && !isLoading && /* @__PURE__ */ jsx21(
|
746
|
+
Box8,
|
747
|
+
{
|
748
|
+
display: "flex",
|
749
|
+
justifyContent: "center",
|
750
|
+
onClick: !isDisabled ? onClear : void 0,
|
751
|
+
cursor: isDisabled ? "not-allowed" : "pointer",
|
752
|
+
children: /* @__PURE__ */ jsx21(Close2, { size: 4, color: iconColor })
|
753
|
+
}
|
754
|
+
),
|
755
|
+
type === "password" && !isShowPassword && !isLoading && /* @__PURE__ */ jsx21(
|
756
|
+
Box8,
|
757
|
+
{
|
758
|
+
"data-test-id": "q2Bj2G4FlamXyHuRKMZ1Q",
|
759
|
+
onClick: () => {
|
760
|
+
if (!isDisabled) setIsShowPassword(true);
|
761
|
+
},
|
762
|
+
cursor: isDisabled ? "not-allowed" : "pointer",
|
763
|
+
display: "flex",
|
764
|
+
justifyContent: "center",
|
765
|
+
children: /* @__PURE__ */ jsx21(EyeOff, { size: 4, color: iconColor })
|
766
|
+
}
|
767
|
+
),
|
768
|
+
type === "password" && isShowPassword && !isLoading && /* @__PURE__ */ jsx21(
|
769
|
+
Box8,
|
770
|
+
{
|
771
|
+
"data-test-id": "sfc2388bmeXBmdla45Ibk",
|
772
|
+
onClick: () => {
|
773
|
+
if (!isDisabled) setIsShowPassword(false);
|
774
|
+
},
|
775
|
+
cursor: isDisabled ? "not-allowed" : "pointer",
|
776
|
+
display: "flex",
|
777
|
+
justifyContent: "center",
|
778
|
+
children: /* @__PURE__ */ jsx21(Eye2, { size: 4, color: iconColor })
|
779
|
+
}
|
780
|
+
),
|
781
|
+
isLoading && /* @__PURE__ */ jsx21(loader_default, { size: "sm" })
|
782
|
+
]
|
783
|
+
}
|
784
|
+
),
|
785
|
+
addOnRight
|
786
|
+
]
|
787
|
+
}
|
788
|
+
)
|
799
789
|
}
|
800
790
|
)
|
801
791
|
}
|
@@ -4657,14 +4647,14 @@ import { Clock } from "@ctlyst.id/internal-icon";
|
|
4657
4647
|
import { useEffect as useEffect3, useImperativeHandle as useImperativeHandle2 } from "react";
|
4658
4648
|
|
4659
4649
|
// src/components/time-input/components/integration.tsx
|
4650
|
+
import { $NOW, TimescapeManager } from "@zamiru/timescape";
|
4651
|
+
import { marry } from "@zamiru/timescape";
|
4660
4652
|
import {
|
4661
4653
|
useEffect as useEffect2,
|
4662
4654
|
useLayoutEffect,
|
4663
4655
|
useRef,
|
4664
4656
|
useState as useState4
|
4665
4657
|
} from "react";
|
4666
|
-
import { $NOW, TimescapeManager } from "timescape";
|
4667
|
-
import { marry } from "timescape";
|
4668
4658
|
var useTimescape = (options = {}) => {
|
4669
4659
|
var _a;
|
4670
4660
|
const { date, onChangeDate, ...rest } = options;
|
@@ -4805,6 +4795,20 @@ var TimeInput2 = forwardRef12(
|
|
4805
4795
|
}));
|
4806
4796
|
const rootProps = getRootProps();
|
4807
4797
|
const hoursProps = getInputProps("hours");
|
4798
|
+
const getProperties = () => {
|
4799
|
+
let outlineColor2 = "neutral.400";
|
4800
|
+
let focusColor2 = "primary.500";
|
4801
|
+
if (isError || isDisabled || isSuccess) {
|
4802
|
+
if (isError) outlineColor2 = "danger.500";
|
4803
|
+
else if (isSuccess) outlineColor2 = "success.500";
|
4804
|
+
focusColor2 = outlineColor2;
|
4805
|
+
}
|
4806
|
+
return {
|
4807
|
+
outlineColor: outlineColor2,
|
4808
|
+
focusColor: focusColor2
|
4809
|
+
};
|
4810
|
+
};
|
4811
|
+
const { outlineColor, focusColor } = getProperties();
|
4808
4812
|
return /* @__PURE__ */ jsx63(Box29, { ...boxProps, ...rootProps, children: /* @__PURE__ */ jsx63(
|
4809
4813
|
field_default,
|
4810
4814
|
{
|
@@ -4814,28 +4818,41 @@ var TimeInput2 = forwardRef12(
|
|
4814
4818
|
errorMessage,
|
4815
4819
|
isDisabled,
|
4816
4820
|
isSuccess,
|
4817
|
-
children: /* @__PURE__ */
|
4818
|
-
|
4821
|
+
children: /* @__PURE__ */ jsx63(
|
4822
|
+
Box29,
|
4819
4823
|
{
|
4824
|
+
transition: "all 0.15s",
|
4825
|
+
boxShadow: "none",
|
4820
4826
|
borderRadius: "sm",
|
4821
|
-
|
4822
|
-
|
4823
|
-
|
4824
|
-
|
4825
|
-
|
4826
|
-
|
4827
|
-
|
4828
|
-
|
4829
|
-
|
4830
|
-
|
4831
|
-
|
4832
|
-
|
4833
|
-
|
4834
|
-
|
4835
|
-
|
4836
|
-
|
4837
|
-
|
4838
|
-
|
4827
|
+
border: "1px solid",
|
4828
|
+
borderColor: outlineColor,
|
4829
|
+
_focusWithin: {
|
4830
|
+
borderColor: focusColor
|
4831
|
+
},
|
4832
|
+
children: /* @__PURE__ */ jsxs29(
|
4833
|
+
InputGroup5,
|
4834
|
+
{
|
4835
|
+
borderRadius: "sm",
|
4836
|
+
backgroundColor: isDisabled ? "neutral.300" : "white.high",
|
4837
|
+
cursor: isDisabled ? "not-allowed" : "default",
|
4838
|
+
alignItems: "center",
|
4839
|
+
gap: 3,
|
4840
|
+
children: [
|
4841
|
+
/* @__PURE__ */ jsxs29(Flex17, { gap: 1, width: "100%", alignItems: "center", pl: 2, children: [
|
4842
|
+
/* @__PURE__ */ jsx63(InputTimeArea, { ...hoursProps }),
|
4843
|
+
/* @__PURE__ */ jsx63("span", { children: ":" }),
|
4844
|
+
/* @__PURE__ */ jsx63(InputTimeArea, { ...getInputProps("minutes") }),
|
4845
|
+
seconds && /* @__PURE__ */ jsxs29(Fragment10, { children: [
|
4846
|
+
/* @__PURE__ */ jsx63("span", { children: ":" }),
|
4847
|
+
/* @__PURE__ */ jsx63(InputTimeArea, { ...getInputProps("seconds") })
|
4848
|
+
] }),
|
4849
|
+
options.hour12 && /* @__PURE__ */ jsx63(Input3, { p: 0, ...getInputProps("am/pm") })
|
4850
|
+
] }),
|
4851
|
+
/* @__PURE__ */ jsx63(Clock, { color: "neutral.400" }),
|
4852
|
+
addOnRight
|
4853
|
+
]
|
4854
|
+
}
|
4855
|
+
)
|
4839
4856
|
}
|
4840
4857
|
)
|
4841
4858
|
}
|
@@ -7062,16 +7079,11 @@ import { extendTheme, forwardRef as forwardRef13 } from "@chakra-ui/react";
|
|
7062
7079
|
export {
|
7063
7080
|
Accordion,
|
7064
7081
|
AccordionButton,
|
7065
|
-
AccordionButtonProps,
|
7066
7082
|
AccordionEye,
|
7067
7083
|
AccordionIcon,
|
7068
|
-
AccordionIconProps,
|
7069
7084
|
AccordionIndicator,
|
7070
7085
|
AccordionItem,
|
7071
|
-
AccordionItemProps,
|
7072
7086
|
AccordionPanel,
|
7073
|
-
AccordionPanelProps,
|
7074
|
-
AccordionProps,
|
7075
7087
|
AccordionProvider,
|
7076
7088
|
Alert,
|
7077
7089
|
AlertAction,
|
@@ -7332,10 +7344,6 @@ export {
|
|
7332
7344
|
Tr2 as Tr,
|
7333
7345
|
UnorderedList,
|
7334
7346
|
uploader_default as Uploader,
|
7335
|
-
UseAccordionItemProps,
|
7336
|
-
UseAccordionItemReturn,
|
7337
|
-
UseAccordionProps,
|
7338
|
-
UseAccordionReturn,
|
7339
7347
|
UseBreakpointOptions,
|
7340
7348
|
UseCheckboxGroupProps,
|
7341
7349
|
UseCheckboxGroupReturn,
|