@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.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
- /* @__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
- ),
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
- isDisabled,
726
- children: /* @__PURE__ */ jsxs5(
727
- InputGroup,
703
+ children: /* @__PURE__ */ jsx21(
704
+ Box8,
728
705
  {
729
- size: size2,
706
+ transition: "all 0.15s",
707
+ boxShadow: "none",
730
708
  borderRadius: "sm",
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
- ]
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__ */ jsxs29(
4818
- InputGroup5,
4821
+ children: /* @__PURE__ */ jsx63(
4822
+ Box29,
4819
4823
  {
4824
+ transition: "all 0.15s",
4825
+ boxShadow: "none",
4820
4826
  borderRadius: "sm",
4821
- backgroundColor: isDisabled ? "neutral.300" : "white.high",
4822
- cursor: isDisabled ? "not-allowed" : "default",
4823
- alignItems: "center",
4824
- gap: 3,
4825
- children: [
4826
- /* @__PURE__ */ jsxs29(Flex17, { gap: 1, width: "100%", alignItems: "center", pl: 2, children: [
4827
- /* @__PURE__ */ jsx63(InputTimeArea, { ...hoursProps }),
4828
- /* @__PURE__ */ jsx63("span", { children: ":" }),
4829
- /* @__PURE__ */ jsx63(InputTimeArea, { ...getInputProps("minutes") }),
4830
- seconds && /* @__PURE__ */ jsxs29(Fragment10, { children: [
4831
- /* @__PURE__ */ jsx63("span", { children: ":" }),
4832
- /* @__PURE__ */ jsx63(InputTimeArea, { ...getInputProps("seconds") })
4833
- ] }),
4834
- options.hour12 && /* @__PURE__ */ jsx63(Input3, { p: 0, ...getInputProps("am/pm") })
4835
- ] }),
4836
- /* @__PURE__ */ jsx63(Clock, { color: "neutral.400" }),
4837
- addOnRight
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,