@idds/js 1.0.87 → 1.0.88

package/dist/index.js

@@ -348,58 +348,44 @@ function initAccordion(rootSelector = `.${PREFIX}-accordion-group`) {
   });
 }
 
-// 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",
@@ -413,436 +399,1012 @@ function initDatepicker() {
       "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);
+    }
+    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);
     }
-    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.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();
-      };
-      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);
-        }
-      }
-      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`);
-        }
-      }
-      document.addEventListener("click", (e) => {
-        if (!container.contains(e.target)) togglePicker(false);
-      });
-      return {
-        element: container,
-        setYear: (y) => {
-          currentYearVal = y;
-          updateText();
-        }
+        e.stopPropagation();
+        this.state.viewDate.setMonth(this.state.viewDate.getMonth() + 1);
+        this.renderPanel();
       };
+      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);
     }
-    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) => {
+    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;
+      }
+      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;
+      }
+      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;
-        }
-        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) => {
+    }
+    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 (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);
-      }
-      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;
-    }
-    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);
+        actions.appendChild(nowBtn);
       }
+      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);
     }
-    function open() {
-      isOpen = true;
-      panel.classList.add(`${PREFIX}-date-picker__panel--open`);
-      panel.style.display = "block";
-      render();
+    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";
     }
-    function close() {
-      isOpen = false;
-      panel.classList.remove(`${PREFIX}-date-picker__panel--open`);
-      panel.style.display = "none";
+    this.elements.input.dispatchEvent(new Event("change", { bubbles: true }));
+    if (typeof this.options.onChange === "function") {
+      this.options.onChange(val);
     }
-    function toggle() {
-      if (isOpen) close();
-      else open();
+  }
+  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);
+      }
+    } 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);
+      }
     }
-    trigger.addEventListener("click", (e) => {
-      toggle();
+    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);
     });
-    document.addEventListener("click", (e) => {
-      if (!datepicker.contains(e.target)) {
-        close();
+    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));
+    }
+    if (this.options.use12Hours) {
+      this.elements.content.appendChild(this.renderPeriodColumn());
+    }
+  }
+  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 (!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
@@ -2359,216 +2921,6 @@ function initImgCompare(rootSelector = `.${PREFIX}-img-compare`) {
   });
 }
 
-// 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 PREFIX5 = "ina";
 function initChip(rootSelector = `.${PREFIX5}-chip`) {
@@ -3678,6 +4030,7 @@ function initAll() {
   initButtonGroup();
   initCheckbox();
   initDatepicker();
+  initTimepicker();
   initDrawer();
   initBasicDropdown();
   initActionDropdown();
@@ -3693,7 +4046,6 @@ function initAll() {
   initRangeDatepicker();
   initTab();
   initToggle();
-  initTimepicker();
   initPagination();
   initChip();
   initTabVertical();
@@ -3701,8 +4053,10 @@ function initAll() {
   initTable();
 }
 export {
+  DatePicker,
   PREFIX,
   Table,
+  TimePicker,
   initAll,
   setBrandTheme,
   showToast