@idds/js 1.0.35 → 1.0.37

package/dist/index.js

@@ -108,11 +108,20 @@ function initAccordion(rootSelector = `.${PREFIX}-accordion`) {
 
 // src/js/components/stateful/datepicker.js
 function initDatepicker() {
-  document.querySelectorAll(`.${PREFIX}-datepicker`).forEach((datepicker) => {
+  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(
-      `.${PREFIX}-datepicker__trigger`
-    );
-    const datepickerPopover = datepicker.querySelector(
-      `.${PREFIX}-datepicker__popover`
-    );
-    const datepickerMonthTrigger = datepicker.querySelector(
-      `.${PREFIX}-datepicker__month-trigger`
-    );
-    const datepickerMonthPopover = datepicker.querySelector(
-      `.${PREFIX}-datepicker__month-popover`
-    );
-    const datepickerMonthItem = datepicker.querySelectorAll(
-      `.${PREFIX}-datepicker__month-item`
-    );
-    const datepickerYearTrigger = datepicker.querySelector(
-      `.${PREFIX}-datepicker__year-trigger`
-    );
-    const datepickerYearPopover = datepicker.querySelector(
-      `.${PREFIX}-datepicker__year-popover`
-    );
-    const datepickerYearPrevButton = datepicker.querySelector(
-      `.${PREFIX}-datepicker__year-nav-prev`
-    );
-    const datepickerYearCurrent = datepicker.querySelector(
-      `.${PREFIX}-datepicker__year-current`
-    );
-    const datepickerYearNextButton = datepicker.querySelector(
-      `.${PREFIX}-datepicker__year-nav-next`
-    );
-    const datepickerYearContent = datepicker.querySelector(
-      `.${PREFIX}-datepicker__year-content`
-    );
-    const datepickerYearItem = datepicker.querySelectorAll(
-      `.${PREFIX}-datepicker__year-item`
-    );
-    const datepickerContent = datepicker.querySelector(
-      `.${PREFIX}-datepicker__content`
-    );
-    const prevMonthButton = datepicker.querySelector(
-      `.${PREFIX}-datepicker__nav-prev`
-    );
-    const nextMonthButton = datepicker.querySelector(
-      `.${PREFIX}-datepicker__nav-next`
-    );
-    const datepickerSubmitButton = datepicker.querySelector(
-      `.${PREFIX}-datepicker__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 = `${PREFIX}-datepicker__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 = `${PREFIX}-datepicker__dayname-wrapper`;
-        const dayNameEl = document.createElement("span");
-        dayNameEl.className = `${PREFIX}-datepicker__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 = `${PREFIX}-datepicker__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 = `${PREFIX}-datepicker__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 = `${PREFIX}-datepicker__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 = `${PREFIX}-datepicker__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 = `${PREFIX}-datepicker__month-item`;
-        monthEl.textContent = monthName.substring(0, 3);
-        monthEl.dataset.month = index;
-        if (index === month) {
-          monthEl.classList.add("selected");
+        if (!isSelected) {
+          dayBtn.classList.add("ina-date-picker__day--hover");
         }
-        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 = `${PREFIX}-datepicker__year-item`;
-        yearEl.textContent = y;
-        yearEl.dataset.year = y;
-        if (y === year) {
-          yearEl.classList.add("selected");
-        }
-        datepickerYearContent.appendChild(yearEl);
-      }
-    }
-    function togglePopover() {
-      if (datepickerPopover.style.display === "none" || datepickerPopover.style.display === "") {
-        datepickerPopover.style.display = "block";
-        renderCalendar(currentDate.getFullYear(), currentDate.getMonth());
-      } else {
-        datepickerPopover.style.display = "none";
+        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 toggleMonthPopover() {
-      if (datepickerMonthPopover.style.display === "none" || datepickerMonthPopover.style.display === "") {
-        datepickerMonthPopover.style.display = "grid";
-      } else {
-        datepickerMonthPopover.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 toggleYearPopover() {
-      if (datepickerYearPopover.style.display === "none" || datepickerYearPopover.style.display === "") {
-        datepickerYearPopover.style.display = "block";
+    function toggle(show) {
+      isOpen = show;
+      if (show) {
+        panel.classList.add("ina-date-picker__panel--open");
+        renderCalendar();
       } else {
-        datepickerYearPopover.style.display = "none";
+        panel.classList.remove("ina-date-picker__panel--open");
       }
     }
-    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";
-      }
-    });
-    document.addEventListener("click", (e) => {
-      if (!datepickerMonthPopover.contains(e.target) && e.target !== datepickerMonthTrigger && !datepickerMonthTrigger.contains(e.target)) {
-        datepickerMonthPopover.style.display = "none";
-      }
+      toggle(!isOpen);
     });
     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(`${PREFIX}-datepicker__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(`${PREFIX}-datepicker__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(`${PREFIX}-datepicker__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(`${PREFIX}-datepicker__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(`${PREFIX}-datepicker__calendar-day`) && !target.classList.contains("outside-month")) {
-        if (target.classList.contains("selected")) {
-          target.classList.remove("selected");
-          selectedDateTarget = null;
-        } else {
-          const selectedDateEl = datepickerContent.querySelector(
-            `.${PREFIX}-datepicker__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";
+      if (!datepicker.contains(e.target)) toggle(false);
     });
-    renderCalendar(currentDate.getFullYear(), currentDate.getMonth());
   });
 }
-document.addEventListener("DOMContentLoaded", () => {
-});
 
 // src/js/components/stateless/modal.js
 function initModal(rootSelector = `.${PREFIX}-modal`) {
@@ -1191,6 +1258,212 @@ if (typeof window !== void 0) {
   });
 }
 
+// src/js/components/stateful/timepicker.js
+function initTimepicker() {
+  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");
+    const wrapper = picker.querySelector(".ina-time-picker__wrapper");
+    if (!input || !wrapper) return;
+    const format = picker.dataset.format || "HH:mm";
+    const use12Hours = picker.dataset.use12Hours === "true";
+    const showSecond = picker.dataset.showSecond === "true";
+    const disabled = picker.classList.contains("ina-time-picker--disabled");
+    const allowClear = picker.dataset.allowClear !== "false";
+    let isOpen = false;
+    let internalValue = input.value || "";
+    let panel = picker.querySelector(".ina-time-picker__panel");
+    if (!panel) {
+      panel = document.createElement("div");
+      panel.className = "ina-time-picker__panel";
+      panel.style.display = "none";
+      picker.appendChild(panel);
+    }
+    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" };
+      let hours = 0, minutes = 0, seconds = 0, period = "AM";
+      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 };
+    };
+    const formatTime = (h, m, s, p) => {
+      const pad = (n) => n.toString().padStart(2, "0");
+      if (use12Hours) {
+        let displayHours = h;
+        if (displayHours === 0) displayHours = 12;
+        const main = `${pad(displayHours)}:${pad(m)}`;
+        const sec = showSecond ? `:${pad(s)}` : "";
+        return `${main}${sec} ${p}`;
+      } else {
+        const main = `${pad(h)}:${pad(m)}`;
+        const sec = showSecond ? `:${pad(s)}` : "";
+        return `${main}${sec}`;
+      }
+    };
+    let currentTime = parseTime(internalValue);
+    const renderColumn = (type, max) => {
+      const column = document.createElement("div");
+      column.className = `ina-time-picker__column ina-time-picker__column--${type}`;
+      const colContent = document.createElement("div");
+      colContent.className = "ina-time-picker__column-content";
+      column.appendChild(colContent);
+      const start = type === "hour" && use12Hours ? 1 : 0;
+      const end = type === "hour" && use12Hours ? 12 : max - 1;
+      for (let i = start; i <= end; i++) {
+        const option = document.createElement("div");
+        option.className = "ina-time-picker__option";
+        option.textContent = i.toString().padStart(2, "0");
+        option.dataset.value = i;
+        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;
+        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;
+          updateInput();
+          colContent.querySelectorAll(".ina-time-picker__option").forEach(
+            (el) => el.classList.remove("ina-time-picker__option--selected")
+          );
+          option.classList.add("ina-time-picker__option--selected");
+        });
+        colContent.appendChild(option);
+      }
+      return column;
+    };
+    const renderPeriodColumn = () => {
+      const column = document.createElement("div");
+      column.className = `ina-time-picker__column ina-time-picker__column--period`;
+      const colContent = document.createElement("div");
+      colContent.className = "ina-time-picker__column-content";
+      column.appendChild(colContent);
+      ["AM", "PM"].forEach((p) => {
+        const option = document.createElement("div");
+        option.className = "ina-time-picker__option";
+        option.textContent = p;
+        if (currentTime.period === p)
+          option.classList.add("ina-time-picker__option--selected");
+        option.addEventListener("click", (e) => {
+          e.stopPropagation();
+          currentTime.period = p;
+          updateInput();
+          colContent.querySelectorAll(".ina-time-picker__option").forEach(
+            (el) => el.classList.remove("ina-time-picker__option--selected")
+          );
+          option.classList.add("ina-time-picker__option--selected");
+        });
+        colContent.appendChild(option);
+      });
+      return column;
+    };
+    const updateInput = () => {
+      const val = formatTime(
+        currentTime.hours,
+        currentTime.minutes,
+        currentTime.seconds,
+        currentTime.period
+      );
+      input.value = val;
+      picker.dataset.value = val;
+      input.dispatchEvent(new Event("change", { bubbles: true }));
+    };
+    const buildPanel = () => {
+      content.innerHTML = "";
+      content.appendChild(renderColumn("hour", use12Hours ? 13 : 24));
+      content.appendChild(renderColumn("minute", 60));
+      if (showSecond) content.appendChild(renderColumn("second", 60));
+      if (use12Hours) content.appendChild(renderPeriodColumn());
+    };
+    const open = () => {
+      if (disabled) return;
+      isOpen = true;
+      picker.classList.add("ina-time-picker--open");
+      panel.style.display = "block";
+      currentTime = parseTime(input.value);
+      buildPanel();
+      document.dispatchEvent(
+        new CustomEvent("closeTimePicker", { detail: { exclude: picker } })
+      );
+    };
+    const close = () => {
+      isOpen = false;
+      picker.classList.remove("ina-time-picker--open");
+      panel.style.display = "none";
+    };
+    const toggle = (e) => {
+      e.stopPropagation();
+      if (isOpen) close();
+      else open();
+    };
+    wrapper.addEventListener("click", toggle);
+    input.addEventListener("click", (e) => {
+    });
+    document.addEventListener("click", (e) => {
+      if (!picker.contains(e.target)) close();
+    });
+    document.addEventListener("closeTimePicker", (e) => {
+      if (e.detail && e.detail.exclude !== picker) close();
+    });
+    const clearBtn = picker.querySelector(".ina-time-picker__clear-button");
+    if (clearBtn && allowClear) {
+      clearBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        input.value = "";
+        currentTime = { hours: 0, minutes: 0, seconds: 0, period: "AM" };
+        picker.dataset.value = "";
+        input.dispatchEvent(new Event("change", { bubbles: true }));
+      });
+    }
+  });
+}
+
 // src/js/index.js
 var PREFIX = "ina-ss";
 function initAll() {
@@ -1206,6 +1479,7 @@ function initAll() {
   initRangeDatepicker();
   initTab();
   initToggle();
+  initTimepicker();
 }
 export {
   PREFIX,