@ctlyst.id/internal-ui 3.3.3 → 3.3.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +148 -140
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +148 -140
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/dist/index.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,
|