@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.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,