@idds/js 1.0.86 → 1.0.88

package/dist/index.iife.js

@@ -20,6 +20,9 @@ var InaUI = (() => {
   // src/js/bundle.js
   var bundle_exports = {};
   __export(bundle_exports, {
+    DatePicker: () => DatePicker,
+    Table: () => Table,
+    TimePicker: () => TimePicker,
     initAccordion: () => initAccordion,
     initButtonGroup: () => initButtonGroup,
     initCheckbox: () => initCheckbox,
@@ -355,58 +358,44 @@ var InaUI = (() => {
     });
   }
 
-  // src/js/components/stateful/datepicker.js
-  function initDatepicker() {
-    document.querySelectorAll(`.${PREFIX}-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 || "DD/MM/YYYY";
-      const trigger = datepicker.querySelector(`.${PREFIX}-date-picker__trigger`);
-      const triggerText = trigger.querySelector(
-        `.${PREFIX}-date-picker__trigger-text`
-      );
-      const panel = datepicker.querySelector(`.${PREFIX}-date-picker__panel`);
-      panel.style.display = "none";
-      let panelContent = panel.querySelector(
-        `.${PREFIX}-date-picker__panel-content`
-      );
-      if (!panelContent) {
-        panelContent = document.createElement("div");
-        panelContent.className = `${PREFIX}-date-picker__panel-content`;
-        if (mode === "range" || mode === "multiple") {
-          panelContent.classList.add(
-            `${PREFIX}-date-picker__panel-content--dual`
-          );
-        }
-        panel.appendChild(panelContent);
-      } else {
-        if (mode === "range" || mode === "multiple") {
-          panelContent.classList.add(
-            `${PREFIX}-date-picker__panel-content--dual`
-          );
-        }
+  // src/js/components/stateful/date-picker.js
+  var DatePicker = class {
+    constructor(selectorOrElement, options = {}) {
+      this.container = typeof selectorOrElement === "string" ? document.querySelector(selectorOrElement) : selectorOrElement;
+      if (!this.container) {
+        console.warn("[IDDS DatePicker] Container not found:", selectorOrElement);
+        return;
       }
-      let viewDate = /* @__PURE__ */ new Date();
-      let selectedDate = null;
-      let selectedDates = [];
-      let rangeDate = [null, null];
-      let isOpen = false;
-      const MONTHS_ID = [
-        "Januari",
-        "Februari",
-        "Maret",
-        "April",
-        "Mei",
-        "Juni",
-        "Juli",
-        "Agustus",
-        "September",
-        "Oktober",
-        "November",
-        "Desember"
-      ];
-      const MONTHS_SHORT_ID = [
+      if (this.container.dataset.initialized === "true") {
+        return;
+      }
+      this.container.dataset.initialized = "true";
+      const dataMode = this.container.dataset.mode;
+      const dataFormat = this.container.dataset.format;
+      this.options = {
+        mode: dataMode || "single",
+        // 'single' | 'multiple' | 'range'
+        format: dataFormat || "DD/MM/YYYY",
+        disabledBackDate: false,
+        disabledFutureDate: false,
+        disabledDateBefore: null,
+        disabledDateAfter: null,
+        disabled: false,
+        readonly: false,
+        panelOnly: false,
+        onChange: null,
+        triggerWidth: "",
+        panelMaxHeight: "",
+        ...options
+      };
+      this.state = {
+        viewDate: /* @__PURE__ */ new Date(),
+        selectedDate: null,
+        selectedDates: [],
+        rangeDate: [null, null],
+        isOpen: false
+      };
+      this.MONTHS_SHORT_ID = [
         "Jan",
         "Feb",
         "Mar",
@@ -420,436 +409,1012 @@ var InaUI = (() => {
         "Nov",
         "Des"
       ];
-      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 month = (date.getMonth() + 1).toString().padStart(2, "0");
-        const year = date.getFullYear();
-        return `${day}/${month}/${year}`;
-      }
-      function updateTrigger() {
-        if (mode === "single") {
-          if (selectedDate) {
-            triggerText.textContent = formatDate(selectedDate);
-            triggerText.classList.add(
-              `${PREFIX}-date-picker__trigger-text--value`
-            );
-            triggerText.classList.remove(
-              `${PREFIX}-date-picker__trigger-text--placeholder`
-            );
-          } else {
-            triggerText.textContent = "Pilih Tanggal";
-            triggerText.classList.remove(
-              `${PREFIX}-date-picker__trigger-text--value`
-            );
-            triggerText.classList.add(
-              `${PREFIX}-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(
-              `${PREFIX}-date-picker__trigger-text--value`
-            );
-            triggerText.classList.remove(
-              `${PREFIX}-date-picker__trigger-text--placeholder`
-            );
-          } else if (rangeDate[0]) {
-            triggerText.textContent = `${formatDate(rangeDate[0])} - ...`;
-            triggerText.classList.add(
-              `${PREFIX}-date-picker__trigger-text--value`
-            );
-          } else {
-            triggerText.textContent = "Pilih Rentang Tanggal";
-            triggerText.classList.remove(
-              `${PREFIX}-date-picker__trigger-text--value`
-            );
-            triggerText.classList.add(
-              `${PREFIX}-date-picker__trigger-text--placeholder`
-            );
-          }
-        } else if (mode === "multiple") {
-          if (selectedDates.length > 0) {
-            triggerText.textContent = `${selectedDates.length} Tanggal Terpilih`;
-            triggerText.classList.add(
-              `${PREFIX}-date-picker__trigger-text--value`
-            );
-            triggerText.classList.remove(
-              `${PREFIX}-date-picker__trigger-text--placeholder`
-            );
-          } else {
-            triggerText.textContent = "Pilih Beberapa Tanggal";
-            triggerText.classList.remove(
-              `${PREFIX}-date-picker__trigger-text--value`
-            );
-            triggerText.classList.add(
-              `${PREFIX}-date-picker__trigger-text--placeholder`
-            );
-          }
+      this.DAYS_SHORT = ["Min", "Sen", "Sel", "Rab", "Kam", "Jum", "Sab"];
+      this.elements = {};
+      this.initDOM();
+      this.bindEvents();
+      this.updateTrigger();
+    }
+    formatDate(date) {
+      if (!date) return "";
+      const day = date.getDate().toString().padStart(2, "0");
+      const month = (date.getMonth() + 1).toString().padStart(2, "0");
+      const year = date.getFullYear();
+      return `${day}/${month}/${year}`;
+    }
+    isDateDisabled(date) {
+      if (this.options.disabled || this.options.readonly) return true;
+      const today = /* @__PURE__ */ new Date();
+      today.setHours(0, 0, 0, 0);
+      const d = new Date(date);
+      d.setHours(0, 0, 0, 0);
+      if (this.options.disabledBackDate && d < today) return true;
+      if (this.options.disabledFutureDate && d > today) return true;
+      if (this.options.disabledDateBefore) {
+        const before = new Date(this.options.disabledDateBefore);
+        before.setHours(0, 0, 0, 0);
+        if (d < before) return true;
+      }
+      if (this.options.disabledDateAfter) {
+        const after = new Date(this.options.disabledDateAfter);
+        after.setHours(0, 0, 0, 0);
+        if (d > after) return true;
+      }
+      return false;
+    }
+    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>`;
+      if (name === "calendar")
+        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"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>`;
+      return "";
+    }
+    initDOM() {
+      if (!this.container.classList.contains(`${PREFIX}-date-picker`)) {
+        this.container.classList.add(`${PREFIX}-date-picker`);
+      }
+      let trigger = this.container.querySelector(
+        `.${PREFIX}-date-picker__trigger`
+      );
+      if (!trigger && !this.options.panelOnly) {
+        trigger = document.createElement("button");
+        trigger.type = "button";
+        trigger.className = `${PREFIX}-date-picker__trigger ${PREFIX}-date-picker__trigger--size-md`;
+        if (this.options.disabled) trigger.disabled = true;
+        if (this.options.triggerWidth) {
+          trigger.style.width = typeof this.options.triggerWidth === "number" ? `${this.options.triggerWidth}px` : this.options.triggerWidth;
         }
+        const textWrapper = document.createElement("span");
+        textWrapper.className = `${PREFIX}-date-picker__trigger-text ${PREFIX}-date-picker__trigger-text--placeholder`;
+        textWrapper.textContent = "Pilih Tanggal";
+        const iconWrapper = document.createElement("span");
+        iconWrapper.className = `${PREFIX}-date-picker__trigger-icon`;
+        iconWrapper.innerHTML = this.createIcon("calendar");
+        trigger.appendChild(textWrapper);
+        trigger.appendChild(iconWrapper);
+        this.container.appendChild(trigger);
       }
-      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) {
-        const container = document.createElement("div");
-        container.className = `${PREFIX}-month-picker`;
-        let currentMonthIdx = initialMonth;
-        let isPickerOpen = false;
-        const pickerTrigger = document.createElement("button");
-        pickerTrigger.type = "button";
-        pickerTrigger.className = `${PREFIX}-month-picker__trigger ${PREFIX}-month-picker__trigger--size-sm`;
-        const updateText = () => {
-          pickerTrigger.innerHTML = `<span class="${PREFIX}-month-picker__trigger-text">${MONTHS_SHORT_ID[currentMonthIdx]}</span>`;
-        };
-        updateText();
-        const pickerPanel = document.createElement("div");
-        pickerPanel.className = `${PREFIX}-month-picker__panel`;
-        const grid = document.createElement("div");
-        grid.className = `${PREFIX}-month-picker__grid`;
-        MONTHS_SHORT_ID.forEach((m, idx) => {
+      this.elements.trigger = trigger;
+      if (trigger) {
+        this.elements.triggerText = trigger.querySelector(
+          `.${PREFIX}-date-picker__trigger-text`
+        );
+      }
+      let panel = this.container.querySelector(`.${PREFIX}-date-picker__panel`);
+      if (!panel) {
+        panel = document.createElement("div");
+        panel.className = `${PREFIX}-date-picker__panel`;
+        if (this.options.panelMaxHeight) {
+          panel.style.maxHeight = typeof this.options.panelMaxHeight === "number" ? `${this.options.panelMaxHeight}px` : this.options.panelMaxHeight;
+          panel.style.overflowY = "auto";
+        }
+        this.container.appendChild(panel);
+      }
+      this.elements.panel = panel;
+      if (!this.options.panelOnly) {
+        panel.style.display = "none";
+        panel.style.position = "absolute";
+      } else {
+        panel.style.display = "block";
+        panel.style.position = "relative";
+        panel.classList.add(`${PREFIX}-date-picker__panel--open`);
+      }
+      let panelContent = panel.querySelector(
+        `.${PREFIX}-date-picker__panel-content`
+      );
+      if (!panelContent) {
+        panelContent = document.createElement("div");
+        panelContent.className = `${PREFIX}-date-picker__panel-content`;
+        panel.appendChild(panelContent);
+      }
+      if (this.options.mode === "range" || this.options.mode === "multiple") {
+        panelContent.classList.add(`${PREFIX}-date-picker__panel-content--dual`);
+      }
+      this.elements.panelContent = panelContent;
+    }
+    updateTrigger() {
+      if (this.options.panelOnly || !this.elements.triggerText) return;
+      const { mode } = this.options;
+      const textEl = this.elements.triggerText;
+      if (mode === "single") {
+        if (this.state.selectedDate) {
+          textEl.textContent = this.formatDate(this.state.selectedDate);
+          textEl.classList.add(`${PREFIX}-date-picker__trigger-text--value`);
+          textEl.classList.remove(
+            `${PREFIX}-date-picker__trigger-text--placeholder`
+          );
+        } else {
+          textEl.textContent = "Pilih Tanggal";
+          textEl.classList.remove(`${PREFIX}-date-picker__trigger-text--value`);
+          textEl.classList.add(
+            `${PREFIX}-date-picker__trigger-text--placeholder`
+          );
+        }
+      } else if (mode === "range") {
+        if (this.state.rangeDate[0] && this.state.rangeDate[1]) {
+          const start = this.formatDate(this.state.rangeDate[0]);
+          const end = this.formatDate(this.state.rangeDate[1]);
+          textEl.textContent = `${start} - ${end}`;
+          textEl.classList.add(`${PREFIX}-date-picker__trigger-text--value`);
+          textEl.classList.remove(
+            `${PREFIX}-date-picker__trigger-text--placeholder`
+          );
+        } else if (this.state.rangeDate[0]) {
+          textEl.textContent = `${this.formatDate(this.state.rangeDate[0])} - ...`;
+          textEl.classList.add(`${PREFIX}-date-picker__trigger-text--value`);
+        } else {
+          textEl.textContent = "Pilih Rentang Tanggal";
+          textEl.classList.remove(`${PREFIX}-date-picker__trigger-text--value`);
+          textEl.classList.add(
+            `${PREFIX}-date-picker__trigger-text--placeholder`
+          );
+        }
+      } else if (mode === "multiple") {
+        if (this.state.selectedDates.length > 0) {
+          textEl.textContent = `${this.state.selectedDates.length} Tanggal Terpilih`;
+          textEl.classList.add(`${PREFIX}-date-picker__trigger-text--value`);
+          textEl.classList.remove(
+            `${PREFIX}-date-picker__trigger-text--placeholder`
+          );
+        } else {
+          textEl.textContent = "Pilih Beberapa Tanggal";
+          textEl.classList.remove(`${PREFIX}-date-picker__trigger-text--value`);
+          textEl.classList.add(
+            `${PREFIX}-date-picker__trigger-text--placeholder`
+          );
+        }
+      }
+    }
+    createMonthPicker(initialMonth, onChange) {
+      const container = document.createElement("div");
+      container.className = `${PREFIX}-month-picker`;
+      let currentMonthIdx = initialMonth;
+      let isPickerOpen = false;
+      const pickerTrigger = document.createElement("button");
+      pickerTrigger.type = "button";
+      pickerTrigger.className = `${PREFIX}-month-picker__trigger ${PREFIX}-month-picker__trigger--size-sm`;
+      const updateText = () => {
+        pickerTrigger.innerHTML = `<span class="${PREFIX}-month-picker__trigger-text">${this.MONTHS_SHORT_ID[currentMonthIdx]}</span>`;
+      };
+      updateText();
+      const pickerPanel = document.createElement("div");
+      pickerPanel.className = `${PREFIX}-month-picker__panel`;
+      const grid = document.createElement("div");
+      grid.className = `${PREFIX}-month-picker__grid`;
+      this.MONTHS_SHORT_ID.forEach((m, idx) => {
+        const btn = document.createElement("button");
+        btn.type = "button";
+        btn.className = `${PREFIX}-month-picker__month-option`;
+        if (idx === currentMonthIdx)
+          btn.classList.add(`${PREFIX}-month-picker__month-option--selected`);
+        btn.textContent = m;
+        btn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          currentMonthIdx = idx;
+          updateText();
+          togglePicker(false);
+          onChange(idx);
+        });
+        grid.appendChild(btn);
+      });
+      pickerPanel.appendChild(grid);
+      container.append(pickerTrigger, pickerPanel);
+      pickerTrigger.addEventListener("click", (e) => togglePicker(!isPickerOpen));
+      const togglePicker = (show) => {
+        isPickerOpen = show;
+        if (show) {
+          pickerPanel.classList.add(`${PREFIX}-month-picker__panel--open`);
+          pickerTrigger.setAttribute("aria-expanded", "true");
+        } else {
+          pickerPanel.classList.remove(`${PREFIX}-month-picker__panel--open`);
+          pickerTrigger.setAttribute("aria-expanded", "false");
+        }
+      };
+      document.addEventListener("click", (e) => {
+        if (!container.contains(e.target)) togglePicker(false);
+      });
+      return {
+        element: container,
+        setMonth: (m) => {
+          currentMonthIdx = m;
+          updateText();
+        }
+      };
+    }
+    createYearPicker(initialYear, onChange) {
+      const container = document.createElement("div");
+      container.className = `${PREFIX}-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 = `${PREFIX}-year-picker__trigger ${PREFIX}-year-picker__trigger--size-sm`;
+      const updateText = () => {
+        pickerTrigger.innerHTML = `<span class="${PREFIX}-year-picker__trigger-text">${currentYearVal}</span>`;
+      };
+      updateText();
+      const pickerPanel = document.createElement("div");
+      pickerPanel.className = `${PREFIX}-year-picker__panel`;
+      const header = document.createElement("div");
+      header.className = `${PREFIX}-year-picker__header`;
+      const prevBtn = document.createElement("button");
+      prevBtn.type = "button";
+      prevBtn.className = `${PREFIX}-year-picker__nav-button`;
+      prevBtn.innerHTML = this.createIcon("chevron-left");
+      prevBtn.onclick = () => {
+        decadeStart -= 20;
+        renderGrid();
+      };
+      const nextBtn = document.createElement("button");
+      nextBtn.type = "button";
+      nextBtn.className = `${PREFIX}-year-picker__nav-button`;
+      nextBtn.innerHTML = this.createIcon("chevron-right");
+      nextBtn.onclick = () => {
+        decadeStart += 20;
+        renderGrid();
+      };
+      const rangeText = document.createElement("span");
+      rangeText.className = `${PREFIX}-year-picker__decade-range`;
+      header.append(prevBtn, rangeText, nextBtn);
+      const grid = document.createElement("div");
+      grid.className = `${PREFIX}-year-picker__grid`;
+      const 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 = `${PREFIX}-month-picker__month-option`;
-          if (idx === currentMonthIdx)
-            btn.classList.add(`${PREFIX}-month-picker__month-option--selected`);
-          btn.textContent = m;
+          btn.className = `${PREFIX}-year-picker__year-option`;
+          if (y === currentYearVal)
+            btn.classList.add(`${PREFIX}-year-picker__year-option--selected`);
+          btn.textContent = y;
           btn.addEventListener("click", (e) => {
             e.stopPropagation();
-            currentMonthIdx = idx;
+            currentYearVal = y;
             updateText();
             togglePicker(false);
-            onChange(idx);
+            onChange(y);
           });
           grid.appendChild(btn);
-        });
-        pickerPanel.appendChild(grid);
-        container.append(pickerTrigger, pickerPanel);
-        pickerTrigger.addEventListener("click", (e) => {
-          togglePicker(!isPickerOpen);
-        });
-        function togglePicker(show) {
-          isPickerOpen = show;
-          if (show) {
-            pickerPanel.classList.add(`${PREFIX}-month-picker__panel--open`);
-            pickerTrigger.setAttribute("aria-expanded", "true");
-          } else {
-            pickerPanel.classList.remove(`${PREFIX}-month-picker__panel--open`);
-            pickerTrigger.setAttribute("aria-expanded", "false");
-          }
         }
-        document.addEventListener("click", (e) => {
-          if (!container.contains(e.target)) togglePicker(false);
-        });
-        return {
-          element: container,
-          setMonth: (m) => {
-            currentMonthIdx = m;
-            updateText();
-          }
-        };
-      }
-      function createYearPicker(initialYear, onChange) {
-        const container = document.createElement("div");
-        container.className = `${PREFIX}-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 = `${PREFIX}-year-picker__trigger ${PREFIX}-year-picker__trigger--size-sm`;
-        const updateText = () => {
-          pickerTrigger.innerHTML = `<span class="${PREFIX}-year-picker__trigger-text">${currentYearVal}</span>`;
-        };
-        updateText();
-        const pickerPanel = document.createElement("div");
-        pickerPanel.className = `${PREFIX}-year-picker__panel`;
-        const header = document.createElement("div");
-        header.className = `${PREFIX}-year-picker__header`;
+      };
+      pickerPanel.append(header, grid);
+      container.append(pickerTrigger, pickerPanel);
+      pickerTrigger.addEventListener("click", () => togglePicker(!isPickerOpen));
+      const togglePicker = (show) => {
+        isPickerOpen = show;
+        if (show) {
+          decadeStart = Math.floor(currentYearVal / 20) * 20;
+          renderGrid();
+          pickerPanel.classList.add(`${PREFIX}-year-picker__panel--open`);
+        } else {
+          pickerPanel.classList.remove(`${PREFIX}-year-picker__panel--open`);
+        }
+      };
+      document.addEventListener("click", (e) => {
+        if (!container.contains(e.target)) togglePicker(false);
+      });
+      return {
+        element: container,
+        setYear: (y) => {
+          currentYearVal = y;
+          updateText();
+        }
+      };
+    }
+    renderCalendarGrid(baseDate, isNextMonth = false) {
+      const year = baseDate.getFullYear();
+      const month = baseDate.getMonth();
+      const { mode } = this.options;
+      const container = document.createElement("div");
+      container.className = !isNextMonth ? `${PREFIX}-date-picker__calendar-container` : `${PREFIX}-date-picker__calendar`;
+      const header = document.createElement("div");
+      header.className = isNextMonth ? `${PREFIX}-date-picker__next-month-header` : `${PREFIX}-date-picker__calendar-header`;
+      if (!isNextMonth) {
         const prevBtn = document.createElement("button");
         prevBtn.type = "button";
-        prevBtn.className = `${PREFIX}-year-picker__nav-button`;
-        prevBtn.innerHTML = createIcon("chevron-left");
+        prevBtn.className = `${PREFIX}-date-picker__nav-button`;
+        prevBtn.innerHTML = this.createIcon("chevron-left");
         prevBtn.onclick = (e) => {
-          decadeStart -= 20;
-          renderGrid();
+          e.stopPropagation();
+          this.state.viewDate.setMonth(this.state.viewDate.getMonth() - 1);
+          this.renderPanel();
         };
+        header.appendChild(prevBtn);
+      } else {
+        const spacer = document.createElement("div");
+        spacer.style.width = "32px";
+        header.appendChild(spacer);
+      }
+      const controls = document.createElement("div");
+      controls.className = `${PREFIX}-date-picker__header-controls`;
+      const monthCont = document.createElement("div");
+      monthCont.className = `${PREFIX}-date-picker__dropdown-container`;
+      const monthPicker = this.createMonthPicker(month, (m) => {
+        if (isNextMonth) {
+          this.state.viewDate = new Date(year, m - 1, 1);
+        } else {
+          this.state.viewDate.setMonth(m);
+        }
+        this.renderPanel();
+      });
+      monthCont.appendChild(monthPicker.element);
+      const yearCont = document.createElement("div");
+      yearCont.className = `${PREFIX}-date-picker__dropdown-container`;
+      const yearPicker = this.createYearPicker(year, (y) => {
+        if (isNextMonth) {
+          this.state.viewDate = new Date(y, month - 1, 1);
+        } else {
+          this.state.viewDate.setFullYear(y);
+        }
+        this.renderPanel();
+      });
+      yearCont.appendChild(yearPicker.element);
+      controls.append(monthCont, yearCont);
+      header.appendChild(controls);
+      const showNextBtn = mode === "single" && !isNextMonth || isNextMonth;
+      if (showNextBtn) {
         const nextBtn = document.createElement("button");
         nextBtn.type = "button";
-        nextBtn.className = `${PREFIX}-year-picker__nav-button`;
-        nextBtn.innerHTML = createIcon("chevron-right");
+        nextBtn.className = `${PREFIX}-date-picker__nav-button`;
+        nextBtn.innerHTML = this.createIcon("chevron-right");
         nextBtn.onclick = (e) => {
-          decadeStart += 20;
-          renderGrid();
+          e.stopPropagation();
+          this.state.viewDate.setMonth(this.state.viewDate.getMonth() + 1);
+          this.renderPanel();
         };
-        const rangeText = document.createElement("span");
-        rangeText.className = `${PREFIX}-year-picker__decade-range`;
-        header.append(prevBtn, rangeText, nextBtn);
-        const grid = document.createElement("div");
-        grid.className = `${PREFIX}-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 = `${PREFIX}-year-picker__year-option`;
-            if (y === currentYearVal)
-              btn.classList.add(`${PREFIX}-year-picker__year-option--selected`);
-            btn.textContent = y;
-            btn.addEventListener("click", (e) => {
-              e.stopPropagation();
-              currentYearVal = y;
-              updateText();
-              togglePicker(false);
-              onChange(y);
-            });
-            grid.appendChild(btn);
-          }
+        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 = `${PREFIX}-date-picker__calendar-grid`;
+      this.DAYS_SHORT.forEach((d) => {
+        const dh = document.createElement("div");
+        dh.className = `${PREFIX}-date-picker__day-header`;
+        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 btn = document.createElement("button");
+        btn.type = "button";
+        btn.className = `${PREFIX}-date-picker__day ${PREFIX}-date-picker__day--other-month ${PREFIX}-date-picker__day--disabled`;
+        btn.textContent = daysInPrevMonth - i;
+        grid.appendChild(btn);
+      }
+      for (let i = 1; i <= daysInMonth; i++) {
+        const date = new Date(year, month, i);
+        const btn = document.createElement("button");
+        btn.type = "button";
+        btn.className = `${PREFIX}-date-picker__day`;
+        btn.textContent = i;
+        const disabled = this.isDateDisabled(date);
+        if (disabled) {
+          btn.classList.add(`${PREFIX}-date-picker__day--disabled`);
+          btn.disabled = true;
         }
-        pickerPanel.append(header, grid);
-        container.append(pickerTrigger, pickerPanel);
-        pickerTrigger.addEventListener("click", (e) => {
-          togglePicker(!isPickerOpen);
-        });
-        function togglePicker(show) {
-          isPickerOpen = show;
-          if (show) {
-            decadeStart = Math.floor(currentYearVal / 20) * 20;
-            renderGrid();
-            pickerPanel.classList.add(`${PREFIX}-year-picker__panel--open`);
-          } else {
-            pickerPanel.classList.remove(`${PREFIX}-year-picker__panel--open`);
-          }
+        let isSelected = false;
+        let isInRange = false;
+        if (mode === "single" && this.state.selectedDate) {
+          if (date.toDateString() === this.state.selectedDate.toDateString())
+            isSelected = true;
+        } else if (mode === "multiple") {
+          if (this.state.selectedDates.some(
+            (d) => d.toDateString() === date.toDateString()
+          ))
+            isSelected = true;
+        } else if (mode === "range") {
+          const [start, end] = this.state.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;
         }
-        document.addEventListener("click", (e) => {
-          if (!container.contains(e.target)) togglePicker(false);
-        });
-        return {
-          element: container,
-          setYear: (y) => {
-            currentYearVal = y;
-            updateText();
-          }
-        };
-      }
-      function renderCalendarGrid(baseDate, isNextMonth = false) {
-        const year = baseDate.getFullYear();
-        const month = baseDate.getMonth();
-        const container = document.createElement("div");
-        if (!isNextMonth) {
-          container.className = `${PREFIX}-date-picker__calendar-container`;
-        } else {
-          container.className = `${PREFIX}-date-picker__calendar`;
-        }
-        const header = document.createElement("div");
-        header.className = isNextMonth ? `${PREFIX}-date-picker__next-month-header` : `${PREFIX}-date-picker__calendar-header`;
-        if (!isNextMonth) {
-          const prevBtn = document.createElement("button");
-          prevBtn.type = "button";
-          prevBtn.className = `${PREFIX}-date-picker__nav-button`;
-          prevBtn.innerHTML = createIcon("chevron-left");
-          prevBtn.onclick = (e) => {
+        if (isSelected) btn.classList.add(`${PREFIX}-date-picker__day--selected`);
+        if (isInRange) btn.classList.add(`${PREFIX}-date-picker__day--in-range`);
+        if (date.toDateString() === today.toDateString())
+          btn.classList.add(`${PREFIX}-date-picker__day--today`);
+        if (!isSelected && !isInRange && !disabled)
+          btn.classList.add(`${PREFIX}-date-picker__day--hover`);
+        if (!disabled && !this.options.readonly) {
+          btn.onclick = (e) => {
             e.stopPropagation();
-            viewDate.setMonth(viewDate.getMonth() - 1);
-            render();
+            this.handleDateSelect(date);
           };
-          header.appendChild(prevBtn);
+        }
+        grid.appendChild(btn);
+      }
+      const usedCells = grid.children.length - 7;
+      const remaining = 42 - usedCells;
+      for (let i = 1; i <= remaining; i++) {
+        const btn = document.createElement("button");
+        btn.type = "button";
+        btn.className = `${PREFIX}-date-picker__day ${PREFIX}-date-picker__day--other-month ${PREFIX}-date-picker__day--disabled`;
+        btn.textContent = i;
+        grid.appendChild(btn);
+      }
+      container.append(header, grid);
+      return container;
+    }
+    handleDateSelect(date) {
+      const { mode } = this.options;
+      if (mode === "single") {
+        this.state.selectedDate = date;
+        if (!this.options.panelOnly) this.close();
+      } else if (mode === "multiple") {
+        const existsIdx = this.state.selectedDates.findIndex(
+          (d) => d.toDateString() === date.toDateString()
+        );
+        if (existsIdx >= 0) this.state.selectedDates.splice(existsIdx, 1);
+        else this.state.selectedDates.push(date);
+      } else if (mode === "range") {
+        const [start, end] = this.state.rangeDate;
+        if (!start || start && end) {
+          this.state.rangeDate = [date, null];
         } else {
-          const spacer = document.createElement("div");
-          spacer.style.width = "32px";
-          header.appendChild(spacer);
-        }
-        const controls = document.createElement("div");
-        controls.className = isNextMonth ? `${PREFIX}-date-picker__next-month-controls` : `${PREFIX}-date-picker__header-controls`;
-        controls.className = `${PREFIX}-date-picker__header-controls`;
-        const monthCont = document.createElement("div");
-        monthCont.className = `${PREFIX}-date-picker__dropdown-container`;
-        const monthPicker = createMonthPicker(month, (m) => {
-          if (isNextMonth) {
-            viewDate = new Date(year, m - 1, 1);
-          } else {
-            viewDate.setMonth(m);
-          }
-          render();
-        });
-        monthCont.appendChild(monthPicker.element);
-        const yearCont = document.createElement("div");
-        yearCont.className = `${PREFIX}-date-picker__dropdown-container`;
-        const yearPicker = createYearPicker(year, (y) => {
-          if (isNextMonth) {
-            viewDate = new Date(y, month - 1, 1);
+          if (date < start) {
+            this.state.rangeDate = [date, start];
           } else {
-            viewDate.setFullYear(y);
+            this.state.rangeDate = [start, date];
           }
-          render();
-        });
-        yearCont.appendChild(yearPicker.element);
-        controls.append(monthCont, yearCont);
-        header.appendChild(controls);
-        const showNextBtn = mode === "single" && !isNextMonth || isNextMonth;
-        if (showNextBtn) {
-          const nextBtn = document.createElement("button");
-          nextBtn.type = "button";
-          nextBtn.className = `${PREFIX}-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 = `${PREFIX}-date-picker__calendar-grid`;
-        DAYS_SHORT.forEach((d) => {
-          const dh = document.createElement("div");
-          dh.className = `${PREFIX}-date-picker__day-header`;
-          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 btn = document.createElement("button");
-          btn.type = "button";
-          btn.className = `${PREFIX}-date-picker__day ${PREFIX}-date-picker__day--other-month ${PREFIX}-date-picker__day--disabled`;
-          btn.textContent = daysInPrevMonth - i;
-          grid.appendChild(btn);
+          if (!this.options.panelOnly) this.close();
         }
-        for (let i = 1; i <= daysInMonth; i++) {
-          const date = new Date(year, month, i);
-          const btn = document.createElement("button");
-          btn.type = "button";
-          btn.className = `${PREFIX}-date-picker__day`;
-          btn.textContent = i;
-          let isSelected = false;
-          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;
+      }
+      this.renderPanel();
+      this.updateTrigger();
+      this.triggerChange();
+    }
+    renderPanel() {
+      this.elements.panelContent.innerHTML = "";
+      const cal1 = this.renderCalendarGrid(this.state.viewDate);
+      this.elements.panelContent.appendChild(cal1);
+      if (this.options.mode === "range" || this.options.mode === "multiple") {
+        const nextMonthDate = new Date(
+          this.state.viewDate.getFullYear(),
+          this.state.viewDate.getMonth() + 1,
+          1
+        );
+        const cal2 = this.renderCalendarGrid(nextMonthDate, true);
+        this.elements.panelContent.appendChild(cal2);
+      }
+    }
+    open() {
+      if (this.options.disabled || this.options.panelOnly) return;
+      this.state.isOpen = true;
+      this.elements.panel.classList.add(`${PREFIX}-date-picker__panel--open`);
+      this.elements.panel.style.display = "block";
+      this.renderPanel();
+    }
+    close() {
+      if (this.options.panelOnly) return;
+      this.state.isOpen = false;
+      this.elements.panel.classList.remove(`${PREFIX}-date-picker__panel--open`);
+      this.elements.panel.style.display = "none";
+    }
+    toggle() {
+      if (this.state.isOpen) this.close();
+      else this.open();
+    }
+    bindEvents() {
+      if (this.elements.trigger) {
+        this.elements.trigger.addEventListener("click", () => this.toggle());
+      }
+      document.addEventListener("click", (e) => {
+        if (!this.container.contains(e.target) && !this.options.panelOnly) {
+          this.close();
+        }
+      });
+      if (this.options.panelOnly) {
+        this.renderPanel();
+      }
+    }
+    triggerChange() {
+      let detailValue;
+      if (this.options.mode === "single") detailValue = this.state.selectedDate;
+      else if (this.options.mode === "multiple")
+        detailValue = this.state.selectedDates;
+      else detailValue = this.state.rangeDate;
+      this.container.dispatchEvent(
+        new CustomEvent("date:changed", {
+          bubbles: true,
+          composed: true,
+          detail: {
+            selectedDate: detailValue
           }
-          if (isSelected)
-            btn.classList.add(`${PREFIX}-date-picker__day--selected`);
-          if (isInRange)
-            btn.classList.add(`${PREFIX}-date-picker__day--in-range`);
-          if (date.toDateString() === today.toDateString())
-            btn.classList.add(`${PREFIX}-date-picker__day--today`);
-          if (!isSelected && !isInRange)
-            btn.classList.add(`${PREFIX}-date-picker__day--hover`);
-          btn.onclick = (e) => {
+        })
+      );
+      if (typeof this.options.onChange === "function") {
+        this.options.onChange(detailValue);
+      }
+    }
+    // --- Public API ---
+    getValue() {
+      if (this.options.mode === "single") return this.state.selectedDate;
+      if (this.options.mode === "multiple") return this.state.selectedDates;
+      return this.state.rangeDate;
+    }
+  };
+  function initDatepicker(selectorOrElement, options = {}) {
+    const elements = typeof selectorOrElement === "string" ? document.querySelectorAll(selectorOrElement) : selectorOrElement ? typeof selectorOrElement.length !== "undefined" ? selectorOrElement : [selectorOrElement] : document.querySelectorAll(`.${PREFIX}-date-picker`);
+    const instances = [];
+    elements.forEach((container) => {
+      const instance = new DatePicker(container, options);
+      container.__datepickerAPI = instance;
+      instances.push(instance);
+    });
+    if (instances.length === 0) return null;
+    return instances.length === 1 ? instances[0] : instances;
+  }
+
+  // src/js/components/stateful/time-picker.js
+  var TimePicker = class {
+    constructor(selectorOrElement, options = {}) {
+      this.container = typeof selectorOrElement === "string" ? document.querySelector(selectorOrElement) : selectorOrElement;
+      if (!this.container) {
+        console.warn("[IDDS TimePicker] Container not found:", selectorOrElement);
+        return;
+      }
+      if (this.container.dataset.initialized === "true") {
+        return;
+      }
+      this.container.dataset.initialized = "true";
+      const format = this.container.dataset.format || "HH:mm";
+      const use12HoursAttr = this.container.dataset.use12Hours === "true" || this.container.getAttribute("data-use-12-hours") === "true" || /a/i.test(format);
+      const showSecondAttr = this.container.dataset.showSecond === "true";
+      const allowClearAttr = this.container.dataset.allowClear !== "false";
+      const disabledAttr = this.container.classList.contains(
+        `${PREFIX}-time-picker--disabled`
+      );
+      this.options = {
+        format,
+        use12Hours: use12HoursAttr || false,
+        showSecond: showSecondAttr || false,
+        allowClear: allowClearAttr,
+        disabled: disabledAttr || false,
+        readonly: false,
+        disabledBackTime: false,
+        disabledTimeBefore: null,
+        disabledTimeAfter: null,
+        showNowButton: false,
+        hourStep: 1,
+        minuteStep: 1,
+        secondStep: 1,
+        onChange: null,
+        ...options
+      };
+      this.state = {
+        isOpen: false,
+        currentTime: { hours: 0, minutes: 0, seconds: 0, period: "AM" },
+        internalValue: ""
+      };
+      this.elements = {};
+      this.initDOM();
+      this.bindEvents();
+      if (this.elements.input && this.elements.input.value) {
+        this.state.internalValue = this.elements.input.value;
+        this.state.currentTime = this.parseTime(this.state.internalValue);
+      } else if (this.container.dataset.value) {
+        this.state.internalValue = this.container.dataset.value;
+        this.state.currentTime = this.parseTime(this.state.internalValue);
+        this.updateInput();
+      }
+    }
+    createIcon(name, size = 16) {
+      if (name === "clock")
+        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"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>`;
+      if (name === "x")
+        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"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`;
+      return "";
+    }
+    parseTime(timeStr) {
+      if (!timeStr) return { hours: 0, minutes: 0, seconds: 0, period: "AM" };
+      let hours = 0, minutes = 0, seconds = 0, period = "AM";
+      try {
+        if (this.options.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("[IDDS TimePicker] Invalid time format:", timeStr);
+      }
+      return { hours, minutes, seconds, period };
+    }
+    formatTime(h, m, s, p) {
+      const pad = (n) => n.toString().padStart(2, "0");
+      if (this.options.use12Hours) {
+        let displayHours = h;
+        if (displayHours === 0) displayHours = 12;
+        const main = `${pad(displayHours)}:${pad(m)}`;
+        const sec = this.options.showSecond ? `:${pad(s)}` : "";
+        return `${main}${sec} ${p}`;
+      } else {
+        const main = `${pad(h)}:${pad(m)}`;
+        const sec = this.options.showSecond ? `:${pad(s)}` : "";
+        return `${main}${sec}`;
+      }
+    }
+    parseTimeToMinutes(timeStr) {
+      if (!timeStr) return 0;
+      const parts = timeStr.split(":");
+      const hours = parseInt(parts[0] || "0", 10);
+      const minutes = parseInt(parts[1] || "0", 10);
+      if (this.options.use12Hours && timeStr.includes(" ")) {
+        const period = timeStr.split(" ")[1];
+        let adjustedHours = hours;
+        if (period === "PM" && hours !== 12) adjustedHours = hours + 12;
+        else if (period === "AM" && hours === 12) adjustedHours = 0;
+        return adjustedHours * 60 + minutes;
+      }
+      return hours * 60 + minutes;
+    }
+    isTimeDisabled(hours, minutes, seconds, period, checkOptions = {}) {
+      const timeStr = this.formatTime(hours, minutes, seconds, period);
+      const timeInMinutes = this.parseTimeToMinutes(timeStr);
+      if (this.options.disabledBackTime && !checkOptions.ignoreBefore) {
+        const now = /* @__PURE__ */ new Date();
+        const currentTimeInMinutes = now.getHours() * 60 + now.getMinutes();
+        if (timeInMinutes < currentTimeInMinutes) return true;
+      }
+      if (this.options.disabledTimeBefore && !checkOptions.ignoreBefore) {
+        const beforeTimeInMinutes = this.parseTimeToMinutes(
+          this.options.disabledTimeBefore
+        );
+        if (timeInMinutes < beforeTimeInMinutes) return true;
+      }
+      if (this.options.disabledTimeAfter && !checkOptions.ignoreAfter) {
+        const afterTimeInMinutes = this.parseTimeToMinutes(
+          this.options.disabledTimeAfter
+        );
+        if (timeInMinutes > afterTimeInMinutes) return true;
+      }
+      return false;
+    }
+    initDOM() {
+      if (!this.container.classList.contains(`${PREFIX}-time-picker`)) {
+        this.container.classList.add(`${PREFIX}-time-picker`);
+      }
+      if (this.options.disabled) {
+        this.container.classList.add(`${PREFIX}-time-picker--disabled`);
+      }
+      let wrapper = this.container.querySelector(
+        `.${PREFIX}-time-picker__wrapper`
+      );
+      let input = this.container.querySelector(`.${PREFIX}-time-picker__input`);
+      let clearBtn = this.container.querySelector(
+        `.${PREFIX}-time-picker__clear-button`
+      );
+      if (!wrapper) {
+        wrapper = document.createElement("div");
+        wrapper.className = `${PREFIX}-time-picker__wrapper`;
+        const prefixIcon = document.createElement("div");
+        prefixIcon.className = `${PREFIX}-time-picker__prefix-icon`;
+        prefixIcon.innerHTML = this.createIcon("clock");
+        wrapper.appendChild(prefixIcon);
+        input = document.createElement("input");
+        input.type = "text";
+        input.className = `${PREFIX}-time-picker__input ${PREFIX}-time-picker__input--size-md ${PREFIX}-time-picker__input--with-prefix`;
+        if (this.options.allowClear)
+          input.classList.add(`${PREFIX}-time-picker__input--with-suffix`);
+        input.placeholder = this.container.getAttribute("placeholder") || "Select time";
+        if (this.options.disabled) input.disabled = true;
+        if (this.options.readonly) input.readOnly = true;
+        else input.readOnly = true;
+        wrapper.appendChild(input);
+        if (this.options.allowClear) {
+          clearBtn = document.createElement("div");
+          clearBtn.className = `${PREFIX}-time-picker__clear-button`;
+          clearBtn.innerHTML = this.createIcon("x");
+          clearBtn.style.display = "none";
+          wrapper.appendChild(clearBtn);
+        }
+        this.container.appendChild(wrapper);
+      }
+      this.elements.wrapper = wrapper;
+      this.elements.input = input;
+      this.elements.clearBtn = clearBtn;
+      let panel = this.container.querySelector(`.${PREFIX}-time-picker__panel`);
+      if (!panel) {
+        panel = document.createElement("div");
+        panel.className = `${PREFIX}-time-picker__panel`;
+        panel.style.display = "none";
+        this.container.appendChild(panel);
+      }
+      let content = panel.querySelector(`.${PREFIX}-time-picker__content`);
+      if (!content) {
+        content = document.createElement("div");
+        content.className = `${PREFIX}-time-picker__content`;
+        panel.appendChild(content);
+      }
+      let actions = panel.querySelector(`.${PREFIX}-time-picker__actions`);
+      if (!actions) {
+        actions = document.createElement("div");
+        actions.className = `${PREFIX}-time-picker__actions`;
+        if (this.options.showNowButton) {
+          const nowBtn = document.createElement("button");
+          nowBtn.type = "button";
+          nowBtn.className = `${PREFIX}-time-picker__action-button`;
+          nowBtn.textContent = "Sekarang";
+          nowBtn.onclick = (e) => {
             e.stopPropagation();
-            if (mode === "single") {
-              selectedDate = date;
-              render();
-            } 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];
-                }
-              }
-              render();
+            const now = /* @__PURE__ */ new Date();
+            let p = "AM";
+            let h = now.getHours();
+            if (this.options.use12Hours) {
+              p = h >= 12 ? "PM" : "AM";
+              h = h % 12 || 12;
             }
-            updateTrigger();
-            console.log(`[InaUI] Dispatching date:changed for ${mode}`);
-            datepicker.dispatchEvent(
-              new CustomEvent("date:changed", {
-                bubbles: true,
-                composed: true,
-                detail: {
-                  selectedDate: mode === "single" ? selectedDate : mode === "multiple" ? selectedDates : rangeDate
-                }
-              })
-            );
+            this.state.currentTime = {
+              hours: h,
+              minutes: now.getMinutes(),
+              seconds: this.options.showSecond ? now.getSeconds() : 0,
+              period: p
+            };
+            this.updateInput();
+            this.close();
           };
-          grid.appendChild(btn);
+          actions.appendChild(nowBtn);
         }
-        const usedCells = grid.children.length - 7;
-        const remaining = 42 - usedCells;
-        for (let i = 1; i <= remaining; i++) {
-          const btn = document.createElement("button");
-          btn.type = "button";
-          btn.className = `${PREFIX}-date-picker__day ${PREFIX}-date-picker__day--other-month ${PREFIX}-date-picker__day--disabled`;
-          btn.textContent = i;
-          grid.appendChild(btn);
+        const confirmBtn = document.createElement("button");
+        confirmBtn.type = "button";
+        confirmBtn.className = `${PREFIX}-time-picker__confirm-button`;
+        confirmBtn.textContent = "Pilih";
+        confirmBtn.onclick = (e) => {
+          e.stopPropagation();
+          this.close();
+        };
+        actions.appendChild(confirmBtn);
+        panel.appendChild(actions);
+      }
+      this.elements.panel = panel;
+      this.elements.content = content;
+      this.elements.actions = actions;
+    }
+    updateInput() {
+      const val = this.formatTime(
+        this.state.currentTime.hours,
+        this.state.currentTime.minutes,
+        this.state.currentTime.seconds,
+        this.state.currentTime.period
+      );
+      this.state.internalValue = val;
+      this.elements.input.value = val;
+      this.container.dataset.value = val;
+      if (this.elements.clearBtn && this.options.allowClear) {
+        this.elements.clearBtn.style.display = val && !this.options.disabled ? "flex" : "none";
+      }
+      this.elements.input.dispatchEvent(new Event("change", { bubbles: true }));
+      if (typeof this.options.onChange === "function") {
+        this.options.onChange(val);
+      }
+    }
+    generateOptions(type) {
+      const options = [];
+      const { use12Hours, hourStep, minuteStep, secondStep } = this.options;
+      let limit = type === "hour" ? use12Hours ? 12 : 24 : 60;
+      let step = type === "hour" ? hourStep : type === "minute" ? minuteStep : secondStep;
+      if (limit === 12) {
+        for (let i = type === "hour" ? 1 : 0; i <= (type === "hour" ? 12 : 59); i += step) {
+          options.push(i);
         }
-        container.append(header, grid);
-        return container;
-      }
-      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);
+      } else if (limit === 24) {
+        for (let i = 0; i <= 23; i += step) {
+          options.push(i);
+        }
+      } else {
+        for (let i = 0; i <= 59; i += step) {
+          options.push(i);
         }
       }
-      function open() {
-        isOpen = true;
-        panel.classList.add(`${PREFIX}-date-picker__panel--open`);
-        panel.style.display = "block";
-        render();
-      }
-      function close() {
-        isOpen = false;
-        panel.classList.remove(`${PREFIX}-date-picker__panel--open`);
-        panel.style.display = "none";
+      return options;
+    }
+    renderColumn(type, optionsArr) {
+      const column = document.createElement("div");
+      column.className = `${PREFIX}-time-picker__column ${PREFIX}-time-picker__column--${type}`;
+      const colContent = document.createElement("div");
+      colContent.className = `${PREFIX}-time-picker__column-content`;
+      column.appendChild(colContent);
+      const { use12Hours } = this.options;
+      const { currentTime } = this.state;
+      optionsArr.forEach((optValue) => {
+        const option = document.createElement("div");
+        option.className = `${PREFIX}-time-picker__option`;
+        let isSelected = false;
+        let isDisabled = false;
+        if (type === "hour") {
+          isSelected = currentTime.hours === optValue || use12Hours && currentTime.hours === 0 && optValue === 12;
+          const hourValue = use12Hours ? optValue === 12 ? 0 : optValue : optValue;
+          const isTooEarly = this.isTimeDisabled(
+            hourValue,
+            59,
+            59,
+            use12Hours ? currentTime.period : void 0,
+            { ignoreAfter: true }
+          );
+          const isTooLate = this.isTimeDisabled(
+            hourValue,
+            0,
+            0,
+            use12Hours ? currentTime.period : void 0,
+            { ignoreBefore: true }
+          );
+          isDisabled = isTooEarly || isTooLate;
+        } else if (type === "minute") {
+          isSelected = currentTime.minutes === optValue;
+          isDisabled = this.isTimeDisabled(
+            currentTime.hours,
+            optValue,
+            currentTime.seconds,
+            use12Hours ? currentTime.period : void 0
+          );
+        } else if (type === "second") {
+          isSelected = currentTime.seconds === optValue;
+          isDisabled = this.isTimeDisabled(
+            currentTime.hours,
+            currentTime.minutes,
+            optValue,
+            use12Hours ? currentTime.period : void 0
+          );
+        }
+        if (isSelected)
+          option.classList.add(`${PREFIX}-time-picker__option--selected`);
+        if (isDisabled)
+          option.classList.add(`${PREFIX}-time-picker__option--disabled`);
+        option.textContent = optValue.toString().padStart(2, "0");
+        if (!isDisabled) {
+          option.addEventListener("click", (e) => {
+            e.stopPropagation();
+            const val = parseInt(optValue, 10);
+            if (type === "hour") {
+              this.state.currentTime.hours = use12Hours && val === 12 ? 0 : val;
+            } else if (type === "minute") {
+              this.state.currentTime.minutes = val;
+            } else if (type === "second") {
+              this.state.currentTime.seconds = val;
+            }
+            this.updateInput();
+            this.buildPanel();
+          });
+        }
+        colContent.appendChild(option);
+      });
+      return column;
+    }
+    renderPeriodColumn() {
+      const column = document.createElement("div");
+      column.className = `${PREFIX}-time-picker__column ${PREFIX}-time-picker__column--period`;
+      const colContent = document.createElement("div");
+      colContent.className = `${PREFIX}-time-picker__column-content`;
+      column.appendChild(colContent);
+      ["AM", "PM"].forEach((p) => {
+        const option = document.createElement("div");
+        option.className = `${PREFIX}-time-picker__option`;
+        option.textContent = p;
+        if (this.state.currentTime.period === p) {
+          option.classList.add(`${PREFIX}-time-picker__option--selected`);
+        }
+        const isDisabled = this.isTimeDisabled(
+          this.state.currentTime.hours,
+          this.state.currentTime.minutes,
+          this.state.currentTime.seconds,
+          p
+        );
+        if (isDisabled)
+          option.classList.add(`${PREFIX}-time-picker__option--disabled`);
+        if (!isDisabled) {
+          option.addEventListener("click", (e) => {
+            e.stopPropagation();
+            this.state.currentTime.period = p;
+            this.updateInput();
+            this.buildPanel();
+          });
+        }
+        colContent.appendChild(option);
+      });
+      return column;
+    }
+    buildPanel() {
+      this.elements.content.innerHTML = "";
+      const hourOps = this.generateOptions("hour");
+      const minOps = this.generateOptions("minute");
+      this.elements.content.appendChild(this.renderColumn("hour", hourOps));
+      this.elements.content.appendChild(this.renderColumn("minute", minOps));
+      if (this.options.showSecond) {
+        const secOps = this.generateOptions("second");
+        this.elements.content.appendChild(this.renderColumn("second", secOps));
       }
-      function toggle() {
-        if (isOpen) close();
-        else open();
+      if (this.options.use12Hours) {
+        this.elements.content.appendChild(this.renderPeriodColumn());
       }
-      trigger.addEventListener("click", (e) => {
-        toggle();
+    }
+    open() {
+      if (this.options.disabled || this.state.isOpen) return;
+      this.state.isOpen = true;
+      this.container.classList.add(`${PREFIX}-time-picker--open`);
+      this.elements.panel.style.display = "block";
+      this.state.currentTime = this.parseTime(this.elements.input.value);
+      this.buildPanel();
+      document.dispatchEvent(
+        new CustomEvent("closeTimePicker", {
+          detail: { exclude: this.container }
+        })
+      );
+    }
+    close() {
+      this.state.isOpen = false;
+      this.container.classList.remove(`${PREFIX}-time-picker--open`);
+      this.elements.panel.style.display = "none";
+    }
+    toggle() {
+      if (this.state.isOpen) this.close();
+      else this.open();
+    }
+    bindEvents() {
+      this.elements.wrapper.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.toggle();
       });
+      if (this.elements.clearBtn && this.options.allowClear) {
+        this.elements.clearBtn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          this.elements.input.value = "";
+          this.state.currentTime = {
+            hours: 0,
+            minutes: 0,
+            seconds: 0,
+            period: "AM"
+          };
+          this.container.dataset.value = "";
+          this.state.internalValue = "";
+          this.elements.clearBtn.style.display = "none";
+          this.elements.input.dispatchEvent(
+            new Event("change", { bubbles: true })
+          );
+          if (typeof this.options.onChange === "function") {
+            this.options.onChange("");
+          }
+        });
+      }
       document.addEventListener("click", (e) => {
-        if (!datepicker.contains(e.target)) {
-          close();
-        }
+        if (!this.container.contains(e.target)) this.close();
+      });
+      document.addEventListener("closeTimePicker", (e) => {
+        if (e.detail && e.detail.exclude !== this.container) this.close();
       });
+    }
+    // --- Public API ---
+    getValue() {
+      return this.state.internalValue;
+    }
+  };
+  function initTimepicker(selectorOrElement, options = {}) {
+    const elements = typeof selectorOrElement === "string" ? document.querySelectorAll(selectorOrElement) : selectorOrElement ? typeof selectorOrElement.length !== "undefined" ? selectorOrElement : [selectorOrElement] : document.querySelectorAll(`.${PREFIX}-time-picker`);
+    const instances = [];
+    elements.forEach((container) => {
+      const instance = new TimePicker(container, options);
+      container.__timepickerAPI = instance;
+      instances.push(instance);
     });
+    if (instances.length === 0) return null;
+    return instances.length === 1 ? instances[0] : instances;
   }
 
   // src/js/components/stateless/modal.js
