@idds/js 1.0.38 → 1.0.40

package/dist/index.iife.js

@@ -121,17 +121,31 @@ var InaUI = (() => {
   // src/js/components/stateful/datepicker.js
   function initDatepicker() {
     document.querySelectorAll(".ina-date-picker").forEach((datepicker) => {
+      if (datepicker.dataset.initialized === "true") return;
+      datepicker.dataset.initialized = "true";
+      const mode = datepicker.dataset.mode || "single";
+      const format = datepicker.dataset.format || "d MMMM yyyy";
       const trigger = datepicker.querySelector(".ina-date-picker__trigger");
       const triggerText = trigger.querySelector(".ina-date-picker__trigger-text");
       const panel = datepicker.querySelector(".ina-date-picker__panel");
+      panel.style.display = "none";
       let panelContent = panel.querySelector(".ina-date-picker__panel-content");
       if (!panelContent) {
         panelContent = document.createElement("div");
         panelContent.className = "ina-date-picker__panel-content";
+        if (mode === "range" || mode === "multiple") {
+          panelContent.classList.add("ina-date-picker__panel-content--dual");
+        }
         panel.appendChild(panelContent);
+      } else {
+        if (mode === "range" || mode === "multiple") {
+          panelContent.classList.add("ina-date-picker__panel-content--dual");
+        }
       }
-      let currentDate = /* @__PURE__ */ new Date();
+      let viewDate = /* @__PURE__ */ new Date();
       let selectedDate = null;
+      let selectedDates = [];
+      let rangeDate = [null, null];
       let isOpen = false;
       const MONTHS_ID = [
         "Januari",
@@ -163,18 +177,67 @@ var InaUI = (() => {
       ];
       const DAYS_SHORT = ["Min", "Sen", "Sel", "Rab", "Kam", "Jum", "Sab"];
       function formatDate(date) {
+        if (!date) return "";
         const day = date.getDate().toString().padStart(2, "0");
         const monthIndex = date.getMonth();
         const year = date.getFullYear();
         return `${day} ${MONTHS_SHORT_ID[monthIndex]} ${year}`;
       }
-      function createIcon(name, size = 16) {
-        if (name === "chevron-left") {
-          return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 6l-6 6l6 6" /></svg>`;
-        }
-        if (name === "chevron-right") {
-          return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l6 6l-6 6" /></svg>`;
+      function updateTrigger() {
+        if (mode === "single") {
+          if (selectedDate) {
+            triggerText.textContent = formatDate(selectedDate);
+            triggerText.classList.add("ina-date-picker__trigger-text--value");
+            triggerText.classList.remove(
+              "ina-date-picker__trigger-text--placeholder"
+            );
+          } else {
+            triggerText.textContent = "Pilih Tanggal";
+            triggerText.classList.remove("ina-date-picker__trigger-text--value");
+            triggerText.classList.add(
+              "ina-date-picker__trigger-text--placeholder"
+            );
+          }
+        } else if (mode === "range") {
+          if (rangeDate[0] && rangeDate[1]) {
+            const start = formatDate(rangeDate[0]);
+            const end = formatDate(rangeDate[1]);
+            triggerText.textContent = `${start} - ${end}`;
+            triggerText.classList.add("ina-date-picker__trigger-text--value");
+            triggerText.classList.remove(
+              "ina-date-picker__trigger-text--placeholder"
+            );
+          } else if (rangeDate[0]) {
+            triggerText.textContent = `${formatDate(rangeDate[0])} - ...`;
+            triggerText.classList.add("ina-date-picker__trigger-text--value");
+          } else {
+            triggerText.textContent = "Pilih Rentang Tanggal";
+            triggerText.classList.remove("ina-date-picker__trigger-text--value");
+            triggerText.classList.add(
+              "ina-date-picker__trigger-text--placeholder"
+            );
+          }
+        } else if (mode === "multiple") {
+          if (selectedDates.length > 0) {
+            triggerText.textContent = `${selectedDates.length} Tanggal Terpilih`;
+            triggerText.classList.add("ina-date-picker__trigger-text--value");
+            triggerText.classList.remove(
+              "ina-date-picker__trigger-text--placeholder"
+            );
+          } else {
+            triggerText.textContent = "Pilih Beberapa Tanggal";
+            triggerText.classList.remove("ina-date-picker__trigger-text--value");
+            triggerText.classList.add(
+              "ina-date-picker__trigger-text--placeholder"
+            );
+          }
         }
+      }
+      function createIcon(name, size = 16) {
+        if (name === "chevron-left")
+          return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6l6 6" /></svg>`;
+        if (name === "chevron-right")
+          return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6l-6 6" /></svg>`;
         return "";
       }
       function createMonthPicker(initialMonth, onChange) {
@@ -185,16 +248,10 @@ var InaUI = (() => {
         const pickerTrigger = document.createElement("button");
         pickerTrigger.type = "button";
         pickerTrigger.className = "ina-month-picker__trigger ina-month-picker__trigger--size-sm";
-        const updateTriggerText = () => {
-          pickerTrigger.innerHTML = `
-                <span class="ina-month-picker__trigger-text">${MONTHS_SHORT_ID[currentMonthIdx]}</span>
-             `;
+        const updateText = () => {
+          pickerTrigger.innerHTML = `<span class="ina-month-picker__trigger-text">${MONTHS_SHORT_ID[currentMonthIdx]}</span>`;
         };
-        updateTriggerText();
-        pickerTrigger.addEventListener("click", (e) => {
-          e.stopPropagation();
-          togglePicker(!isPickerOpen);
-        });
+        updateText();
         const pickerPanel = document.createElement("div");
         pickerPanel.className = "ina-month-picker__panel";
         const grid = document.createElement("div");
@@ -209,21 +266,18 @@ var InaUI = (() => {
           btn.addEventListener("click", (e) => {
             e.stopPropagation();
             currentMonthIdx = idx;
-            updateTriggerText();
-            grid.querySelectorAll(".ina-month-picker__month-option").forEach((b, i) => {
-              if (i === idx)
-                b.classList.add("ina-month-picker__month-option--selected");
-              else
-                b.classList.remove("ina-month-picker__month-option--selected");
-            });
+            updateText();
             togglePicker(false);
             onChange(idx);
           });
           grid.appendChild(btn);
         });
         pickerPanel.appendChild(grid);
-        container.appendChild(pickerTrigger);
-        container.appendChild(pickerPanel);
+        container.append(pickerTrigger, pickerPanel);
+        pickerTrigger.addEventListener("click", (e) => {
+          e.stopPropagation();
+          togglePicker(!isPickerOpen);
+        });
         function togglePicker(show) {
           isPickerOpen = show;
           if (show) {
@@ -241,13 +295,7 @@ var InaUI = (() => {
           element: container,
           setMonth: (m) => {
             currentMonthIdx = m;
-            updateTriggerText();
-            grid.querySelectorAll(".ina-month-picker__month-option").forEach((b, i) => {
-              if (i === m)
-                b.classList.add("ina-month-picker__month-option--selected");
-              else
-                b.classList.remove("ina-month-picker__month-option--selected");
-            });
+            updateText();
           }
         };
       }
@@ -260,16 +308,10 @@ var InaUI = (() => {
         const pickerTrigger = document.createElement("button");
         pickerTrigger.type = "button";
         pickerTrigger.className = "ina-year-picker__trigger ina-year-picker__trigger--size-sm";
-        const updateTriggerText = () => {
-          pickerTrigger.innerHTML = `
-                <span class="ina-year-picker__trigger-text">${currentYearVal}</span>
-             `;
+        const updateText = () => {
+          pickerTrigger.innerHTML = `<span class="ina-year-picker__trigger-text">${currentYearVal}</span>`;
         };
-        updateTriggerText();
-        pickerTrigger.addEventListener("click", (e) => {
-          e.stopPropagation();
-          togglePicker(!isPickerOpen);
-        });
+        updateText();
         const pickerPanel = document.createElement("div");
         pickerPanel.className = "ina-year-picker__panel";
         const header = document.createElement("div");
@@ -310,7 +352,7 @@ var InaUI = (() => {
             btn.addEventListener("click", (e) => {
               e.stopPropagation();
               currentYearVal = y;
-              updateTriggerText();
+              updateText();
               togglePicker(false);
               onChange(y);
             });
@@ -319,16 +361,18 @@ var InaUI = (() => {
         }
         pickerPanel.append(header, grid);
         container.append(pickerTrigger, pickerPanel);
+        pickerTrigger.addEventListener("click", (e) => {
+          e.stopPropagation();
+          togglePicker(!isPickerOpen);
+        });
         function togglePicker(show) {
           isPickerOpen = show;
           if (show) {
             decadeStart = Math.floor(currentYearVal / 20) * 20;
             renderGrid();
             pickerPanel.classList.add("ina-year-picker__panel--open");
-            pickerTrigger.setAttribute("aria-expanded", "true");
           } else {
             pickerPanel.classList.remove("ina-year-picker__panel--open");
-            pickerTrigger.setAttribute("aria-expanded", "false");
           }
         }
         document.addEventListener("click", (e) => {
@@ -338,131 +382,212 @@ var InaUI = (() => {
           element: container,
           setYear: (y) => {
             currentYearVal = y;
-            updateTriggerText();
+            updateText();
           }
         };
       }
-      function renderCalendar() {
-        panelContent.innerHTML = "";
-        const year = currentDate.getFullYear();
-        const month = currentDate.getMonth();
-        const calendarContainer = document.createElement("div");
-        calendarContainer.className = "ina-date-picker__calendar-container";
+      function renderCalendarGrid(baseDate, isNextMonth = false) {
+        const year = baseDate.getFullYear();
+        const month = baseDate.getMonth();
+        const container = document.createElement("div");
+        if (!isNextMonth) {
+          container.className = "ina-date-picker__calendar-container";
+        } else {
+          container.className = "ina-date-picker__calendar";
+        }
         const header = document.createElement("div");
-        header.className = "ina-date-picker__calendar-header";
-        const prevBtn = document.createElement("button");
-        prevBtn.className = "ina-date-picker__nav-button";
-        prevBtn.type = "button";
-        prevBtn.innerHTML = createIcon("chevron-left", 20);
-        prevBtn.addEventListener("click", (e) => {
-          e.stopPropagation();
-          currentDate.setMonth(month - 1);
-          renderCalendar();
-        });
-        const nextBtn = document.createElement("button");
-        nextBtn.className = "ina-date-picker__nav-button";
-        nextBtn.type = "button";
-        nextBtn.innerHTML = createIcon("chevron-right", 20);
-        nextBtn.addEventListener("click", (e) => {
-          e.stopPropagation();
-          currentDate.setMonth(month + 1);
-          renderCalendar();
-        });
-        const controls = document.createElement("div");
-        controls.className = "ina-date-picker__header-controls";
-        const monthContainer = document.createElement("div");
-        monthContainer.className = "ina-date-picker__dropdown-container";
-        const monthPicker = createMonthPicker(month, (newMonth) => {
-          currentDate.setMonth(newMonth);
-          renderCalendar();
-        });
-        monthContainer.appendChild(monthPicker.element);
-        const yearContainer = document.createElement("div");
-        yearContainer.className = "ina-date-picker__dropdown-container";
-        const yearPicker = createYearPicker(year, (newYear) => {
-          currentDate.setFullYear(newYear);
-          renderCalendar();
-        });
-        yearContainer.appendChild(yearPicker.element);
-        controls.append(monthContainer, yearContainer);
-        header.append(prevBtn, controls, nextBtn);
+        header.className = isNextMonth ? "ina-date-picker__next-month-header" : "ina-date-picker__calendar-header";
+        if (!isNextMonth) {
+          const prevBtn = document.createElement("button");
+          prevBtn.type = "button";
+          prevBtn.className = "ina-date-picker__nav-button";
+          prevBtn.innerHTML = createIcon("chevron-left");
+          prevBtn.onclick = (e) => {
+            e.stopPropagation();
+            viewDate.setMonth(viewDate.getMonth() - 1);
+            render();
+          };
+          header.appendChild(prevBtn);
+        } else {
+          const spacer = document.createElement("div");
+          spacer.style.width = "32px";
+          header.appendChild(spacer);
+        }
+        if (!isNextMonth) {
+          const controls = document.createElement("div");
+          controls.className = "ina-date-picker__header-controls";
+          const monthCont = document.createElement("div");
+          monthCont.className = "ina-date-picker__dropdown-container";
+          const monthPicker = createMonthPicker(month, (m) => {
+            viewDate.setMonth(m);
+            render();
+          });
+          monthCont.appendChild(monthPicker.element);
+          const yearCont = document.createElement("div");
+          yearCont.className = "ina-date-picker__dropdown-container";
+          const yearPicker = createYearPicker(year, (y) => {
+            viewDate.setFullYear(y);
+            render();
+          });
+          yearCont.appendChild(yearPicker.element);
+          controls.append(monthCont, yearCont);
+          header.appendChild(controls);
+        } else {
+          const title = document.createElement("div");
+          title.className = "ina-date-picker__calendar-title";
+          title.textContent = `${MONTHS_ID[month]} ${year}`;
+          header.appendChild(title);
+        }
+        const showNextBtn = mode === "single" && !isNextMonth || isNextMonth;
+        if (showNextBtn) {
+          const nextBtn = document.createElement("button");
+          nextBtn.type = "button";
+          nextBtn.className = "ina-date-picker__nav-button";
+          nextBtn.innerHTML = createIcon("chevron-right");
+          nextBtn.onclick = (e) => {
+            e.stopPropagation();
+            viewDate.setMonth(viewDate.getMonth() + 1);
+            render();
+          };
+          header.appendChild(nextBtn);
+        } else if (!isNextMonth) {
+          const spacer = document.createElement("div");
+          spacer.style.width = "32px";
+          header.appendChild(spacer);
+        }
         const grid = document.createElement("div");
         grid.className = "ina-date-picker__calendar-grid";
-        DAYS_SHORT.forEach((day) => {
+        DAYS_SHORT.forEach((d) => {
           const dh = document.createElement("div");
           dh.className = "ina-date-picker__day-header";
-          dh.textContent = day;
+          dh.textContent = d;
           grid.appendChild(dh);
         });
         const firstDayOfMonth = new Date(year, month, 1).getDay();
         const daysInMonth = new Date(year, month + 1, 0).getDate();
         const daysInPrevMonth = new Date(year, month, 0).getDate();
+        const today = /* @__PURE__ */ new Date();
         for (let i = firstDayOfMonth - 1; i >= 0; i--) {
-          const dayBtn = document.createElement("button");
-          dayBtn.type = "button";
-          dayBtn.className = "ina-date-picker__day ina-date-picker__day--other-month ina-date-picker__day--disabled";
-          dayBtn.textContent = daysInPrevMonth - i;
-          grid.appendChild(dayBtn);
+          const btn = document.createElement("button");
+          btn.type = "button";
+          btn.className = "ina-date-picker__day ina-date-picker__day--other-month ina-date-picker__day--disabled";
+          btn.textContent = daysInPrevMonth - i;
+          grid.appendChild(btn);
         }
-        const today = /* @__PURE__ */ new Date();
         for (let i = 1; i <= daysInMonth; i++) {
-          const dayBtn = document.createElement("button");
-          dayBtn.type = "button";
-          dayBtn.className = "ina-date-picker__day";
-          dayBtn.textContent = i;
+          const date = new Date(year, month, i);
+          const btn = document.createElement("button");
+          btn.type = "button";
+          btn.className = "ina-date-picker__day";
+          btn.textContent = i;
           let isSelected = false;
-          if (selectedDate && selectedDate.getDate() === i && selectedDate.getMonth() === month && selectedDate.getFullYear() === year) {
-            dayBtn.classList.add("ina-date-picker__day--selected");
-            isSelected = true;
-          }
-          if (today.getDate() === i && today.getMonth() === month && today.getFullYear() === year) {
-            dayBtn.classList.add("ina-date-picker__day--today");
+          let isInRange = false;
+          if (mode === "single" && selectedDate) {
+            if (date.toDateString() === selectedDate.toDateString())
+              isSelected = true;
+          } else if (mode === "multiple") {
+            if (selectedDates.some((d) => d.toDateString() === date.toDateString()))
+              isSelected = true;
+          } else if (mode === "range") {
+            const [start, end] = rangeDate;
+            if (start && date.toDateString() === start.toDateString())
+              isSelected = true;
+            if (end && date.toDateString() === end.toDateString())
+              isSelected = true;
+            if (start && end && date > start && date < end) isInRange = true;
           }
-          if (!isSelected) {
-            dayBtn.classList.add("ina-date-picker__day--hover");
-          }
-          dayBtn.addEventListener("click", (e) => {
+          if (isSelected) btn.classList.add("ina-date-picker__day--selected");
+          if (isInRange) btn.classList.add("ina-date-picker__day--in-range");
+          if (date.toDateString() === today.toDateString())
+            btn.classList.add("ina-date-picker__day--today");
+          if (!isSelected && !isInRange)
+            btn.classList.add("ina-date-picker__day--hover");
+          btn.onclick = (e) => {
             e.stopPropagation();
-            selectedDate = new Date(year, month, i);
-            triggerText.textContent = formatDate(selectedDate);
-            triggerText.classList.add("ina-date-picker__trigger-text--value");
-            triggerText.classList.remove(
-              "ina-date-picker__trigger-text--placeholder"
-            );
+            if (mode === "single") {
+              selectedDate = date;
+              close();
+            } else if (mode === "multiple") {
+              const existsIdx = selectedDates.findIndex(
+                (d) => d.toDateString() === date.toDateString()
+              );
+              if (existsIdx >= 0) selectedDates.splice(existsIdx, 1);
+              else selectedDates.push(date);
+              render();
+            } else if (mode === "range") {
+              const [start, end] = rangeDate;
+              if (!start || start && end) {
+                rangeDate = [date, null];
+              } else {
+                if (date < start) {
+                  rangeDate = [date, start];
+                } else {
+                  rangeDate = [start, date];
+                }
+                close();
+              }
+              render();
+            }
+            updateTrigger();
             datepicker.dispatchEvent(
-              new CustomEvent("date:changed", { detail: { selectedDate } })
+              new CustomEvent("date:changed", {
+                detail: {
+                  selectedDate: mode === "single" ? selectedDate : mode === "multiple" ? selectedDates : rangeDate
+                }
+              })
             );
-            toggle(false);
-          });
-          grid.appendChild(dayBtn);
+          };
+          grid.appendChild(btn);
         }
-        const currentCells = grid.children.length - 7;
-        const remaining = 42 - currentCells;
+        const usedCells = grid.children.length - 7;
+        const remaining = 42 - usedCells;
         for (let i = 1; i <= remaining; i++) {
-          const dayBtn = document.createElement("button");
-          dayBtn.type = "button";
-          dayBtn.className = "ina-date-picker__day ina-date-picker__day--other-month ina-date-picker__day--disabled";
-          dayBtn.textContent = i;
-          grid.appendChild(dayBtn);
+          const btn = document.createElement("button");
+          btn.type = "button";
+          btn.className = "ina-date-picker__day ina-date-picker__day--other-month ina-date-picker__day--disabled";
+          btn.textContent = i;
+          grid.appendChild(btn);
         }
-        calendarContainer.append(header, grid);
-        panelContent.appendChild(calendarContainer);
+        container.append(header, grid);
+        return container;
       }
-      function toggle(show) {
-        isOpen = show;
-        if (show) {
-          panel.classList.add("ina-date-picker__panel--open");
-          renderCalendar();
-        } else {
-          panel.classList.remove("ina-date-picker__panel--open");
+      function render() {
+        panelContent.innerHTML = "";
+        const cal1 = renderCalendarGrid(viewDate);
+        panelContent.appendChild(cal1);
+        if (mode === "range" || mode === "multiple") {
+          const nextMonthDate = new Date(
+            viewDate.getFullYear(),
+            viewDate.getMonth() + 1,
+            1
+          );
+          const cal2 = renderCalendarGrid(nextMonthDate, true);
+          panelContent.appendChild(cal2);
         }
       }
+      function open() {
+        isOpen = true;
+        panel.classList.add("ina-date-picker__panel--open");
+        panel.style.display = "block";
+        render();
+      }
+      function close() {
+        isOpen = false;
+        panel.classList.remove("ina-date-picker__panel--open");
+        panel.style.display = "none";
+      }
+      function toggle() {
+        if (isOpen) close();
+        else open();
+      }
       trigger.addEventListener("click", (e) => {
         e.stopPropagation();
-        toggle(!isOpen);
+        toggle();
       });
       document.addEventListener("click", (e) => {
-        if (!datepicker.contains(e.target)) toggle(false);
+        if (!datepicker.contains(e.target)) {
+          close();
+        }
       });
     });
   }

package/dist/index.js

@@ -109,17 +109,31 @@ function initAccordion(rootSelector = `.${PREFIX}-accordion`) {
 // src/js/components/stateful/datepicker.js
 function initDatepicker() {
   document.querySelectorAll(".ina-date-picker").forEach((datepicker) => {
+    if (datepicker.dataset.initialized === "true") return;
+    datepicker.dataset.initialized = "true";
+    const mode = datepicker.dataset.mode || "single";
+    const format = datepicker.dataset.format || "d MMMM yyyy";
     const trigger = datepicker.querySelector(".ina-date-picker__trigger");
     const triggerText = trigger.querySelector(".ina-date-picker__trigger-text");
     const panel = datepicker.querySelector(".ina-date-picker__panel");
+    panel.style.display = "none";
     let panelContent = panel.querySelector(".ina-date-picker__panel-content");
     if (!panelContent) {
       panelContent = document.createElement("div");
       panelContent.className = "ina-date-picker__panel-content";
+      if (mode === "range" || mode === "multiple") {
+        panelContent.classList.add("ina-date-picker__panel-content--dual");
+      }
       panel.appendChild(panelContent);
+    } else {
+      if (mode === "range" || mode === "multiple") {
+        panelContent.classList.add("ina-date-picker__panel-content--dual");
+      }
     }
-    let currentDate = /* @__PURE__ */ new Date();
+    let viewDate = /* @__PURE__ */ new Date();
     let selectedDate = null;
+    let selectedDates = [];
+    let rangeDate = [null, null];
     let isOpen = false;
     const MONTHS_ID = [
       "Januari",
@@ -151,18 +165,67 @@ function initDatepicker() {
     ];
     const DAYS_SHORT = ["Min", "Sen", "Sel", "Rab", "Kam", "Jum", "Sab"];
     function formatDate(date) {
+      if (!date) return "";
       const day = date.getDate().toString().padStart(2, "0");
       const monthIndex = date.getMonth();
       const year = date.getFullYear();
       return `${day} ${MONTHS_SHORT_ID[monthIndex]} ${year}`;
     }
-    function createIcon(name, size = 16) {
-      if (name === "chevron-left") {
-        return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 6l-6 6l6 6" /></svg>`;
-      }
-      if (name === "chevron-right") {
-        return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l6 6l-6 6" /></svg>`;
+    function updateTrigger() {
+      if (mode === "single") {
+        if (selectedDate) {
+          triggerText.textContent = formatDate(selectedDate);
+          triggerText.classList.add("ina-date-picker__trigger-text--value");
+          triggerText.classList.remove(
+            "ina-date-picker__trigger-text--placeholder"
+          );
+        } else {
+          triggerText.textContent = "Pilih Tanggal";
+          triggerText.classList.remove("ina-date-picker__trigger-text--value");
+          triggerText.classList.add(
+            "ina-date-picker__trigger-text--placeholder"
+          );
+        }
+      } else if (mode === "range") {
+        if (rangeDate[0] && rangeDate[1]) {
+          const start = formatDate(rangeDate[0]);
+          const end = formatDate(rangeDate[1]);
+          triggerText.textContent = `${start} - ${end}`;
+          triggerText.classList.add("ina-date-picker__trigger-text--value");
+          triggerText.classList.remove(
+            "ina-date-picker__trigger-text--placeholder"
+          );
+        } else if (rangeDate[0]) {
+          triggerText.textContent = `${formatDate(rangeDate[0])} - ...`;
+          triggerText.classList.add("ina-date-picker__trigger-text--value");
+        } else {
+          triggerText.textContent = "Pilih Rentang Tanggal";
+          triggerText.classList.remove("ina-date-picker__trigger-text--value");
+          triggerText.classList.add(
+            "ina-date-picker__trigger-text--placeholder"
+          );
+        }
+      } else if (mode === "multiple") {
+        if (selectedDates.length > 0) {
+          triggerText.textContent = `${selectedDates.length} Tanggal Terpilih`;
+          triggerText.classList.add("ina-date-picker__trigger-text--value");
+          triggerText.classList.remove(
+            "ina-date-picker__trigger-text--placeholder"
+          );
+        } else {
+          triggerText.textContent = "Pilih Beberapa Tanggal";
+          triggerText.classList.remove("ina-date-picker__trigger-text--value");
+          triggerText.classList.add(
+            "ina-date-picker__trigger-text--placeholder"
+          );
+        }
       }
+    }
+    function createIcon(name, size = 16) {
+      if (name === "chevron-left")
+        return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6l-6 6l6 6" /></svg>`;
+      if (name === "chevron-right")
+        return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6l-6 6" /></svg>`;
       return "";
     }
     function createMonthPicker(initialMonth, onChange) {
@@ -173,16 +236,10 @@ function initDatepicker() {
       const pickerTrigger = document.createElement("button");
       pickerTrigger.type = "button";
       pickerTrigger.className = "ina-month-picker__trigger ina-month-picker__trigger--size-sm";
-      const updateTriggerText = () => {
-        pickerTrigger.innerHTML = `
-                <span class="ina-month-picker__trigger-text">${MONTHS_SHORT_ID[currentMonthIdx]}</span>
-             `;
+      const updateText = () => {
+        pickerTrigger.innerHTML = `<span class="ina-month-picker__trigger-text">${MONTHS_SHORT_ID[currentMonthIdx]}</span>`;
       };
-      updateTriggerText();
-      pickerTrigger.addEventListener("click", (e) => {
-        e.stopPropagation();
-        togglePicker(!isPickerOpen);
-      });
+      updateText();
       const pickerPanel = document.createElement("div");
       pickerPanel.className = "ina-month-picker__panel";
       const grid = document.createElement("div");
@@ -197,21 +254,18 @@ function initDatepicker() {
         btn.addEventListener("click", (e) => {
           e.stopPropagation();
           currentMonthIdx = idx;
-          updateTriggerText();
-          grid.querySelectorAll(".ina-month-picker__month-option").forEach((b, i) => {
-            if (i === idx)
-              b.classList.add("ina-month-picker__month-option--selected");
-            else
-              b.classList.remove("ina-month-picker__month-option--selected");
-          });
+          updateText();
           togglePicker(false);
           onChange(idx);
         });
         grid.appendChild(btn);
       });
       pickerPanel.appendChild(grid);
-      container.appendChild(pickerTrigger);
-      container.appendChild(pickerPanel);
+      container.append(pickerTrigger, pickerPanel);
+      pickerTrigger.addEventListener("click", (e) => {
+        e.stopPropagation();
+        togglePicker(!isPickerOpen);
+      });
       function togglePicker(show) {
         isPickerOpen = show;
         if (show) {
@@ -229,13 +283,7 @@ function initDatepicker() {
         element: container,
         setMonth: (m) => {
           currentMonthIdx = m;
-          updateTriggerText();
-          grid.querySelectorAll(".ina-month-picker__month-option").forEach((b, i) => {
-            if (i === m)
-              b.classList.add("ina-month-picker__month-option--selected");
-            else
-              b.classList.remove("ina-month-picker__month-option--selected");
-          });
+          updateText();
         }
       };
     }
@@ -248,16 +296,10 @@ function initDatepicker() {
       const pickerTrigger = document.createElement("button");
       pickerTrigger.type = "button";
       pickerTrigger.className = "ina-year-picker__trigger ina-year-picker__trigger--size-sm";
-      const updateTriggerText = () => {
-        pickerTrigger.innerHTML = `
-                <span class="ina-year-picker__trigger-text">${currentYearVal}</span>
-             `;
+      const updateText = () => {
+        pickerTrigger.innerHTML = `<span class="ina-year-picker__trigger-text">${currentYearVal}</span>`;
       };
-      updateTriggerText();
-      pickerTrigger.addEventListener("click", (e) => {
-        e.stopPropagation();
-        togglePicker(!isPickerOpen);
-      });
+      updateText();
       const pickerPanel = document.createElement("div");
       pickerPanel.className = "ina-year-picker__panel";
       const header = document.createElement("div");
@@ -298,7 +340,7 @@ function initDatepicker() {
           btn.addEventListener("click", (e) => {
             e.stopPropagation();
             currentYearVal = y;
-            updateTriggerText();
+            updateText();
             togglePicker(false);
             onChange(y);
           });
@@ -307,16 +349,18 @@ function initDatepicker() {
       }
       pickerPanel.append(header, grid);
       container.append(pickerTrigger, pickerPanel);
+      pickerTrigger.addEventListener("click", (e) => {
+        e.stopPropagation();
+        togglePicker(!isPickerOpen);
+      });
       function togglePicker(show) {
         isPickerOpen = show;
         if (show) {
           decadeStart = Math.floor(currentYearVal / 20) * 20;
           renderGrid();
           pickerPanel.classList.add("ina-year-picker__panel--open");
-          pickerTrigger.setAttribute("aria-expanded", "true");
         } else {
           pickerPanel.classList.remove("ina-year-picker__panel--open");
-          pickerTrigger.setAttribute("aria-expanded", "false");
         }
       }
       document.addEventListener("click", (e) => {
@@ -326,131 +370,212 @@ function initDatepicker() {
         element: container,
         setYear: (y) => {
           currentYearVal = y;
-          updateTriggerText();
+          updateText();
         }
       };
     }
-    function renderCalendar() {
-      panelContent.innerHTML = "";
-      const year = currentDate.getFullYear();
-      const month = currentDate.getMonth();
-      const calendarContainer = document.createElement("div");
-      calendarContainer.className = "ina-date-picker__calendar-container";
+    function renderCalendarGrid(baseDate, isNextMonth = false) {
+      const year = baseDate.getFullYear();
+      const month = baseDate.getMonth();
+      const container = document.createElement("div");
+      if (!isNextMonth) {
+        container.className = "ina-date-picker__calendar-container";
+      } else {
+        container.className = "ina-date-picker__calendar";
+      }
       const header = document.createElement("div");
-      header.className = "ina-date-picker__calendar-header";
-      const prevBtn = document.createElement("button");
-      prevBtn.className = "ina-date-picker__nav-button";
-      prevBtn.type = "button";
-      prevBtn.innerHTML = createIcon("chevron-left", 20);
-      prevBtn.addEventListener("click", (e) => {
-        e.stopPropagation();
-        currentDate.setMonth(month - 1);
-        renderCalendar();
-      });
-      const nextBtn = document.createElement("button");
-      nextBtn.className = "ina-date-picker__nav-button";
-      nextBtn.type = "button";
-      nextBtn.innerHTML = createIcon("chevron-right", 20);
-      nextBtn.addEventListener("click", (e) => {
-        e.stopPropagation();
-        currentDate.setMonth(month + 1);
-        renderCalendar();
-      });
-      const controls = document.createElement("div");
-      controls.className = "ina-date-picker__header-controls";
-      const monthContainer = document.createElement("div");
-      monthContainer.className = "ina-date-picker__dropdown-container";
-      const monthPicker = createMonthPicker(month, (newMonth) => {
-        currentDate.setMonth(newMonth);
-        renderCalendar();
-      });
-      monthContainer.appendChild(monthPicker.element);
-      const yearContainer = document.createElement("div");
-      yearContainer.className = "ina-date-picker__dropdown-container";
-      const yearPicker = createYearPicker(year, (newYear) => {
-        currentDate.setFullYear(newYear);
-        renderCalendar();
-      });
-      yearContainer.appendChild(yearPicker.element);
-      controls.append(monthContainer, yearContainer);
-      header.append(prevBtn, controls, nextBtn);
+      header.className = isNextMonth ? "ina-date-picker__next-month-header" : "ina-date-picker__calendar-header";
+      if (!isNextMonth) {
+        const prevBtn = document.createElement("button");
+        prevBtn.type = "button";
+        prevBtn.className = "ina-date-picker__nav-button";
+        prevBtn.innerHTML = createIcon("chevron-left");
+        prevBtn.onclick = (e) => {
+          e.stopPropagation();
+          viewDate.setMonth(viewDate.getMonth() - 1);
+          render();
+        };
+        header.appendChild(prevBtn);
+      } else {
+        const spacer = document.createElement("div");
+        spacer.style.width = "32px";
+        header.appendChild(spacer);
+      }
+      if (!isNextMonth) {
+        const controls = document.createElement("div");
+        controls.className = "ina-date-picker__header-controls";
+        const monthCont = document.createElement("div");
+        monthCont.className = "ina-date-picker__dropdown-container";
+        const monthPicker = createMonthPicker(month, (m) => {
+          viewDate.setMonth(m);
+          render();
+        });
+        monthCont.appendChild(monthPicker.element);
+        const yearCont = document.createElement("div");
+        yearCont.className = "ina-date-picker__dropdown-container";
+        const yearPicker = createYearPicker(year, (y) => {
+          viewDate.setFullYear(y);
+          render();
+        });
+        yearCont.appendChild(yearPicker.element);
+        controls.append(monthCont, yearCont);
+        header.appendChild(controls);
+      } else {
+        const title = document.createElement("div");
+        title.className = "ina-date-picker__calendar-title";
+        title.textContent = `${MONTHS_ID[month]} ${year}`;
+        header.appendChild(title);
+      }
+      const showNextBtn = mode === "single" && !isNextMonth || isNextMonth;
+      if (showNextBtn) {
+        const nextBtn = document.createElement("button");
+        nextBtn.type = "button";
+        nextBtn.className = "ina-date-picker__nav-button";
+        nextBtn.innerHTML = createIcon("chevron-right");
+        nextBtn.onclick = (e) => {
+          e.stopPropagation();
+          viewDate.setMonth(viewDate.getMonth() + 1);
+          render();
+        };
+        header.appendChild(nextBtn);
+      } else if (!isNextMonth) {
+        const spacer = document.createElement("div");
+        spacer.style.width = "32px";
+        header.appendChild(spacer);
+      }
       const grid = document.createElement("div");
       grid.className = "ina-date-picker__calendar-grid";
-      DAYS_SHORT.forEach((day) => {
+      DAYS_SHORT.forEach((d) => {
         const dh = document.createElement("div");
         dh.className = "ina-date-picker__day-header";
-        dh.textContent = day;
+        dh.textContent = d;
         grid.appendChild(dh);
       });
       const firstDayOfMonth = new Date(year, month, 1).getDay();
       const daysInMonth = new Date(year, month + 1, 0).getDate();
       const daysInPrevMonth = new Date(year, month, 0).getDate();
+      const today = /* @__PURE__ */ new Date();
       for (let i = firstDayOfMonth - 1; i >= 0; i--) {
-        const dayBtn = document.createElement("button");
-        dayBtn.type = "button";
-        dayBtn.className = "ina-date-picker__day ina-date-picker__day--other-month ina-date-picker__day--disabled";
-        dayBtn.textContent = daysInPrevMonth - i;
-        grid.appendChild(dayBtn);
+        const btn = document.createElement("button");
+        btn.type = "button";
+        btn.className = "ina-date-picker__day ina-date-picker__day--other-month ina-date-picker__day--disabled";
+        btn.textContent = daysInPrevMonth - i;
+        grid.appendChild(btn);
       }
-      const today = /* @__PURE__ */ new Date();
       for (let i = 1; i <= daysInMonth; i++) {
-        const dayBtn = document.createElement("button");
-        dayBtn.type = "button";
-        dayBtn.className = "ina-date-picker__day";
-        dayBtn.textContent = i;
+        const date = new Date(year, month, i);
+        const btn = document.createElement("button");
+        btn.type = "button";
+        btn.className = "ina-date-picker__day";
+        btn.textContent = i;
         let isSelected = false;
-        if (selectedDate && selectedDate.getDate() === i && selectedDate.getMonth() === month && selectedDate.getFullYear() === year) {
-          dayBtn.classList.add("ina-date-picker__day--selected");
-          isSelected = true;
-        }
-        if (today.getDate() === i && today.getMonth() === month && today.getFullYear() === year) {
-          dayBtn.classList.add("ina-date-picker__day--today");
+        let isInRange = false;
+        if (mode === "single" && selectedDate) {
+          if (date.toDateString() === selectedDate.toDateString())
+            isSelected = true;
+        } else if (mode === "multiple") {
+          if (selectedDates.some((d) => d.toDateString() === date.toDateString()))
+            isSelected = true;
+        } else if (mode === "range") {
+          const [start, end] = rangeDate;
+          if (start && date.toDateString() === start.toDateString())
+            isSelected = true;
+          if (end && date.toDateString() === end.toDateString())
+            isSelected = true;
+          if (start && end && date > start && date < end) isInRange = true;
         }
-        if (!isSelected) {
-          dayBtn.classList.add("ina-date-picker__day--hover");
-        }
-        dayBtn.addEventListener("click", (e) => {
+        if (isSelected) btn.classList.add("ina-date-picker__day--selected");
+        if (isInRange) btn.classList.add("ina-date-picker__day--in-range");
+        if (date.toDateString() === today.toDateString())
+          btn.classList.add("ina-date-picker__day--today");
+        if (!isSelected && !isInRange)
+          btn.classList.add("ina-date-picker__day--hover");
+        btn.onclick = (e) => {
           e.stopPropagation();
-          selectedDate = new Date(year, month, i);
-          triggerText.textContent = formatDate(selectedDate);
-          triggerText.classList.add("ina-date-picker__trigger-text--value");
-          triggerText.classList.remove(
-            "ina-date-picker__trigger-text--placeholder"
-          );
+          if (mode === "single") {
+            selectedDate = date;
+            close();
+          } else if (mode === "multiple") {
+            const existsIdx = selectedDates.findIndex(
+              (d) => d.toDateString() === date.toDateString()
+            );
+            if (existsIdx >= 0) selectedDates.splice(existsIdx, 1);
+            else selectedDates.push(date);
+            render();
+          } else if (mode === "range") {
+            const [start, end] = rangeDate;
+            if (!start || start && end) {
+              rangeDate = [date, null];
+            } else {
+              if (date < start) {
+                rangeDate = [date, start];
+              } else {
+                rangeDate = [start, date];
+              }
+              close();
+            }
+            render();
+          }
+          updateTrigger();
           datepicker.dispatchEvent(
-            new CustomEvent("date:changed", { detail: { selectedDate } })
+            new CustomEvent("date:changed", {
+              detail: {
+                selectedDate: mode === "single" ? selectedDate : mode === "multiple" ? selectedDates : rangeDate
+              }
+            })
           );
-          toggle(false);
-        });
-        grid.appendChild(dayBtn);
+        };
+        grid.appendChild(btn);
       }
-      const currentCells = grid.children.length - 7;
-      const remaining = 42 - currentCells;
+      const usedCells = grid.children.length - 7;
+      const remaining = 42 - usedCells;
       for (let i = 1; i <= remaining; i++) {
-        const dayBtn = document.createElement("button");
-        dayBtn.type = "button";
-        dayBtn.className = "ina-date-picker__day ina-date-picker__day--other-month ina-date-picker__day--disabled";
-        dayBtn.textContent = i;
-        grid.appendChild(dayBtn);
+        const btn = document.createElement("button");
+        btn.type = "button";
+        btn.className = "ina-date-picker__day ina-date-picker__day--other-month ina-date-picker__day--disabled";
+        btn.textContent = i;
+        grid.appendChild(btn);
       }
-      calendarContainer.append(header, grid);
-      panelContent.appendChild(calendarContainer);
+      container.append(header, grid);
+      return container;
     }
-    function toggle(show) {
-      isOpen = show;
-      if (show) {
-        panel.classList.add("ina-date-picker__panel--open");
-        renderCalendar();
-      } else {
-        panel.classList.remove("ina-date-picker__panel--open");
+    function render() {
+      panelContent.innerHTML = "";
+      const cal1 = renderCalendarGrid(viewDate);
+      panelContent.appendChild(cal1);
+      if (mode === "range" || mode === "multiple") {
+        const nextMonthDate = new Date(
+          viewDate.getFullYear(),
+          viewDate.getMonth() + 1,
+          1
+        );
+        const cal2 = renderCalendarGrid(nextMonthDate, true);
+        panelContent.appendChild(cal2);
       }
     }
+    function open() {
+      isOpen = true;
+      panel.classList.add("ina-date-picker__panel--open");
+      panel.style.display = "block";
+      render();
+    }
+    function close() {
+      isOpen = false;
+      panel.classList.remove("ina-date-picker__panel--open");
+      panel.style.display = "none";
+    }
+    function toggle() {
+      if (isOpen) close();
+      else open();
+    }
     trigger.addEventListener("click", (e) => {
       e.stopPropagation();
-      toggle(!isOpen);
+      toggle();
     });
     document.addEventListener("click", (e) => {
-      if (!datepicker.contains(e.target)) toggle(false);
+      if (!datepicker.contains(e.target)) {
+        close();
+      }
     });
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idds/js",
-  "version": "1.0.38",
+  "version": "1.0.40",
   "publishConfig": {
     "access": "public"
   },