@ctlyst.id/internal-ui 2.3.0 → 2.3.1

package/dist/index.mjs

@@ -1242,18 +1242,19 @@ import {
   FormErrorMessage as FormErrorMessage3,
   FormHelperText as FormHelperText3,
   FormLabel as FormLabel3,
+  IconButton as IconButton3,
   InputGroup as InputGroup4,
   InputRightElement as InputRightElement3
 } from "@chakra-ui/react";
 import { cx as cx8 } from "@chakra-ui/shared-utils";
+import { Calendar, Close as Close4 } from "@ctlyst.id/internal-icon";
 import ReactDatePicker from "react-datepicker";
-import { FiCalendar, FiX } from "react-icons/fi";
 
 // src/components/datepicker/components/styles.tsx
 import { useColorMode } from "@chakra-ui/system";
 import { Global } from "@emotion/react";
 import { jsx as jsx24 } from "react/jsx-runtime";
-var Styles = () => {
+var Styles = ({ showHeader }) => {
   const { colorMode } = useColorMode();
   return /* @__PURE__ */ jsx24(
     Global,
@@ -1333,8 +1334,7 @@ var Styles = () => {
       }
 
       .react-datepicker {
-        font-family: "inherit", helvetica, arial, sans-serif;
-        font-size: 0.75;
+        font-family: Poppins;
         background-color: ${colorMode === "light" ? "#ffffff" : "#283046"};
         color: ${colorMode === "light" ? "#000" : "#d0d1d2"};
         filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, 0.08));
@@ -1394,9 +1394,9 @@ var Styles = () => {
 
       .react-datepicker__header {
         text-align: center;
-        background-color: ${colorMode === "light" ? "#ffffff" : "#131620"};
+        background-color: '#ffffff';
         border-top-left-radius: 0.3rem;
-        padding: 8px 0;
+        padding-top:16px;
         position: relative;
       }
       .react-datepicker__header--time {
@@ -1429,9 +1429,11 @@ var Styles = () => {
       .react-datepicker__current-month,
       .react-datepicker-time__header,
       .react-datepicker-year-header {
+        display:${showHeader ? "block" : "none"};
         margin-top: 0;
         color: ${colorMode === "light" ? "#111111" : "#d0d1d2"};
-        font-size: 0.75;
+        font-size:14px;
+        font-weight:600;
       }
 
       .react-datepicker-time__header {
@@ -1448,7 +1450,7 @@ var Styles = () => {
         text-align: center;
         cursor: pointer;
         position: absolute;
-        top: 2px;
+        top: 10px;
         padding: 0;
         border: none;
         z-index: 1;
@@ -1458,10 +1460,14 @@ var Styles = () => {
         overflow: hidden;
       }
       .react-datepicker__navigation--previous {
-        left: 2px;
+        left: 22px;
+        border:1px solid var(--chakra-colors-neutral-400);
+        border-radius:4px;
       }
       .react-datepicker__navigation--next {
-        right: 2px;
+        right: 22px;
+        border:1px solid var(--chakra-colors-neutral-400);
+        border-radius:4px;
       }
       .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
         right: 85px;
@@ -1494,14 +1500,14 @@ var Styles = () => {
       }
       .react-datepicker__navigation-icon--next::before {
         transform: rotate(45deg);
-        left: -7px;
+        left: -4px;
       }
       .react-datepicker__navigation-icon--previous {
         right: -2px;
       }
       .react-datepicker__navigation-icon--previous::before {
         transform: rotate(225deg);
-        right: -7px;
+        right: -4px;
       }
 
       .react-datepicker__month-container {
@@ -1525,7 +1531,7 @@ var Styles = () => {
       }
 
       .react-datepicker__month {
-        margin: 0.4rem;
+        padding: 0 1rem 1rem 1rem;
         text-align: center;
       }
       .react-datepicker__month .react-datepicker__month-text,
@@ -1649,17 +1655,20 @@ var Styles = () => {
 
       .react-datepicker__day-names {
         margin-bottom: 0px;
+        margin-top: 8px;
       }
 
       .react-datepicker__day-name,
       .react-datepicker__day,
       .react-datepicker__time-name {
-        color: ${colorMode === "light" ? "#000" : "#d0d1d2"};
+        colors: #000;
         display: inline-block;
-        width: 1.7rem;
-        line-height: 1.7rem;
+        width: 2.25rem;
+        line-height: 2.25rem;
         text-align: center;
-        padding: 0.166rem;
+      }
+      .react-datepicker__day-name{
+        color:var(--chakra-colors-black-medium)
       }
 
       .react-datepicker__month--selected, .react-datepicker__month--in-selecting-range, .react-datepicker__month--in-range,
@@ -1697,8 +1706,8 @@ var Styles = () => {
       .react-datepicker__month-text:hover,
       .react-datepicker__quarter-text:hover,
       .react-datepicker__year-text:hover {
-        border-radius: 0.3rem;
-        background-color: ${colorMode === "light" ? "#f0f0f0" : "#131620"};
+        border-radius: 2rem;
+        background-color: var(--chakra-colors-neutral-200);
       }
       .react-datepicker__day--highlighted,
       .react-datepicker__month-text--highlighted,
@@ -1736,8 +1745,8 @@ var Styles = () => {
       .react-datepicker__year-text--selected,
       .react-datepicker__year-text--in-selecting-range,
       .react-datepicker__year-text--in-range {
-        border-radius: 0.3rem;
-        background-color: ${colorMode === "light" ? "#12784A" : "#131620"};
+        border-radius: var(--chakra-radii-2xl);
+        background-color: var(--chakra-colors-primary-500);
         color: #fff;
       }
       .react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover,
@@ -1750,13 +1759,13 @@ var Styles = () => {
       .react-datepicker__year-text--selected:hover,
       .react-datepicker__year-text--in-selecting-range:hover,
       .react-datepicker__year-text--in-range:hover {
-        background-color: ${colorMode === "light" ? "#075331" : "#131620"};
+        background-color: var(--chakra-colors-primary-500);
       }
       .react-datepicker__day--keyboard-selected,
       .react-datepicker__month-text--keyboard-selected,
       .react-datepicker__quarter-text--keyboard-selected,
       .react-datepicker__year-text--keyboard-selected {
-        border-radius: 0.3rem;
+        border-radius: 2rem;
         background-color: ${colorMode === "light" ? "#075331" : "#131620"};
         color: #fff;
       }
@@ -1782,7 +1791,7 @@ var Styles = () => {
       .react-datepicker__month-text--in-range,
       .react-datepicker__quarter-text--in-range,
       .react-datepicker__year-text--in-range) {
-        background-color: rgba(18, 120, 74, 0.1);
+        background-color: var(--chakra-colors-primary-50);
         color: ${colorMode === "light" ? "#000" : "#d0d1d2"};
       }
       .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
@@ -1868,7 +1877,7 @@ var Styles = () => {
 
       }
       .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
-        background: ${colorMode === "light" ? "#F5F5F5" : "inherit"} ;
+        background:var(--chakra-colors-neutral-50);
 
         border-top-left-radius: 8px;
         border-top-right-radius: 8px;
@@ -2022,12 +2031,12 @@ var Styles = () => {
       }
       .react-datepicker__day.react-datepicker__day--in-range {
         border-radius: 0;
-        background: rgba(18, 120, 74, 0.1);
-        color: #12784A;
+        background: var(--chakra-colors-primary-50);
+        color: #111111;
       }
       .react-datepicker__day.react-datepicker__day--range-start.react-datepicker__day--in-range,
       .react-datepicker__day.react-datepicker__day--range-end.react-datepicker__day--in-range {
-        background: #12784A;
+        background: var(--chakra-colors-primary-500);
         color: #fff;
       }
       .react-datepicker__day.react-datepicker__day--range-start.react-datepicker__day--in-range {
@@ -2047,18 +2056,45 @@ var Styles = () => {
         background-color: inherit;
       }
       .react-datepicker__day--keyboard-selected, .react-datepicker__day--keyboard-selected:hover {
-        background-color: inherit;
+        background-color: var(--chakra-colors-primary-50);
         color: inherit;
       }
       .react-datepicker__day--today, .react-datepicker__day--today:hover {
-        color: #D82F23;
+        border-radius: 2rem;
+        border-color: var(--chakra-colors-primary-500);
+        border-width: 1px;
+        line-height: 34px;
       }
-      .react-datepicker__day--today:hover {
-        background: #f0f0f0;
+      .react-datepicker__day--today:hover:not(.react-datepicker__day--in-range) {
+        background: var(--chakra-colors-neutral-200);
+        border-color:transparent;
+        color:var(--chakra-colors-black-high);
       }
       .react-datepicker__day--selected.react-datepicker__day--today {
         color: white;
-        background: #12784A;
+        background: var(--chakra-colors-primary-500);
+      }
+      .react-datepicker__aria-live {
+        position: absolute;
+        clip-path: circle(0);
+        border: 0;
+        height: 1px;
+        margin: -1px;
+        overflow: hidden;
+        padding: 0;
+        width: 1px;
+        white-space: nowrap;
+      }
+      .react-datepicker__day.react-datepicker__day--in-range.react-datepicker__day--today{
+        border-radius:0px;
+        border-color:transparent;
+        background-color:var(--chakra-colors-primary-50);
+      }
+      .react-datepicker__month-select,.react-datepicker__year-select {
+        background-color:transparent;
+        font-size:14px;
+        font-weight:600;
+        text-align:center;
       }
     `
     }
@@ -2077,10 +2113,25 @@ var TimeInput = ({ value, onChange, label, rightAddon }) => {
     setTime(((_a = e.target) == null ? void 0 : _a.value) || "00:00");
     if (onChange) onChange(((_b = e.target) == null ? void 0 : _b.value) || "00:00");
   };
-  return /* @__PURE__ */ jsxs10(Flex2, { flexDir: "column", alignItems: "center", justifyContent: "center", p: 4, pt: 0, children: [
+  return /* @__PURE__ */ jsxs10(Flex2, { flexDir: "column", p: 4, pt: 0, children: [
     /* @__PURE__ */ jsx25(Text5, { mb: 2, children: label }),
-    /* @__PURE__ */ jsxs10(InputGroup3, { alignItems: "center", justifyContent: "center", children: [
-      /* @__PURE__ */ jsx25(Input, { onChange: handleChange, type: "time", value: time, "data-test-id": "CT_Component_datepicker_input_time" }),
+    /* @__PURE__ */ jsxs10(InputGroup3, { alignItems: "center", borderColor: "neutral.400", children: [
+      /* @__PURE__ */ jsx25(
+        Input,
+        {
+          onChange: handleChange,
+          type: "time",
+          value: time,
+          "data-test-id": "CT_Component_datepicker_input_time",
+          flex: 1,
+          borderRadius: "sm",
+          border: "1px solid",
+          borderColor: "inherit",
+          _focusWithin: {
+            borderColor: "primary.500"
+          }
+        }
+      ),
       rightAddon && /* @__PURE__ */ jsx25(InputRightAddon3, { children: rightAddon })
     ] })
   ] });
@@ -2111,9 +2162,9 @@ var Datepicker = ({
   shortMonth,
   ...props
 }) => {
-  var _a;
+  var _a, _b;
   const selected = value ? new Date(value) : void 0;
-  const dateFormat = ((_a = props.dateFormat) != null ? _a : withTime) ? "yyyy-MM-dd HH:mm" : "yyyy-MM-dd";
+  const dateFormat = ((_a = props.dateFormat) != null ? _a : withTime) ? "dd MMMM yyyy, HH:mm" : "dd MMMM yyyy";
   const getTimeProps = () => {
     if (!withTime) return {};
     return {
@@ -2122,8 +2173,9 @@ var Datepicker = ({
       customTimeInput: /* @__PURE__ */ jsx26(time_input_default, {})
     };
   };
+  const hasMultipleMonthShow = ((_b = props == null ? void 0 : props.monthsShown) != null ? _b : 1) < 2;
   const component = /* @__PURE__ */ jsxs11(Fragment, { children: [
-    /* @__PURE__ */ jsx26(styles_default, {}),
+    /* @__PURE__ */ jsx26(styles_default, { showHeader: !hasMultipleMonthShow }),
     /* @__PURE__ */ jsx26(
       ReactDatePicker,
       {
@@ -2131,11 +2183,14 @@ var Datepicker = ({
         name,
         selected,
         customInput: /* @__PURE__ */ jsx26(input_field_default, { autoComplete: "off" }),
-        dateFormat,
         showPopperArrow: false,
         calendarClassName: cx8({ inline: props.inline }),
-        showMonthDropdown: showMonth,
+        dropdownMode: "select",
+        showMonthDropdown: hasMultipleMonthShow,
+        showYearDropdown: hasMultipleMonthShow,
+        shouldCloseOnSelect: !(props.selectsRange || withTime),
         useShortMonthInDropdown: showMonth ? shortMonth : false,
+        dateFormat,
         ...getTimeProps(),
         ...props
       }
@@ -2148,9 +2203,23 @@ var Datepicker = ({
     label && /* @__PURE__ */ jsx26(FormLabel3, { fontSize: "text.sm", children: label }),
     /* @__PURE__ */ jsxs11(InputGroup4, { children: [
       component,
-      /* @__PURE__ */ jsxs11(InputRightElement3, { children: [
-        !value && /* @__PURE__ */ jsx26(FiCalendar, {}),
-        value && /* @__PURE__ */ jsx26(FiX, { "data-test-id": "bcpJJyCP0z_RIAGZXDU6s", onClick: onClear, cursor: "pointer" })
+      /* @__PURE__ */ jsxs11(InputRightElement3, { alignSelf: "center", bottom: 0, flexDir: "row-reverse", width: "auto", mr: 2, gap: 2, children: [
+        /* @__PURE__ */ jsx26(Calendar, { size: 4, color: "neutral.400" }),
+        value && /* @__PURE__ */ jsx26(
+          IconButton3,
+          {
+            "data-test-id": "H0rseVCzGIaqoLho-EPbu",
+            display: "flex",
+            alignItems: "center",
+            variant: "unstyled",
+            "aria-label": "Remove",
+            onClick: onClear,
+            cursor: "pointer",
+            size: "sm",
+            minW: "unset",
+            icon: /* @__PURE__ */ jsx26(Close4, { size: 4, color: "neutral.600" })
+          }
+        )
       ] })
     ] }),
     !isError ? /* @__PURE__ */ jsx26(FormHelperText3, { fontSize: "text.xs", mt: 1, children: helperText }) : /* @__PURE__ */ jsx26(FormErrorMessage3, { fontSize: "text.xs", mt: 1, children: error })
@@ -2708,11 +2777,11 @@ import { List, ListIcon, ListItem, ListItemProps, ListProps, OrderedList, Unorde
 
 // src/components/modal/components/modal-back-button.tsx
 import { ChevronLeftIcon } from "@chakra-ui/icons";
-import { IconButton as IconButton3 } from "@chakra-ui/react";
+import { IconButton as IconButton4 } from "@chakra-ui/react";
 import { jsx as jsx37 } from "react/jsx-runtime";
 var ModalBackButton = ({ onClick }) => {
   return /* @__PURE__ */ jsx37(
-    IconButton3,
+    IconButton4,
     {
       icon: /* @__PURE__ */ jsx37(ChevronLeftIcon, { w: "4.5", h: "4.5" }),
       size: "sm",
@@ -11111,7 +11180,7 @@ SidebarMenu.defaultProps = {
 // src/components/switch/components/switch.tsx
 import { chakra as chakra6, Flex as Flex12, forwardRef as forwardRef14, omitThemingProps as omitThemingProps2, useCheckbox as useCheckbox2, useMultiStyleConfig as useMultiStyleConfig2 } from "@chakra-ui/react";
 import { cx as cx10, dataAttr } from "@chakra-ui/shared-utils";
-import { Check, Close as Close4 } from "@ctlyst.id/internal-icon";
+import { Check, Close as Close5 } from "@ctlyst.id/internal-icon";
 import { useMemo as useMemo8 } from "react";
 import { jsx as jsx62, jsxs as jsxs27 } from "react/jsx-runtime";
 var Switch = forwardRef14(function Switch2(props, ref) {
@@ -11169,7 +11238,7 @@ var Switch = forwardRef14(function Switch2(props, ref) {
         /* @__PURE__ */ jsxs27(chakra6.span, { ...getCheckboxProps(), className: "chakra-switch__track", pos: "relative", __css: trackStyles, children: [
           /* @__PURE__ */ jsxs27(Flex12, { gap: 2, pos: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", children: [
             /* @__PURE__ */ jsx62(Check, { color: "white", size: getIconSize(props.size) }),
-            /* @__PURE__ */ jsx62(Close4, { color: state.isDisabled ? "neutral.600" : "neutral.900", size: getIconSize(props.size) })
+            /* @__PURE__ */ jsx62(Close5, { color: state.isDisabled ? "neutral.600" : "neutral.900", size: getIconSize(props.size) })
           ] }),
           /* @__PURE__ */ jsx62(
             chakra6.span,