@idds/js 1.0.36 → 1.0.37

package/dist/index.js

@@ -109,10 +109,19 @@ function initAccordion(rootSelector = `.${PREFIX}-accordion`) {
 // src/js/components/stateful/datepicker.js
 function initDatepicker() {
   document.querySelectorAll(".ina-date-picker").forEach((datepicker) => {
+    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");
+    let panelContent = panel.querySelector(".ina-date-picker__panel-content");
+    if (!panelContent) {
+      panelContent = document.createElement("div");
+      panelContent.className = "ina-date-picker__panel-content";
+      panel.appendChild(panelContent);
+    }
     let currentDate = /* @__PURE__ */ new Date();
-    let selectedDateTarget = null;
     let selectedDate = null;
-    const MONTHS = [
+    let isOpen = false;
+    const MONTHS_ID = [
       "Januari",
       "Februari",
       "Maret",
@@ -126,267 +135,325 @@ function initDatepicker() {
       "November",
       "Desember"
     ];
-    const DAYS = ["Min", "Sen", "Sel", "Rab", "Kam", "Jum", "Sab"];
-    const datepickerTrigger = datepicker.querySelector(
-      ".ina-date-picker__trigger"
-    );
-    const datepickerPopover = datepicker.querySelector(
-      ".ina-date-picker__popover"
-    );
-    const datepickerMonthTrigger = datepicker.querySelector(
-      ".ina-date-picker__month-trigger"
-    );
-    const datepickerMonthPopover = datepicker.querySelector(
-      ".ina-date-picker__month-popover"
-    );
-    const datepickerMonthItem = datepicker.querySelectorAll(
-      ".ina-date-picker__month-item"
-    );
-    const datepickerYearTrigger = datepicker.querySelector(
-      ".ina-date-picker__year-trigger"
-    );
-    const datepickerYearPopover = datepicker.querySelector(
-      ".ina-date-picker__year-popover"
-    );
-    const datepickerYearPrevButton = datepicker.querySelector(
-      ".ina-date-picker__year-nav-prev"
-    );
-    const datepickerYearCurrent = datepicker.querySelector(
-      ".ina-date-picker__year-current"
-    );
-    const datepickerYearNextButton = datepicker.querySelector(
-      ".ina-date-picker__year-nav-next"
-    );
-    const datepickerYearContent = datepicker.querySelector(
-      ".ina-date-picker__year-content"
-    );
-    const datepickerYearItem = datepicker.querySelectorAll(
-      ".ina-date-picker__year-item"
-    );
-    const datepickerContent = datepicker.querySelector(
-      ".ina-date-picker__content"
-    );
-    const prevMonthButton = datepicker.querySelector(
-      ".ina-date-picker__nav-prev"
-    );
-    const nextMonthButton = datepicker.querySelector(
-      ".ina-date-picker__nav-next"
-    );
-    const datepickerSubmitButton = datepicker.querySelector(
-      ".ina-date-picker__submit"
-    );
-    function renderYear(startYear, endYear) {
-      datepickerYearContent.innerHTML = "";
-      datepickerYearCurrent.textContent = `${startYear} - ${endYear}`;
-      for (let y = startYear; y <= endYear; y++) {
-        const yearEl = document.createElement("button");
-        yearEl.className = "ina-date-picker__year-item";
-        yearEl.textContent = y;
-        yearEl.dataset.year = y;
-        if (y === currentDate.getFullYear()) {
-          yearEl.classList.add("selected");
+    const MONTHS_SHORT_ID = [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "Mei",
+      "Jun",
+      "Jul",
+      "Agu",
+      "Sep",
+      "Okt",
+      "Nov",
+      "Des"
+    ];
+    const DAYS_SHORT = ["Min", "Sen", "Sel", "Rab", "Kam", "Jum", "Sab"];
+    function formatDate(date) {
+      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>`;
+      }
+      return "";
+    }
+    function createMonthPicker(initialMonth, onChange) {
+      const container = document.createElement("div");
+      container.className = "ina-month-picker";
+      let currentMonthIdx = initialMonth;
+      let isPickerOpen = false;
+      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>
+             `;
+      };
+      updateTriggerText();
+      pickerTrigger.addEventListener("click", (e) => {
+        e.stopPropagation();
+        togglePicker(!isPickerOpen);
+      });
+      const pickerPanel = document.createElement("div");
+      pickerPanel.className = "ina-month-picker__panel";
+      const grid = document.createElement("div");
+      grid.className = "ina-month-picker__grid";
+      MONTHS_SHORT_ID.forEach((m, idx) => {
+        const btn = document.createElement("button");
+        btn.type = "button";
+        btn.className = "ina-month-picker__month-option";
+        if (idx === currentMonthIdx)
+          btn.classList.add("ina-month-picker__month-option--selected");
+        btn.textContent = m;
+        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");
+          });
+          togglePicker(false);
+          onChange(idx);
+        });
+        grid.appendChild(btn);
+      });
+      pickerPanel.appendChild(grid);
+      container.appendChild(pickerTrigger);
+      container.appendChild(pickerPanel);
+      function togglePicker(show) {
+        isPickerOpen = show;
+        if (show) {
+          pickerPanel.classList.add("ina-month-picker__panel--open");
+          pickerTrigger.setAttribute("aria-expanded", "true");
+        } else {
+          pickerPanel.classList.remove("ina-month-picker__panel--open");
+          pickerTrigger.setAttribute("aria-expanded", "false");
         }
-        datepickerYearContent.appendChild(yearEl);
       }
+      document.addEventListener("click", (e) => {
+        if (!container.contains(e.target)) togglePicker(false);
+      });
+      return {
+        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");
+          });
+        }
+      };
     }
-    function renderCalendar(year, month) {
-      datepickerContent.innerHTML = "";
-      datepickerMonthTrigger.textContent = MONTHS[month].substring(0, 3);
-      datepickerYearTrigger.textContent = year;
-      DAYS.forEach((day) => {
-        const dayNameWrapper = document.createElement("div");
-        dayNameWrapper.className = "ina-date-picker__dayname-wrapper";
-        const dayNameEl = document.createElement("span");
-        dayNameEl.className = "ina-date-picker__dayname";
-        dayNameEl.textContent = day.substring(0, 3);
-        dayNameWrapper.appendChild(dayNameEl);
-        datepickerContent.appendChild(dayNameWrapper);
+    function createYearPicker(initialYear, onChange) {
+      const container = document.createElement("div");
+      container.className = "ina-year-picker";
+      let currentYearVal = initialYear;
+      let isPickerOpen = false;
+      let decadeStart = Math.floor(initialYear / 20) * 20;
+      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>
+             `;
+      };
+      updateTriggerText();
+      pickerTrigger.addEventListener("click", (e) => {
+        e.stopPropagation();
+        togglePicker(!isPickerOpen);
+      });
+      const pickerPanel = document.createElement("div");
+      pickerPanel.className = "ina-year-picker__panel";
+      const header = document.createElement("div");
+      header.className = "ina-year-picker__header";
+      const prevBtn = document.createElement("button");
+      prevBtn.type = "button";
+      prevBtn.className = "ina-year-picker__nav-button";
+      prevBtn.innerHTML = createIcon("chevron-left");
+      prevBtn.onclick = (e) => {
+        e.stopPropagation();
+        decadeStart -= 20;
+        renderGrid();
+      };
+      const nextBtn = document.createElement("button");
+      nextBtn.type = "button";
+      nextBtn.className = "ina-year-picker__nav-button";
+      nextBtn.innerHTML = createIcon("chevron-right");
+      nextBtn.onclick = (e) => {
+        e.stopPropagation();
+        decadeStart += 20;
+        renderGrid();
+      };
+      const rangeText = document.createElement("span");
+      rangeText.className = "ina-year-picker__decade-range";
+      header.append(prevBtn, rangeText, nextBtn);
+      const grid = document.createElement("div");
+      grid.className = "ina-year-picker__grid";
+      function renderGrid() {
+        grid.innerHTML = "";
+        rangeText.textContent = `${decadeStart} - ${decadeStart + 19}`;
+        for (let y = decadeStart; y < decadeStart + 20; y++) {
+          const btn = document.createElement("button");
+          btn.type = "button";
+          btn.className = "ina-year-picker__year-option";
+          if (y === currentYearVal)
+            btn.classList.add("ina-year-picker__year-option--selected");
+          btn.textContent = y;
+          btn.addEventListener("click", (e) => {
+            e.stopPropagation();
+            currentYearVal = y;
+            updateTriggerText();
+            togglePicker(false);
+            onChange(y);
+          });
+          grid.appendChild(btn);
+        }
+      }
+      pickerPanel.append(header, grid);
+      container.append(pickerTrigger, pickerPanel);
+      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) => {
+        if (!container.contains(e.target)) togglePicker(false);
+      });
+      return {
+        element: container,
+        setYear: (y) => {
+          currentYearVal = y;
+          updateTriggerText();
+        }
+      };
+    }
+    function renderCalendar() {
+      panelContent.innerHTML = "";
+      const year = currentDate.getFullYear();
+      const month = currentDate.getMonth();
+      const calendarContainer = document.createElement("div");
+      calendarContainer.className = "ina-date-picker__calendar-container";
+      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);
+      const grid = document.createElement("div");
+      grid.className = "ina-date-picker__calendar-grid";
+      DAYS_SHORT.forEach((day) => {
+        const dh = document.createElement("div");
+        dh.className = "ina-date-picker__day-header";
+        dh.textContent = day;
+        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();
-      for (let i = 0; i < firstDayOfMonth; i++) {
-        const dayEl = document.createElement("button");
-        dayEl.className = "ina-date-picker__calendar-day outside-month";
-        dayEl.textContent = daysInPrevMonth - firstDayOfMonth + 1 + i;
-        dayEl.disabled = true;
-        datepickerContent.appendChild(dayEl);
+      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 today = /* @__PURE__ */ new Date();
       for (let i = 1; i <= daysInMonth; i++) {
-        const dayEl = document.createElement("button");
-        dayEl.className = "ina-date-picker__calendar-day";
-        dayEl.textContent = i;
-        dayEl.dataset.date = new Date(year, month, i).toISOString();
-        if (year === today.getFullYear() && month === today.getMonth() && i === today.getDate()) {
-          const marker = document.createElement("span");
-          marker.className = "ina-date-picker__today-marker";
-          marker.textContent = "Hari ini";
-          dayEl.appendChild(marker);
-          dayEl.classList.add("today");
+        const dayBtn = document.createElement("button");
+        dayBtn.type = "button";
+        dayBtn.className = "ina-date-picker__day";
+        dayBtn.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 (selectedDate && year === selectedDate.getFullYear() && month === selectedDate.getMonth() && i === selectedDate.getDate()) {
-          dayEl.classList.add("selected");
+        if (today.getDate() === i && today.getMonth() === month && today.getFullYear() === year) {
+          dayBtn.classList.add("ina-date-picker__day--today");
         }
-        datepickerContent.appendChild(dayEl);
-      }
-      const totalCells = 42;
-      const cellsRendered = firstDayOfMonth + daysInMonth;
-      const remainingCells = totalCells - cellsRendered;
-      for (let i = 1; i <= remainingCells; i++) {
-        const dayEl = document.createElement("button");
-        dayEl.className = "ina-date-picker__calendar-day outside-month";
-        dayEl.textContent = i;
-        dayEl.disabled = true;
-        datepickerContent.appendChild(dayEl);
-      }
-      datepickerMonthPopover.innerHTML = "";
-      MONTHS.forEach((monthName, index) => {
-        const monthEl = document.createElement("button");
-        monthEl.className = "ina-date-picker__month-item";
-        monthEl.textContent = monthName.substring(0, 3);
-        monthEl.dataset.month = index;
-        if (index === month) {
-          monthEl.classList.add("selected");
-        }
-        datepickerMonthPopover.appendChild(monthEl);
-      });
-      datepickerYearContent.innerHTML = "";
-      const startYear = Math.floor(year / 10) * 10;
-      const endYear = startYear + 19;
-      datepickerYearCurrent.textContent = `${startYear} - ${endYear}`;
-      for (let y = startYear; y <= endYear; y++) {
-        const yearEl = document.createElement("button");
-        yearEl.className = "ina-date-picker__year-item";
-        yearEl.textContent = y;
-        yearEl.dataset.year = y;
-        if (y === year) {
-          yearEl.classList.add("selected");
+        if (!isSelected) {
+          dayBtn.classList.add("ina-date-picker__day--hover");
         }
-        datepickerYearContent.appendChild(yearEl);
+        dayBtn.addEventListener("click", (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"
+          );
+          datepicker.dispatchEvent(
+            new CustomEvent("date:changed", { detail: { selectedDate } })
+          );
+          toggle(false);
+        });
+        grid.appendChild(dayBtn);
       }
-    }
-    function togglePopover() {
-      if (datepickerPopover.style.display === "none" || datepickerPopover.style.display === "") {
-        datepickerPopover.style.display = "block";
-        renderCalendar(currentDate.getFullYear(), currentDate.getMonth());
-      } else {
-        datepickerPopover.style.display = "none";
+      const currentCells = grid.children.length - 7;
+      const remaining = 42 - currentCells;
+      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);
       }
+      calendarContainer.append(header, grid);
+      panelContent.appendChild(calendarContainer);
     }
-    function toggleMonthPopover() {
-      if (datepickerMonthPopover.style.display === "none" || datepickerMonthPopover.style.display === "") {
-        datepickerMonthPopover.style.display = "grid";
+    function toggle(show) {
+      isOpen = show;
+      if (show) {
+        panel.classList.add("ina-date-picker__panel--open");
+        renderCalendar();
       } else {
-        datepickerMonthPopover.style.display = "none";
+        panel.classList.remove("ina-date-picker__panel--open");
       }
     }
-    function toggleYearPopover() {
-      if (datepickerYearPopover.style.display === "none" || datepickerYearPopover.style.display === "") {
-        datepickerYearPopover.style.display = "block";
-      } else {
-        datepickerYearPopover.style.display = "none";
-      }
-    }
-    datepickerTrigger.addEventListener("click", (e) => {
+    trigger.addEventListener("click", (e) => {
       e.stopPropagation();
-      togglePopover();
-    });
-    prevMonthButton.addEventListener("click", () => {
-      currentDate.setMonth(currentDate.getMonth() - 1);
-      renderCalendar(currentDate.getFullYear(), currentDate.getMonth());
-    });
-    nextMonthButton.addEventListener("click", () => {
-      currentDate.setMonth(currentDate.getMonth() + 1);
-      renderCalendar(currentDate.getFullYear(), currentDate.getMonth());
-    });
-    datepickerMonthTrigger.addEventListener("click", (e) => {
-      e.stopPropagation();
-      toggleMonthPopover();
-    });
-    datepickerYearTrigger.addEventListener("click", (e) => {
-      e.stopPropagation();
-      toggleYearPopover();
-    });
-    document.addEventListener("click", (e) => {
-      if (!datepickerPopover.contains(e.target) && e.target !== datepickerTrigger && !datepickerTrigger.contains(e.target)) {
-        datepickerPopover.style.display = "none";
-      }
+      toggle(!isOpen);
     });
     document.addEventListener("click", (e) => {
-      if (!datepickerMonthPopover.contains(e.target) && e.target !== datepickerMonthTrigger && !datepickerMonthTrigger.contains(e.target)) {
-        datepickerMonthPopover.style.display = "none";
-      }
+      if (!datepicker.contains(e.target)) toggle(false);
     });
-    document.addEventListener("click", (e) => {
-      if (!datepickerYearPopover.contains(e.target) && e.target !== datepickerYearTrigger && !datepickerYearTrigger.contains(e.target)) {
-        datepickerYearPopover.style.display = "none";
-      }
-    });
-    datepickerMonthPopover.addEventListener("click", (e) => {
-      e.stopPropagation();
-      const target = e.target;
-      if (target.classList.contains("ina-date-picker__month-item")) {
-        const monthIndex = parseInt(target.dataset.month);
-        currentDate.setMonth(monthIndex);
-        renderCalendar(currentDate.getFullYear(), currentDate.getMonth());
-        datepickerMonthPopover.style.display = "none";
-      }
-    });
-    datepickerYearPopover.addEventListener("click", (e) => {
-      e.stopPropagation();
-      const target = e.target;
-      if (target.classList.contains("ina-date-picker__year-nav-prev")) {
-        const currentYearRange = datepickerYearCurrent.textContent.split(" - ").map((y) => parseInt(y));
-        const newStartYear = currentYearRange[0] - 20;
-        const newEndYear = currentYearRange[1] - 20;
-        renderYear(newStartYear, newEndYear);
-      } else if (target.classList.contains("ina-date-picker__year-nav-next")) {
-        const currentYearRange = datepickerYearCurrent.textContent.split(" - ").map((y) => parseInt(y));
-        const newStartYear = currentYearRange[0] + 20;
-        const newEndYear = currentYearRange[1] + 20;
-        renderYear(newStartYear, newEndYear);
-      }
-    });
-    datepickerYearContent.addEventListener("click", (e) => {
-      e.stopPropagation();
-      const target = e.target;
-      if (target.classList.contains("ina-date-picker__year-item")) {
-        const yearValue = parseInt(target.dataset.year);
-        currentDate.setFullYear(yearValue);
-        renderCalendar(currentDate.getFullYear(), currentDate.getMonth());
-        datepickerYearPopover.style.display = "none";
-      }
-    });
-    datepickerContent.addEventListener("click", (e) => {
-      const target = e.target;
-      if (target.classList.contains("ina-date-picker__calendar-day") && !target.classList.contains("outside-month")) {
-        if (target.classList.contains("selected")) {
-          target.classList.remove("selected");
-          selectedDateTarget = null;
-        } else {
-          const selectedDateEl = datepickerContent.querySelector(
-            ".ina-date-picker__calendar-day.selected"
-          );
-          selectedDateEl?.classList.remove("selected");
-          target.classList.add("selected");
-          selectedDateTarget = target;
-        }
-      }
-    });
-    datepickerSubmitButton.addEventListener("click", () => {
-      selectedDate = selectedDateTarget ? new Date(selectedDateTarget.dataset.date) : null;
-      currentDate = selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date();
-      datepicker.dispatchEvent(
-        new CustomEvent("date:changed", { detail: { selectedDate } })
-      );
-      datepickerPopover.style.display = "none";
-    });
-    renderCalendar(currentDate.getFullYear(), currentDate.getMonth());
   });
 }
-document.addEventListener("DOMContentLoaded", () => {
-});
 
 // src/js/components/stateless/modal.js
 function initModal(rootSelector = `.${PREFIX}-modal`) {
@@ -1193,8 +1260,7 @@ if (typeof window !== void 0) {
 
 // src/js/components/stateful/timepicker.js
 function initTimepicker() {
-  const pickers = document.querySelectorAll(".ina-time-picker");
-  pickers.forEach((picker) => {
+  document.querySelectorAll(".ina-time-picker").forEach((picker) => {
     if (picker.dataset.initialized === "true") return;
     picker.dataset.initialized = "true";
     const input = picker.querySelector(".ina-time-picker__input");
@@ -1214,33 +1280,48 @@ function initTimepicker() {
       panel.style.display = "none";
       picker.appendChild(panel);
     }
-    const content = document.createElement("div");
-    content.className = "ina-time-picker__content";
-    panel.appendChild(content);
-    const actions = document.createElement("div");
-    actions.className = "ina-time-picker__actions";
-    const confirmBtn = document.createElement("button");
-    confirmBtn.type = "button";
-    confirmBtn.className = "ina-time-picker__confirm-button";
-    confirmBtn.textContent = "Pilih";
-    actions.appendChild(confirmBtn);
-    panel.appendChild(actions);
+    let content = panel.querySelector(".ina-time-picker__content");
+    if (!content) {
+      content = document.createElement("div");
+      content.className = "ina-time-picker__content";
+      panel.appendChild(content);
+    } else {
+      content.innerHTML = "";
+    }
+    let actions = panel.querySelector(".ina-time-picker__actions");
+    if (!actions) {
+      actions = document.createElement("div");
+      actions.className = "ina-time-picker__actions";
+      const confirmBtn = document.createElement("button");
+      confirmBtn.type = "button";
+      confirmBtn.className = "ina-time-picker__confirm-button";
+      confirmBtn.textContent = "Pilih";
+      confirmBtn.onclick = (e) => {
+        e.stopPropagation();
+        close();
+      };
+      actions.appendChild(confirmBtn);
+      panel.appendChild(actions);
+    }
     const parseTime = (timeStr) => {
       if (!timeStr) return { hours: 0, minutes: 0, seconds: 0, period: "AM" };
-      const parts = timeStr.split(":");
       let hours = 0, minutes = 0, seconds = 0, period = "AM";
-      if (use12Hours) {
-        const timePart = timeStr.split(" ")[0];
-        const periodPart = timeStr.split(" ")[1] || "AM";
-        const tParts = timePart.split(":");
-        hours = parseInt(tParts[0] || "0", 10);
-        minutes = parseInt(tParts[1] || "0", 10);
-        seconds = parseInt(tParts[2] || "0", 10);
-        period = periodPart;
-      } else {
-        hours = parseInt(parts[0] || "0", 10);
-        minutes = parseInt(parts[1] || "0", 10);
-        seconds = parseInt(parts[2] || "0", 10);
+      try {
+        if (use12Hours) {
+          const [time, p] = timeStr.split(" ");
+          const [h, m, s] = time.split(":");
+          hours = parseInt(h || "0", 10);
+          minutes = parseInt(m || "0", 10);
+          seconds = parseInt(s || "0", 10);
+          period = p || "AM";
+        } else {
+          const [h, m, s] = timeStr.split(":");
+          hours = parseInt(h || "0", 10);
+          minutes = parseInt(m || "0", 10);
+          seconds = parseInt(s || "0", 10);
+        }
+      } catch (e) {
+        console.warn("Invalid time format", timeStr);
       }
       return { hours, minutes, seconds, period };
     };
@@ -1249,15 +1330,13 @@ function initTimepicker() {
       if (use12Hours) {
         let displayHours = h;
         if (displayHours === 0) displayHours = 12;
-        if (showSecond) {
-          return `${pad(displayHours)}:${pad(m)}:${pad(s)} ${p}`;
-        }
-        return `${pad(displayHours)}:${pad(m)} ${p}`;
+        const main = `${pad(displayHours)}:${pad(m)}`;
+        const sec = showSecond ? `:${pad(s)}` : "";
+        return `${main}${sec} ${p}`;
       } else {
-        if (showSecond) {
-          return `${pad(h)}:${pad(m)}:${pad(s)}`;
-        }
-        return `${pad(h)}:${pad(m)}`;
+        const main = `${pad(h)}:${pad(m)}`;
+        const sec = showSecond ? `:${pad(s)}` : "";
+        return `${main}${sec}`;
       }
     };
     let currentTime = parseTime(internalValue);
@@ -1277,16 +1356,15 @@ function initTimepicker() {
         let isSelected = false;
         if (type === "hour") {
           isSelected = currentTime.hours === i || use12Hours && currentTime.hours === 0 && i === 12;
-        } else if (type === "minute") {
-          isSelected = currentTime.minutes === i;
-        } else if (type === "second") {
-          isSelected = currentTime.seconds === i;
-        }
+        } else if (type === "minute") isSelected = currentTime.minutes === i;
+        else if (type === "second") isSelected = currentTime.seconds === i;
         if (isSelected)
           option.classList.add("ina-time-picker__option--selected");
         option.addEventListener("click", (e) => {
           e.stopPropagation();
           const val = parseInt(option.dataset.value, 10);
+          if (type === "hour")
+            currentTime.hours = use12Hours && val === 12 ? 0 : val;
           if (type === "hour") currentTime.hours = val;
           if (type === "minute") currentTime.minutes = val;
           if (type === "second") currentTime.seconds = val;
@@ -1350,6 +1428,9 @@ function initTimepicker() {
       panel.style.display = "block";
       currentTime = parseTime(input.value);
       buildPanel();
+      document.dispatchEvent(
+        new CustomEvent("closeTimePicker", { detail: { exclude: picker } })
+      );
     };
     const close = () => {
       isOpen = false;
@@ -1362,17 +1443,13 @@ function initTimepicker() {
       else open();
     };
     wrapper.addEventListener("click", toggle);
-    document.addEventListener("click", (e) => {
-      if (!picker.contains(e.target)) {
-        close();
-      }
+    input.addEventListener("click", (e) => {
     });
-    confirmBtn.addEventListener("click", (e) => {
-      e.stopPropagation();
-      close();
+    document.addEventListener("click", (e) => {
+      if (!picker.contains(e.target)) close();
     });
-    input.addEventListener("change", () => {
-      currentTime = parseTime(input.value);
+    document.addEventListener("closeTimePicker", (e) => {
+      if (e.detail && e.detail.exclude !== picker) close();
     });
     const clearBtn = picker.querySelector(".ina-time-picker__clear-button");
     if (clearBtn && allowClear) {