@@ -2274,216 +2839,6 @@ var InaUI = (() => {
     });
   }
 
-  // src/js/components/stateful/timepicker.js
-  function initTimepicker() {
-    document.querySelectorAll(`.${PREFIX}-time-picker`).forEach((picker) => {
-      if (picker.dataset.initialized === "true") return;
-      picker.dataset.initialized = "true";
-      const input = picker.querySelector(`.${PREFIX}-time-picker__input`);
-      const wrapper = picker.querySelector(`.${PREFIX}-time-picker__wrapper`);
-      if (!input || !wrapper) return;
-      const format = picker.dataset.format || "HH:mm";
-      const use12Hours = picker.dataset.use12Hours === "true" || picker.getAttribute("data-use-12-hours") === "true" || /a/i.test(format);
-      const showSecond = picker.dataset.showSecond === "true";
-      const disabled = picker.classList.contains(
-        `${PREFIX}-time-picker--disabled`
-      );
-      const allowClear = picker.dataset.allowClear !== "false";
-      let isOpen = false;
-      let internalValue = input.value || "";
-      let panel = picker.querySelector(`.${PREFIX}-time-picker__panel`);
-      if (!panel) {
-        panel = document.createElement("div");
-        panel.className = `${PREFIX}-time-picker__panel`;
-        panel.style.display = "none";
-        picker.appendChild(panel);
-      }
-      let content = panel.querySelector(`.${PREFIX}-time-picker__content`);
-      if (!content) {
-        content = document.createElement("div");
-        content.className = `${PREFIX}-time-picker__content`;
-        panel.appendChild(content);
-      } else {
-        content.innerHTML = "";
-      }
-      let actions = panel.querySelector(`.${PREFIX}-time-picker__actions`);
-      if (!actions) {
-        actions = document.createElement("div");
-        actions.className = `${PREFIX}-time-picker__actions`;
-        const confirmBtn = document.createElement("button");
-        confirmBtn.type = "button";
-        confirmBtn.className = `${PREFIX}-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 = `${PREFIX}-time-picker__column ${PREFIX}-time-picker__column--${type}`;
-        const colContent = document.createElement("div");
-        colContent.className = `${PREFIX}-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 = `${PREFIX}-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(`${PREFIX}-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(`.${PREFIX}-time-picker__option`).forEach(
-              (el) => el.classList.remove(`${PREFIX}-time-picker__option--selected`)
-            );
-            option.classList.add(`${PREFIX}-time-picker__option--selected`);
-          });
-          colContent.appendChild(option);
-        }
-        return column;
-      };
-      const renderPeriodColumn = () => {
-        const column = document.createElement("div");
-        column.className = `${PREFIX}-time-picker__column ${PREFIX}-time-picker__column--period`;
-        const colContent = document.createElement("div");
-        colContent.className = `${PREFIX}-time-picker__column-content`;
-        column.appendChild(colContent);
-        ["AM", "PM"].forEach((p) => {
-          const option = document.createElement("div");
-          option.className = `${PREFIX}-time-picker__option`;
-          option.textContent = p;
-          if (currentTime.period === p)
-            option.classList.add(`${PREFIX}-time-picker__option--selected`);
-          option.addEventListener("click", (e) => {
-            e.stopPropagation();
-            currentTime.period = p;
-            updateInput();
-            colContent.querySelectorAll(`.${PREFIX}-time-picker__option`).forEach(
-              (el) => el.classList.remove(`${PREFIX}-time-picker__option--selected`)
-            );
-            option.classList.add(`${PREFIX}-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(`${PREFIX}-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(`${PREFIX}-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(
-        `.${PREFIX}-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/components/stateful/chip.js
   var PREFIX4 = "ina";
   function initChip(rootSelector = `.${PREFIX4}-chip`) {
@@ -3783,6 +4138,7 @@ var InaUI = (() => {
       initButtonGroup();
       initCheckbox();
       initDatepicker();
+      initTimepicker();
       initDropdown();
       initFileUpload();
       initSingleFileUpload();
@@ -3794,7 +4150,6 @@ var InaUI = (() => {
       initRadioButton();
       initStepper();
       initTab();
-      initTimepicker();
       initToggle();
       initPagination();
       initSelectDropdown();