@ctlyst.id/internal-ui 2.3.0 → 2.3.1

package/dist/index.js

@@ -1518,14 +1518,14 @@ var data_table_default = DataTable;
 // src/components/datepicker/components/datepicker.tsx
 var import_react34 = require("@chakra-ui/react");
 var import_shared_utils8 = require("@chakra-ui/shared-utils");
+var import_internal_icon6 = require("@ctlyst.id/internal-icon");
 var import_react_datepicker = __toESM(require("react-datepicker"));
-var import_fi3 = require("react-icons/fi");
 
 // src/components/datepicker/components/styles.tsx
 var import_system6 = require("@chakra-ui/system");
 var import_react31 = require("@emotion/react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var Styles = () => {
+var Styles = ({ showHeader }) => {
   const { colorMode } = (0, import_system6.useColorMode)();
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     import_react31.Global,
@@ -1605,8 +1605,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));
@@ -1666,9 +1665,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 {
@@ -1701,9 +1700,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 {
@@ -1720,7 +1721,7 @@ var Styles = () => {
         text-align: center;
         cursor: pointer;
         position: absolute;
-        top: 2px;
+        top: 10px;
         padding: 0;
         border: none;
         z-index: 1;
@@ -1730,10 +1731,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;
@@ -1766,14 +1771,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 {
@@ -1797,7 +1802,7 @@ var Styles = () => {
       }
 
       .react-datepicker__month {
-        margin: 0.4rem;
+        padding: 0 1rem 1rem 1rem;
         text-align: center;
       }
       .react-datepicker__month .react-datepicker__month-text,
@@ -1921,17 +1926,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,
@@ -1969,8 +1977,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,
@@ -2008,8 +2016,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,
@@ -2022,13 +2030,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;
       }
@@ -2054,7 +2062,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,
@@ -2140,7 +2148,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;
@@ -2294,12 +2302,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 {
@@ -2319,18 +2327,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;
       }
     `
     }
@@ -2349,10 +2384,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__ */ (0, import_jsx_runtime26.jsxs)(import_react32.Flex, { flexDir: "column", alignItems: "center", justifyContent: "center", p: 4, pt: 0, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react32.Flex, { flexDir: "column", p: 4, pt: 0, children: [
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react32.Text, { mb: 2, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react32.InputGroup, { alignItems: "center", justifyContent: "center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react32.Input, { onChange: handleChange, type: "time", value: time, "data-test-id": "CT_Component_datepicker_input_time" }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react32.InputGroup, { alignItems: "center", borderColor: "neutral.400", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        import_react32.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__ */ (0, import_jsx_runtime26.jsx)(import_react32.InputRightAddon, { children: rightAddon })
     ] })
   ] });
@@ -2383,9 +2433,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 {
@@ -2394,8 +2444,9 @@ var Datepicker = ({
       customTimeInput: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(time_input_default, {})
     };
   };
+  const hasMultipleMonthShow = ((_b = props == null ? void 0 : props.monthsShown) != null ? _b : 1) < 2;
   const component = /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(styles_default, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(styles_default, { showHeader: !hasMultipleMonthShow }),
     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       import_react_datepicker.default,
       {
@@ -2403,11 +2454,14 @@ var Datepicker = ({
         name,
         selected,
         customInput: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(input_field_default, { autoComplete: "off" }),
-        dateFormat,
         showPopperArrow: false,
         calendarClassName: (0, import_shared_utils8.cx)({ inline: props.inline }),
-        showMonthDropdown: showMonth,
+        dropdownMode: "select",
+        showMonthDropdown: hasMultipleMonthShow,
+        showYearDropdown: hasMultipleMonthShow,
+        shouldCloseOnSelect: !(props.selectsRange || withTime),
         useShortMonthInDropdown: showMonth ? shortMonth : false,
+        dateFormat,
         ...getTimeProps(),
         ...props
       }
@@ -2420,9 +2474,23 @@ var Datepicker = ({
     label && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react34.FormLabel, { fontSize: "text.sm", children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react34.InputGroup, { children: [
       component,
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react34.InputRightElement, { children: [
-        !value && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_fi3.FiCalendar, {}),
-        value && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_fi3.FiX, { "data-test-id": "bcpJJyCP0z_RIAGZXDU6s", onClick: onClear, cursor: "pointer" })
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react34.InputRightElement, { alignSelf: "center", bottom: 0, flexDir: "row-reverse", width: "auto", mr: 2, gap: 2, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_internal_icon6.Calendar, { size: 4, color: "neutral.400" }),
+        value && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          import_react34.IconButton,
+          {
+            "data-test-id": "H0rseVCzGIaqoLho-EPbu",
+            display: "flex",
+            alignItems: "center",
+            variant: "unstyled",
+            "aria-label": "Remove",
+            onClick: onClear,
+            cursor: "pointer",
+            size: "sm",
+            minW: "unset",
+            icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_internal_icon6.Close, { size: 4, color: "neutral.600" })
+          }
+        )
       ] })
     ] }),
     !isError ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react34.FormHelperText, { fontSize: "text.xs", mt: 1, children: helperText }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react34.FormErrorMessage, { fontSize: "text.xs", mt: 1, children: error })
@@ -2720,7 +2788,7 @@ Logo.defaultProps = {
 
 // src/components/header/components/profile.tsx
 var import_react43 = require("@chakra-ui/react");
-var import_fi4 = require("react-icons/fi");
+var import_fi3 = require("react-icons/fi");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var Profile = ({ color: color2, brandColor, data, onLogout }) => {
   var _a;
@@ -2783,7 +2851,7 @@ var Profile = ({ color: color2, brandColor, data, onLogout }) => {
           onClick: onLogout,
           textStyle: "text.xs",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_fi4.FiPower, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_fi3.FiPower, {}),
             /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react43.Text, { ml: 2, children: "Logout" })
           ]
         }
@@ -2801,11 +2869,11 @@ var profile_default = Profile;
 
 // src/components/header/components/switch-mode.tsx
 var import_react44 = require("@chakra-ui/react");
-var import_fi5 = require("react-icons/fi");
+var import_fi4 = require("react-icons/fi");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var SwitchMode = () => {
   const { colorMode, toggleColorMode } = (0, import_react44.useColorMode)();
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react44.Box, { "data-test-id": "rhYuTDCiWkFqr96upiEEh", mx: 5, onClick: toggleColorMode, cursor: "pointer", children: colorMode === "light" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_fi5.FiMoon, { size: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_fi5.FiSun, { size: 20 }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react44.Box, { "data-test-id": "rhYuTDCiWkFqr96upiEEh", mx: 5, onClick: toggleColorMode, cursor: "pointer", children: colorMode === "light" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_fi4.FiMoon, { size: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_fi4.FiSun, { size: 20 }) });
 };
 var switch_mode_default = SwitchMode;
 
@@ -3496,7 +3564,7 @@ var pagination_detail_default = PaginationDetail;
 // src/components/pagination/components/pagination-filter.tsx
 var import_react68 = require("@chakra-ui/react");
 var React13 = __toESM(require("react"));
-var import_fi6 = require("react-icons/fi");
+var import_fi5 = require("react-icons/fi");
 var import_jsx_runtime51 = require("react/jsx-runtime");
 var PaginationFilter = ({
   limit,
@@ -3517,7 +3585,7 @@ var PaginationFilter = ({
         border: "none",
         boxShadow: "none",
         width: 18,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_fi6.FiChevronDown, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_fi5.FiChevronDown, {}),
         _focusVisible: { boxShadow: "none" },
         onChange: (e) => {
           const numberValue = Number(e.target.value);
@@ -3590,10 +3658,10 @@ var import_react72 = require("@chakra-ui/react");
 
 // src/components/rating/components/rating.tsx
 var import_react73 = require("@chakra-ui/react");
-var import_internal_icon6 = require("@ctlyst.id/internal-icon");
+var import_internal_icon7 = require("@ctlyst.id/internal-icon");
 var import_jsx_runtime54 = require("react/jsx-runtime");
 var Rating = ({ value }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react73.Grid, { gap: "4px", display: "flex", children: [...Array(5)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_internal_icon6.Rating, { color: i < value ? "#FFA230" : "#E0E0E0", size: 24 })) });
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react73.Grid, { gap: "4px", display: "flex", children: [...Array(5)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_internal_icon7.Rating, { color: i < value ? "#FFA230" : "#E0E0E0", size: 24 })) });
 };
 var rating_default = Rating;
 
@@ -11067,7 +11135,7 @@ Sidebar.displayName = "Sidebar";
 
 // src/components/sidebar/components/sidebar-header.tsx
 var import_react112 = require("@chakra-ui/react");
-var import_internal_icon7 = require("@ctlyst.id/internal-icon");
+var import_internal_icon8 = require("@ctlyst.id/internal-icon");
 var import_jsx_runtime61 = require("react/jsx-runtime");
 var SidebarHeader = ({ isCollapse, setCollapse }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
@@ -11100,7 +11168,7 @@ var SidebarHeader = ({ isCollapse, setCollapse }) => {
                 transitionDuration: "1ms",
                 "data-test-id": "SWqE2JTMkS4Pj_2tdwy8O",
                 "aria-label": "toggle sidebar",
-                children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_internal_icon7.ArrowRight, { size: 4, color: "inherit" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_internal_icon8.ArrowRight, { size: 4, color: "inherit" })
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(AnimatePresence, { children: !isCollapse && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_react112.Box, { h: "3.5", position: "relative", ml: "2", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
@@ -11259,7 +11327,7 @@ SidebarMenu.defaultProps = {
 // src/components/switch/components/switch.tsx
 var import_react114 = require("@chakra-ui/react");
 var import_shared_utils10 = require("@chakra-ui/shared-utils");
-var import_internal_icon8 = require("@ctlyst.id/internal-icon");
+var import_internal_icon9 = require("@ctlyst.id/internal-icon");
 var import_react115 = require("react");
 var import_jsx_runtime63 = require("react/jsx-runtime");
 var Switch = (0, import_react114.forwardRef)(function Switch2(props, ref) {
@@ -11316,8 +11384,8 @@ var Switch = (0, import_react114.forwardRef)(function Switch2(props, ref) {
         /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("input", { "data-test-id": "", className: "chakra-switch__input", ...getInputProps({}, ref) }),
         /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_react114.chakra.span, { ...getCheckboxProps(), className: "chakra-switch__track", pos: "relative", __css: trackStyles, children: [
           /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_react114.Flex, { gap: 2, pos: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_internal_icon8.Check, { color: "white", size: getIconSize(props.size) }),
-            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_internal_icon8.Close, { color: state.isDisabled ? "neutral.600" : "neutral.900", size: getIconSize(props.size) })
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_internal_icon9.Check, { color: "white", size: getIconSize(props.size) }),
+            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_internal_icon9.Close, { color: state.isDisabled ? "neutral.600" : "neutral.900", size: getIconSize(props.size) })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
             import_react114.chakra.span,