@idds/js 1.0.37 → 1.0.39

package/dist/index.iife.js

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