@idds/js 1.0.36 → 1.0.38

package/dist/index.iife.js

@@ -31,6 +31,7 @@ var InaUI = (() => {
     initModal: () => initModal,
     initRangeDatepicker: () => initRangeDatepicker,
     initTab: () => initTab,
+    initTimepicker: () => initTimepicker,
     initToggle: () => initToggle,
     showToast: () => showToast
   });
@@ -120,10 +121,19 @@ var InaUI = (() => {
   // 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",
@@ -137,267 +147,325 @@ var InaUI = (() => {
         "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");
+          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 = "ina-date-picker__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) => {
-        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) => {
+      trigger.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("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;
-          }
-        }
+        if (!datepicker.contains(e.target)) toggle(false);
       });
-      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`) {
@@ -819,6 +887,212 @@ var InaUI = (() => {
     });
   }
 
+  // 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";
 
@@ -1296,6 +1570,7 @@ var InaUI = (() => {
       initModal();
       initRangeDatepicker();
       initTab();
+      initTimepicker();
       initToggle();
     });
   }