@idds/js 1.0.68 → 1.0.70

package/dist/index.iife.js

@@ -23,6 +23,7 @@ var InaUI = (() => {
     initAccordion: () => initAccordion,
     initButtonGroup: () => initButtonGroup,
     initCheckbox: () => initCheckbox,
+    initChip: () => initChip,
     initDatepicker: () => initDatepicker,
     initDropdown: () => initDropdown,
     initFileUpload: () => initFileUpload,
@@ -30,8 +31,12 @@ var InaUI = (() => {
     initFileUploadItem: () => initFileUploadItem,
     initImgCompare: () => initImgCompare,
     initModal: () => initModal,
+    initPagination: () => initPagination,
+    initRadioButton: () => initRadioButton,
     initRangeDatepicker: () => initRangeDatepicker,
+    initSelectDropdown: () => initSelectDropdown,
     initSingleFileUpload: () => initSingleFileUpload,
+    initStepper: () => initStepper,
     initTab: () => initTab,
     initTimepicker: () => initTimepicker,
     initToggle: () => initToggle,
@@ -829,6 +834,320 @@ var InaUI = (() => {
     });
   }
 
+  // src/js/components/stateful/select-dropdown.js
+  var PREFIX2 = "ina";
+  function getDropdownState(root) {
+    return {
+      isOpen: root.getAttribute("data-state") === "open",
+      values: JSON.parse(root.getAttribute("data-values") || "[]"),
+      isMultiple: root.getAttribute("data-multiple") === "true",
+      isSearchable: root.getAttribute("data-searchable") !== "false"
+    };
+  }
+  function setDropdownState(root, newState) {
+    if (newState.isOpen !== void 0) {
+      root.setAttribute("data-state", newState.isOpen ? "open" : "closed");
+      const trigger = root.querySelector(`.${PREFIX2}-select-dropdown__trigger`);
+      if (trigger) trigger.setAttribute("aria-expanded", newState.isOpen);
+      const panel = root.querySelector(`.${PREFIX2}-select-dropdown__panel`);
+      if (panel) {
+        if (newState.isOpen) {
+          panel.style.removeProperty("display");
+        } else {
+          panel.style.display = "none";
+        }
+      }
+    }
+    if (newState.values !== void 0) {
+      root.setAttribute("data-values", JSON.stringify(newState.values));
+      updateTriggerUI(root, newState.values, newState.isMultiple);
+    }
+  }
+  function closeAllSelectDropdowns(exceptRoot = null) {
+    document.querySelectorAll(`.${PREFIX2}-select-dropdown[data-state="open"]`).forEach((root) => {
+      if (root !== exceptRoot) {
+        setDropdownState(root, { isOpen: false });
+      }
+    });
+  }
+  function updateTriggerUI(root, values, isMultiple) {
+    const trigger = root.querySelector(`.${PREFIX2}-select-dropdown__trigger`);
+    const input = trigger.querySelector("input");
+    const textSpan = trigger.querySelector(
+      `.${PREFIX2}-select-dropdown__trigger-text`
+    );
+    const placeholder = input ? input.getAttribute("placeholder") : textSpan ? textSpan.getAttribute("data-placeholder") : "Select...";
+    const options = root.querySelectorAll(`.${PREFIX2}-select-dropdown__option`);
+    const getLabel = (val) => {
+      const opt = Array.from(options).find(
+        (o) => o.getAttribute("data-value") === val
+      );
+      return opt ? opt.textContent.trim() : val;
+    };
+    let label = "";
+    if (values.length === 0) {
+    } else if (isMultiple) {
+      label = values.length > 3 ? `${values.length} data terpilih` : values.map(getLabel).join(", ");
+    } else {
+      label = getLabel(values[0]);
+    }
+    if (input) {
+      input.value = !isMultiple && values.length > 0 && root.getAttribute("data-state") !== "open" ? label : "";
+      if (values.length > 0) {
+        input.placeholder = label;
+      } else {
+        input.placeholder = "Select...";
+      }
+    } else if (textSpan) {
+      textSpan.textContent = values.length > 0 ? label : placeholder;
+      textSpan.classList.toggle(
+        `${PREFIX2}-select-dropdown__trigger-text--placeholder`,
+        values.length === 0
+      );
+    }
+    options.forEach((opt) => {
+      const val = opt.getAttribute("data-value");
+      const isSelected = values.includes(val);
+      if (isMultiple) {
+        opt.classList.toggle(
+          `${PREFIX2}-select-dropdown__option--selected-multiple`,
+          isSelected
+        );
+        const cb = opt.querySelector(
+          `.${PREFIX2}-select-dropdown__option-checkbox`
+        );
+        if (cb)
+          cb.classList.toggle(
+            `${PREFIX2}-select-dropdown__option-checkbox--checked`,
+            isSelected
+          );
+      } else {
+        opt.classList.toggle(
+          `${PREFIX2}-select-dropdown__option--selected-single`,
+          isSelected
+        );
+      }
+    });
+  }
+  function initSelectDropdown() {
+    if (window.__inaSelectDropdownInitialized) return;
+    document.addEventListener("click", (e) => {
+      const target = e.target;
+      const trigger = target.closest(`.${PREFIX2}-select-dropdown__trigger`);
+      const option = target.closest(`.${PREFIX2}-select-dropdown__option`);
+      const root = target.closest(`.${PREFIX2}-select-dropdown`);
+      if (trigger) {
+        if (root) {
+          const state = getDropdownState(root);
+          if (target.tagName === "INPUT" && state.isOpen) {
+            return;
+          }
+          closeAllSelectDropdowns(root);
+          setDropdownState(root, { isOpen: !state.isOpen });
+          if (!state.isOpen) {
+            const input = trigger.querySelector("input");
+            if (input) input.focus();
+          }
+        }
+        return;
+      }
+      if (option && root) {
+        const state = getDropdownState(root);
+        const val = option.getAttribute("data-value");
+        let newValues = [...state.values];
+        if (state.isMultiple) {
+          if (newValues.includes(val)) {
+            newValues = newValues.filter((v) => v !== val);
+          } else {
+            newValues.push(val);
+          }
+          setDropdownState(root, { values: newValues });
+        } else {
+          newValues = [val];
+          setDropdownState(root, { values: newValues, isOpen: false });
+        }
+        root.dispatchEvent(
+          new CustomEvent("change", {
+            detail: {
+              value: state.isMultiple ? newValues : newValues[0]
+            }
+          })
+        );
+        e.stopPropagation();
+        return;
+      }
+      if (!root) {
+        closeAllSelectDropdowns();
+      }
+    });
+    document.addEventListener("input", (e) => {
+      if (e.target.matches(`.${PREFIX2}-select-dropdown__trigger-input`)) {
+        const root = e.target.closest(`.${PREFIX2}-select-dropdown`);
+        if (root) {
+          const term = e.target.value.toLowerCase();
+          const options = root.querySelectorAll(
+            `.${PREFIX2}-select-dropdown__option`
+          );
+          if (root.getAttribute("data-state") !== "open") {
+            setDropdownState(root, { isOpen: true });
+          }
+          options.forEach((opt) => {
+            const text = opt.textContent.trim().toLowerCase();
+            opt.style.display = text.includes(term) ? "" : "none";
+          });
+        }
+      }
+    });
+    window.__inaSelectDropdownInitialized = true;
+  }
+
+  // src/js/components/stateful/radio-button.js
+  function initRadioButton() {
+    const radioGroups = document.querySelectorAll(`.${PREFIX}-radio-input`);
+    radioGroups.forEach((group) => {
+      if (group.dataset.initialized === "true") return;
+      group.dataset.initialized = "true";
+      const inputs = group.querySelectorAll('input[type="radio"]');
+      const displayTargetId = group.dataset.displayTarget;
+      const displayTarget = displayTargetId ? document.getElementById(displayTargetId) : null;
+      const updateDisplay = () => {
+        if (!displayTarget) return;
+        const selected = Array.from(inputs).find((input) => input.checked);
+        const value = selected ? selected.value : "";
+        displayTarget.textContent = `Selected: ${value || "None"}`;
+      };
+      if (inputs.length > 0) {
+        inputs.forEach((input) => {
+          input.addEventListener("change", updateDisplay);
+        });
+        updateDisplay();
+      }
+    });
+  }
+
+  // src/js/components/stateful/stepper.js
+  function initStepper() {
+    const steppers = document.querySelectorAll(`.${PREFIX}-stepper`);
+    steppers.forEach((stepper) => {
+      if (stepper.dataset.initialized === "true") return;
+      stepper.dataset.initialized = "true";
+      const stepperId = stepper.id;
+      const items = stepper.querySelectorAll(`.${PREFIX}-stepper__item`);
+      const separators = stepper.querySelectorAll(
+        `.${PREFIX}-stepper__separator`
+      );
+      const totalSteps = items.length;
+      let currentStep = parseInt(stepper.dataset.currentStep || "0", 10);
+      const nextBtns = document.querySelectorAll(
+        `[data-stepper-next="${stepperId}"]`
+      );
+      const prevBtns = document.querySelectorAll(
+        `[data-stepper-prev="${stepperId}"]`
+      );
+      const displayTargetId = stepper.dataset.displayTarget;
+      const displayTarget = displayTargetId ? document.getElementById(displayTargetId) : null;
+      const checkIcon = `
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="${PREFIX}-stepper__check-icon"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        stroke-width="2.5"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+        <path d="M5 12l5 5l10 -10" />
+      </svg>
+    `;
+      const updateUI = () => {
+        stepper.dataset.currentStep = currentStep;
+        items.forEach((item, index) => {
+          const iconWrapper = item.querySelector(
+            `.${PREFIX}-stepper__icon-wrapper`
+          );
+          const itemNumber = index + 1;
+          item.classList.remove(
+            `${PREFIX}-stepper__item--completed`,
+            `${PREFIX}-stepper__item--active`
+          );
+          if (iconWrapper) iconWrapper.innerHTML = "";
+          if (index < currentStep) {
+            item.classList.add(`${PREFIX}-stepper__item--completed`);
+            if (iconWrapper) iconWrapper.innerHTML = checkIcon;
+          } else if (index === currentStep) {
+            item.classList.add(`${PREFIX}-stepper__item--active`);
+            if (iconWrapper)
+              iconWrapper.innerHTML = `<span class="${PREFIX}-stepper__step-number">${itemNumber}</span>`;
+          } else {
+            if (iconWrapper)
+              iconWrapper.innerHTML = `<span class="${PREFIX}-stepper__step-number">${itemNumber}</span>`;
+          }
+        });
+        separators.forEach((separator, index) => {
+          if (index < currentStep) {
+            separator.classList.add(`${PREFIX}-stepper__separator--completed`);
+          } else {
+            separator.classList.remove(`${PREFIX}-stepper__separator--completed`);
+          }
+        });
+        prevBtns.forEach((btn) => {
+          if (currentStep === 0) {
+            btn.setAttribute("disabled", "true");
+          } else {
+            btn.removeAttribute("disabled");
+          }
+        });
+        nextBtns.forEach((btn) => {
+          if (currentStep === totalSteps - 1) {
+            btn.setAttribute("disabled", "true");
+          } else {
+            btn.removeAttribute("disabled");
+          }
+        });
+        if (displayTarget) {
+          displayTarget.textContent = `Current Step: ${currentStep + 1}`;
+        }
+        stepper.dispatchEvent(
+          new CustomEvent("stepper:change", {
+            bubbles: true,
+            detail: { currentStep, totalSteps }
+          })
+        );
+      };
+      nextBtns.forEach((btn) => {
+        btn.addEventListener("click", () => {
+          if (currentStep < totalSteps - 1) {
+            currentStep++;
+            updateUI();
+          }
+        });
+      });
+      prevBtns.forEach((btn) => {
+        btn.addEventListener("click", () => {
+          if (currentStep > 0) {
+            currentStep--;
+            updateUI();
+          }
+        });
+      });
+      items.forEach((item, index) => {
+        if (item.classList.contains(`${PREFIX}-stepper__item--clickable`) || item.hasAttribute("data-clickable")) {
+          item.addEventListener("click", () => {
+            if (!item.classList.contains(`${PREFIX}-stepper__item--disabled`)) {
+              currentStep = index;
+              updateUI();
+            }
+          });
+        }
+      });
+      updateUI();
+    });
+  }
+
   // src/js/components/stateful/file-upload.js
   var ICONS = {
     upload: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"></path><polyline points="16 6 12 2 8 6"></polyline><line x1="12" y1="2" x2="12" y2="16"></line></svg>`,
@@ -1352,797 +1671,871 @@ var InaUI = (() => {
     });
   }
 
-  // src/js/components/stateless/img-compare.js
-  function initImgCompare(rootSelector = `.${PREFIX}-img-compare`) {
-    document.querySelectorAll(rootSelector).forEach((imgCompare) => {
-      const sliderEl = document.createElement("input");
-      sliderEl.type = "range";
-      sliderEl.min = "0";
-      sliderEl.max = "100";
-      sliderEl.value = "50";
-      sliderEl.setAttribute("aria-label", "Percentage of the image to show");
-      sliderEl.setAttribute("aria-valuenow", "50");
-      sliderEl.setAttribute("aria-valuemin", "0");
-      sliderEl.setAttribute("aria-valuemax", "100");
-      sliderEl.classList.add("ina-ss-img__slider");
-      sliderEl.addEventListener("input", () => {
-        imgCompare.style.setProperty(
-          `--${PREFIX}-position`,
-          `${sliderEl.value}%`
-        );
-      });
-      const sliderLineEl = document.createElement("div");
-      sliderLineEl.classList.add("ina-ss-img__slider-line");
-      const sliderButtonEl = document.createElement("button");
-      sliderButtonEl.classList.add("ina-ss-img__slider-button");
-      imgCompare.appendChild(sliderEl);
-      imgCompare.appendChild(sliderLineEl);
-      imgCompare.appendChild(sliderButtonEl);
-    });
-  }
-
-  // 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`
+  // src/js/components/stateful/range-datepicker.js
+  function initRangeDatepicker() {
+    document.querySelectorAll(".ina-ss-range-datepicker").forEach((rangeDatepicker) => {
+      let currentDate = /* @__PURE__ */ new Date();
+      let currentDateLeft = /* @__PURE__ */ new Date();
+      let currentDateRight = new Date(
+        currentDateLeft.getFullYear(),
+        currentDateLeft.getMonth() + 1,
+        currentDateLeft.getDate()
       );
-      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);
+      let selectedDateTarget = null;
+      let fromSelectedDate = null;
+      let toSelectedDate = null;
+      let selectedDate = null;
+      const MONTHS = [
+        "Januari",
+        "Februari",
+        "Maret",
+        "April",
+        "Mei",
+        "Juni",
+        "Juli",
+        "Agustus",
+        "September",
+        "Oktober",
+        "November",
+        "Desember"
+      ];
+      const DAYS = ["Min", "Sen", "Sel", "Rab", "Kam", "Jum", "Sab"];
+      const rangeDatepickerTrigger = rangeDatepicker.querySelector(
+        `.ina-ss-range-datepicker__trigger`
+      );
+      const rangeDatepickerPopover = rangeDatepicker.querySelector(
+        `.ina-ss-range-datepicker__popover`
+      );
+      const datePickerLeftDate = rangeDatepicker.querySelector(
+        `.ina-ss-range-datepicker__left-date`
+      );
+      const datePickerRightDate = rangeDatepicker.querySelector(
+        `.ina-ss-range-datepicker__right-date`
+      );
+      const datepickerMonthLeftTrigger = datePickerLeftDate.querySelector(
+        `.ina-ss-range-datepicker__month-trigger`
+      );
+      const datepickerMonthRightTrigger = datePickerRightDate.querySelector(
+        `.ina-ss-range-datepicker__month-trigger`
+      );
+      const datepickerLeftContent = datePickerLeftDate.querySelector(
+        `.ina-ss-range-datepicker__content`
+      );
+      const datepickerRightContent = datePickerRightDate.querySelector(
+        `.ina-ss-range-datepicker__content`
+      );
+      const prevMonthButtonLeft = datePickerLeftDate.querySelector(
+        `.ina-ss-range-datepicker__nav-prev`
+      );
+      const nextMonthButtonLeft = datePickerLeftDate.querySelector(
+        `.ina-ss-range-datepicker__nav-next`
+      );
+      const prevMonthButtonRight = datePickerRightDate.querySelector(
+        `.ina-ss-range-datepicker__nav-prev`
+      );
+      const nextMonthButtonRight = datePickerRightDate.querySelector(
+        `.ina-ss-range-datepicker__nav-next`
+      );
+      function renderCalendar(targetEl, year, month) {
+        const rangeDatepickerMonthTrigger = targetEl.querySelector(
+          `.ina-ss-range-datepicker__month-trigger`
+        );
+        const rangeDatepickerMonthPopover = targetEl.querySelector(
+          `.ina-ss-range-datepicker__month-popover`
+        );
+        const rangeDatepickerMonthItem = targetEl.querySelectorAll(
+          `.ina-ss-range-datepicker__month-item`
+        );
+        const rangeDatepickerYearTrigger = targetEl.querySelector(
+          `.ina-ss-range-datepicker__year-trigger`
+        );
+        const targetContentEl = targetEl.querySelector(
+          `.ina-ss-range-datepicker__content`
+        );
+        targetContentEl.innerHTML = "";
+        rangeDatepickerMonthTrigger.textContent = MONTHS[month].substring(0, 3);
+        rangeDatepickerYearTrigger.textContent = year;
+        DAYS.forEach((day) => {
+          const dayNameWrapper = document.createElement("div");
+          dayNameWrapper.className = `ina-ss-range-datepicker__dayname-wrapper`;
+          const dayNameEl = document.createElement("span");
+          dayNameEl.className = `ina-ss-range-datepicker__dayname`;
+          dayNameEl.textContent = day.substring(0, 3);
+          dayNameWrapper.appendChild(dayNameEl);
+          targetContentEl.appendChild(dayNameWrapper);
+        });
+        const firstDayOfMonth = new Date(year, month, 1).getDay();
+        const daysInMonth = new Date(year, month + 1, 0).getDate();
+        const daysInPrevMonth = new Date(year, month, 0).getDate();
+        for (let i = 0; i < firstDayOfMonth; i++) {
+          const dayEl = document.createElement("button");
+          dayEl.className = `ina-ss-range-datepicker__calendar-day outside-month`;
+          dayEl.textContent = daysInPrevMonth - firstDayOfMonth + 1 + i;
+          dayEl.disabled = true;
+          targetContentEl.appendChild(dayEl);
         }
-        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`)
+        const today = /* @__PURE__ */ new Date();
+        for (let i = 1; i <= daysInMonth; i++) {
+          const dayEl = document.createElement("button");
+          dayEl.className = `ina-ss-range-datepicker__calendar-day`;
+          dayEl.textContent = i;
+          dayEl.dataset.date = new Date(year, month, i).toISOString();
+          if (fromSelectedDate && new Date(year, month, i).getTime() === fromSelectedDate?.getTime()) {
+            dayEl.classList.add("selected-from");
+          }
+          if (toSelectedDate && new Date(year, month, i).getTime() === toSelectedDate?.getTime()) {
+            dayEl.classList.add("selected-to");
+          }
+          if (toSelectedDate && new Date(year, month, i) === toSelectedDate) {
+            dayEl.classList.add("selected-to");
+          }
+          if (fromSelectedDate && toSelectedDate && new Date(year, month, i) > fromSelectedDate && new Date(year, month, i) < toSelectedDate) {
+            dayEl.classList.add("selected-range");
+          }
+          if (year === today.getFullYear() && month === today.getMonth() && i === today.getDate()) {
+            const marker = document.createElement("span");
+            marker.className = `ina-ss-range-datepicker__today-marker`;
+            marker.textContent = "Hari ini";
+            dayEl.appendChild(marker);
+            dayEl.classList.add("today");
+          }
+          if (selectedDate && year === selectedDate.getFullYear() && month === selectedDate.getMonth() && i === selectedDate.getDate()) {
+            dayEl.classList.add("selected");
+          }
+          targetContentEl.appendChild(dayEl);
+        }
+        const totalCells = 42;
+        const cellsRendered = firstDayOfMonth + daysInMonth;
+        const remainingCells = totalCells - cellsRendered;
+        for (let i = 1; i <= remainingCells; i++) {
+          const dayEl = document.createElement("button");
+          dayEl.className = `ina-ss-range-datepicker__calendar-day outside-month`;
+          dayEl.textContent = i;
+          dayEl.disabled = true;
+          targetContentEl.appendChild(dayEl);
+        }
+      }
+      function handleChangeDate(target) {
+        if (fromSelectedDate && toSelectedDate) {
+          if (target.classList.contains(
+            `ina-ss-range-datepicker__calendar-day`
+          ) && !target.classList.contains("outside-month")) {
+            const targetDate = new Date(target.dataset.date);
+            if (target.classList.contains("selected-from") || target.classList.contains("selected-to")) {
+              const fromSelectedDateLeftEl = datepickerLeftContent.querySelector(
+                `.ina-ss-range-datepicker__calendar-day.selected-from`
+              );
+              const fromSelectedDateRightEl = datepickerRightContent.querySelector(
+                `.ina-ss-range-datepicker__calendar-day.selected-from`
+              );
+              fromSelectedDateLeftEl?.classList.remove("selected-from");
+              fromSelectedDateRightEl?.classList.remove("selected-from");
+              const toSelectedDateLeftEl = datepickerLeftContent.querySelector(
+                `.ina-ss-range-datepicker__calendar-day.selected-to`
+              );
+              const toSelectedDateRightEl = datepickerRightContent.querySelector(
+                `.ina-ss-range-datepicker__calendar-day.selected-to`
+              );
+              toSelectedDateLeftEl?.classList.remove("selected-to");
+              toSelectedDateRightEl?.classList.remove("selected-to");
+              target.classList.add("selected-from");
+              target.classList.add("selected-to");
+              fromSelectedDate = targetDate;
+              toSelectedDate = targetDate;
+            }
+            if (targetDate < fromSelectedDate) {
+              const fromSelectedDateLeftEl = datepickerLeftContent.querySelector(
+                `.ina-ss-range-datepicker__calendar-day.selected-from`
+              );
+              const fromSelectedDateRightEl = datepickerRightContent.querySelector(
+                `.ina-ss-range-datepicker__calendar-day.selected-from`
+              );
+              fromSelectedDateLeftEl?.classList.remove("selected-from");
+              fromSelectedDateRightEl?.classList.remove("selected-from");
+              fromSelectedDate = targetDate;
+              target.classList.add("selected-from");
+            }
+            if (targetDate > toSelectedDate || targetDate > fromSelectedDate) {
+              const toSelectedDateLeftEl = datepickerLeftContent.querySelector(
+                `.ina-ss-range-datepicker__calendar-day.selected-to`
+              );
+              const toSelectedDateRightEl = datepickerRightContent.querySelector(
+                `.ina-ss-range-datepicker__calendar-day.selected-to`
+              );
+              toSelectedDateLeftEl?.classList.remove("selected-to");
+              toSelectedDateRightEl?.classList.remove("selected-to");
+              toSelectedDate = targetDate;
+              target.classList.add("selected-to");
+            }
+            const leftDays = datepickerLeftContent.querySelectorAll(
+              ".ina-ss-range-datepicker__calendar-day"
             );
-            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
+            const rightDays = datepickerRightContent.querySelectorAll(
+              ".ina-ss-range-datepicker__calendar-day"
+            );
+            const leftDaysArray = Array.from(leftDays);
+            const rightDaysArray = Array.from(rightDays);
+            const leftFromIndex = leftDaysArray.findIndex(
+              (btn) => btn.classList.contains("selected-from")
+            );
+            const rightFromIndex = rightDaysArray.findIndex(
+              (btn) => btn.classList.contains("selected-from")
+            );
+            const leftToIndex = leftDaysArray.findIndex(
+              (btn) => btn.classList.contains("selected-to")
+            );
+            const rightToIndex = rightDaysArray.findIndex(
+              (btn) => btn.classList.contains("selected-to")
+            );
+            leftDaysArray.forEach(
+              (btn) => btn.classList.remove("selected-range")
+            );
+            rightDaysArray.forEach(
+              (btn) => btn.classList.remove("selected-range")
+            );
+            if (leftFromIndex !== -1 && leftToIndex !== -1 && rightFromIndex === -1 && rightToIndex === -1) {
+              for (let i = leftFromIndex + 1; i <= leftToIndex - 1; i++) {
+                leftDaysArray[i].classList.add("selected-range");
+              }
+            }
+            if (leftFromIndex !== -1 && rightToIndex !== -1) {
+              for (let i = leftFromIndex + 1; i < leftDaysArray.length; i++) {
+                leftDaysArray[i].classList.add("selected-range");
+              }
+              for (let i = 0; i < rightToIndex; i++) {
+                rightDaysArray[i].classList.add("selected-range");
+              }
+            }
+            if (leftFromIndex === -1 && leftToIndex === -1 && rightFromIndex !== -1 && rightToIndex !== -1) {
+              for (let i = rightFromIndex + 1; i <= rightToIndex - 1; i++) {
+                rightDaysArray[i].classList.add("selected-range");
+              }
+            }
+          }
+        } else {
+          if (target.classList.contains(
+            `ina-ss-range-datepicker__calendar-day`
+          ) && !target.classList.contains("outside-month")) {
+            if (target.classList.contains("selected-from") && target.classList.contains("selected-to")) {
+              target.classList.remove("selected-from");
+              target.classList.remove("selected-to");
+              selectedDateTarget = null;
+            } else {
+              target.classList.add("selected-from");
+              target.classList.add("selected-to");
+              selectedDateTarget = target;
+            }
+            fromSelectedDate = selectedDateTarget ? new Date(selectedDateTarget.dataset.date) : null;
+            toSelectedDate = selectedDateTarget ? new Date(selectedDateTarget.dataset.date) : null;
+          }
+        }
+        rangeDatepicker.dispatchEvent(
+          new CustomEvent("date:changed", {
+            detail: {
+              selectedDate: {
+                from: fromSelectedDate,
+                to: toSelectedDate
+              }
+            }
+          })
         );
-        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 } })
+      }
+      datepickerLeftContent.addEventListener("click", (e) => {
+        const target = e.target;
+        if (!target) return;
+        handleChangeDate(target);
+      });
+      datepickerRightContent.addEventListener("click", (e) => {
+        const target = e.target;
+        if (!target) return;
+        handleChangeDate(target);
+      });
+      function togglePopover() {
+        if (rangeDatepickerPopover.style.display === "none" || rangeDatepickerPopover.style.display === "") {
+          rangeDatepickerPopover.style.display = "flex";
+          renderCalendar(
+            datePickerLeftDate,
+            currentDateLeft.getFullYear(),
+            currentDateLeft.getMonth()
+          );
+          renderCalendar(
+            datePickerRightDate,
+            currentDateRight.getFullYear(),
+            currentDateRight.getMonth()
+          );
+        } else {
+          rangeDatepickerPopover.style.display = "none";
+        }
+      }
+      function getMonthDifference(d1, d2) {
+        let months;
+        months = (d2.getFullYear() - d1.getFullYear()) * 12;
+        months -= d1.getMonth();
+        months += d2.getMonth();
+        return months;
+      }
+      rangeDatepickerTrigger.addEventListener("click", (e) => {
+        e.stopPropagation();
+        togglePopover();
+      });
+      prevMonthButtonLeft.addEventListener("click", () => {
+        currentDateLeft.setMonth(currentDateLeft.getMonth() - 1);
+        renderCalendar(
+          datePickerLeftDate,
+          currentDateLeft.getFullYear(),
+          currentDateLeft.getMonth()
+        );
+      });
+      nextMonthButtonLeft.addEventListener("click", () => {
+        const monthDiff = getMonthDifference(currentDateLeft, currentDateRight);
+        currentDateLeft.setMonth(currentDateLeft.getMonth() + 1);
+        renderCalendar(
+          datePickerLeftDate,
+          currentDateLeft.getFullYear(),
+          currentDateLeft.getMonth()
+        );
+        if (monthDiff === 1) {
+          currentDateRight.setMonth(currentDateRight.getMonth() + 1);
+          renderCalendar(
+            datePickerRightDate,
+            currentDateRight.getFullYear(),
+            currentDateRight.getMonth()
+          );
+        }
+      });
+      prevMonthButtonRight.addEventListener("click", () => {
+        const monthDiff = getMonthDifference(currentDateLeft, currentDateRight);
+        currentDateRight.setMonth(currentDateRight.getMonth() - 1);
+        renderCalendar(
+          datePickerRightDate,
+          currentDateRight.getFullYear(),
+          currentDateRight.getMonth()
+        );
+        if (monthDiff === 1) {
+          currentDateLeft.setMonth(currentDateRight.getMonth() - 1);
+          renderCalendar(
+            datePickerLeftDate,
+            currentDateLeft.getFullYear(),
+            currentDateLeft.getMonth()
+          );
+        }
+      });
+      nextMonthButtonRight.addEventListener("click", () => {
+        currentDateRight.setMonth(currentDateRight.getMonth() + 1);
+        renderCalendar(
+          datePickerRightDate,
+          currentDateRight.getFullYear(),
+          currentDateRight.getMonth()
         );
-      };
-      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();
+        if (!rangeDatepickerPopover.contains(e.target) && e.target !== rangeDatepickerTrigger && !rangeDatepickerTrigger.contains(e.target)) {
+          rangeDatepickerPopover.style.display = "none";
+        }
       });
-      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/index.js
-  var PREFIX = "ina";
-
-  // src/js/components/stateful/button-group.js
-  function initButtonGroup(rootSelector = `.${PREFIX}-button-group`) {
-    const buttonGroups = document.querySelectorAll(rootSelector);
-    buttonGroups.forEach((buttonGroup) => {
-      if (buttonGroup.__inaButtonGroupInitialized) return;
-      const buttons = buttonGroup.querySelectorAll(
-        `.${PREFIX}-button-group__button`
-      );
-      const updateState = (clickedButton) => {
-        const isDisabled = clickedButton.hasAttribute("disabled") || clickedButton.classList.contains(
-          `${PREFIX}-button-group__button--disabled`
-        );
-        if (isDisabled) return;
-        const value = clickedButton.getAttribute("data-value");
-        buttons.forEach((btn) => {
-          if (btn === clickedButton) {
-            btn.classList.add(`${PREFIX}-button-group__button--selected`);
-            btn.setAttribute("aria-pressed", "true");
-          } else {
-            btn.classList.remove(`${PREFIX}-button-group__button--selected`);
-            btn.setAttribute("aria-pressed", "false");
-          }
-        });
-        buttonGroup.dispatchEvent(
-          new CustomEvent("button-group:change", {
-            detail: { value },
-            bubbles: true,
-            composed: true
-          })
+  // src/js/components/stateless/img-compare.js
+  function initImgCompare(rootSelector = `.${PREFIX}-img-compare`) {
+    document.querySelectorAll(rootSelector).forEach((imgCompare) => {
+      const sliderEl = document.createElement("input");
+      sliderEl.type = "range";
+      sliderEl.min = "0";
+      sliderEl.max = "100";
+      sliderEl.value = "50";
+      sliderEl.setAttribute("aria-label", "Percentage of the image to show");
+      sliderEl.setAttribute("aria-valuenow", "50");
+      sliderEl.setAttribute("aria-valuemin", "0");
+      sliderEl.setAttribute("aria-valuemax", "100");
+      sliderEl.classList.add("ina-ss-img__slider");
+      sliderEl.addEventListener("input", () => {
+        imgCompare.style.setProperty(
+          `--${PREFIX}-position`,
+          `${sliderEl.value}%`
         );
-      };
-      buttons.forEach((button) => {
-        button.addEventListener("click", (e) => {
-          if (button.type !== "submit") {
-            e.preventDefault();
-          }
-          updateState(button);
-        });
       });
-      buttonGroup.__inaButtonGroupInitialized = true;
+      const sliderLineEl = document.createElement("div");
+      sliderLineEl.classList.add("ina-ss-img__slider-line");
+      const sliderButtonEl = document.createElement("button");
+      sliderButtonEl.classList.add("ina-ss-img__slider-button");
+      imgCompare.appendChild(sliderEl);
+      imgCompare.appendChild(sliderLineEl);
+      imgCompare.appendChild(sliderButtonEl);
     });
   }
 
-  // src/js/components/stateful/dropdown.js
-  function initDropdown(rootSelector = `.${PREFIX}-dropdown`) {
-    document.querySelectorAll(rootSelector).forEach((dropdown) => {
-      const trigger = dropdown.querySelector(`.${PREFIX}-dropdown__trigger`);
-      const input = dropdown.querySelector(`.${PREFIX}-dropdown__input`);
-      const menu = dropdown.querySelector(`.${PREFIX}-dropdown__menu`);
-      const menuItems = menu.querySelectorAll("li[role='option']");
-      const menuId = menu.id;
-      let activeIndex = -1;
-      menuItems.forEach((item, index) => {
-        item.id = `${menuId}-item-${index}`;
-      });
-      const toggleMenu = (show) => {
-        const isCurrentlyShown = dropdown.classList.contains("show");
-        const isShown = show !== void 0 ? show : !isCurrentlyShown;
-        if (isShown === isCurrentlyShown) {
-          return;
+  // 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);
         }
-        dropdown.classList.toggle("show", isShown);
-        trigger.setAttribute("aria-expanded", isShown);
-        if (isShown) {
-          input.focus();
+        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 {
-          input.blur();
-          removeHighlight();
-          activeIndex = -1;
-          input.removeAttribute("aria-activedescendant");
+          const main = `${pad(h)}:${pad(m)}`;
+          const sec = showSecond ? `:${pad(s)}` : "";
+          return `${main}${sec}`;
         }
       };
-      const filterItems = () => {
-        const filterValue = input.value.toLowerCase();
-        let hasVisibleItems = false;
-        activeIndex = -1;
-        removeHighlight();
-        input.removeAttribute("aria-activedescendant");
-        const activeItem = menu.querySelector("li[role='option'].selected");
-        if (activeItem && input.value !== activeItem.textContent.trim()) {
-          activeItem.classList.remove("selected");
-        }
-        menuItems.forEach((item) => {
-          const itemText = item.textContent.toLowerCase();
-          const isMatch = itemText.includes(filterValue);
-          item.classList.toggle("hidden", !isMatch);
-          if (isMatch) hasVisibleItems = true;
-        });
-        if (!dropdown.classList.contains("show") && hasVisibleItems) {
-          toggleMenu(true);
+      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 selectItem = (item) => {
-        const itemText = item.textContent.trim();
-        input.value = itemText;
-        menuItems.forEach((li) => {
-          li.classList.remove("selected");
+      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);
         });
-        if (item) {
-          item.classList.add("selected");
-          dropdown.dispatchEvent(
-            new CustomEvent("dropdown:changed", {
-              detail: { value: itemText }
-            })
-          );
-        }
-        toggleMenu(false);
+        return column;
       };
-      const setHighlight = (index) => {
-        removeHighlight();
-        const visibleItems = menu.querySelectorAll(
-          "li[role='option']:not(.hidden)"
+      const updateInput = () => {
+        const val = formatTime(
+          currentTime.hours,
+          currentTime.minutes,
+          currentTime.seconds,
+          currentTime.period
         );
-        if (visibleItems.length === 0) return;
-        if (index < 0) index = 0;
-        else if (index >= visibleItems.length) index = visibleItems.length - 1;
-        const itemToHighlight = visibleItems[index];
-        if (itemToHighlight) {
-          itemToHighlight.classList.add("highlighted");
-          input.setAttribute("aria-activedescendant", itemToHighlight.id);
-          itemToHighlight.scrollIntoView({
-            behavior: "smooth",
-            block: "nearest"
-          });
-          activeIndex = index;
-        }
+        input.value = val;
+        picker.dataset.value = val;
+        input.dispatchEvent(new Event("change", { bubbles: true }));
       };
-      const removeHighlight = () => {
-        menuItems.forEach((item) => item.classList.remove("highlighted"));
+      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());
       };
-      trigger.addEventListener("click", () => {
-        toggleMenu();
-      });
-      input.addEventListener("input", filterItems);
-      menu.addEventListener("click", (e) => {
-        const option = e.target.closest("li[role='option']");
-        if (option) {
-          e.preventDefault();
-          selectItem(option);
-        }
+      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 (!dropdown.contains(e.target)) {
-          toggleMenu(false);
-        }
+        if (!picker.contains(e.target)) close();
       });
-      input.addEventListener("keydown", (e) => {
-        const { key } = e;
-        const isMenuOpen = dropdown.classList.contains("show");
-        switch (key) {
-          case "ArrowDown":
-            e.preventDefault();
-            if (!isMenuOpen) {
-              toggleMenu(true);
-            }
-            setHighlight(activeIndex + 1);
-            break;
-          case "ArrowUp":
-            e.preventDefault();
-            if (isMenuOpen) {
-              setHighlight(activeIndex - 1);
-            }
-            break;
-          case "Enter":
-            e.preventDefault();
-            const firstVisible = menu.querySelector(
-              "li[role='option']:not(.hidden)"
-            );
-            const activeItem = menu.querySelector(".highlighted");
-            if (isMenuOpen && activeItem) {
-              selectItem(activeItem);
-            } else if (isMenuOpen && firstVisible) {
-              toggleMenu(false);
-            }
-            break;
-          case "Escape":
-            e.preventDefault();
-            toggleMenu(false);
-            break;
-          case "Tab":
-            toggleMenu(false);
-            break;
-        }
+      document.addEventListener("closeTimePicker", (e) => {
+        if (e.detail && e.detail.exclude !== picker) close();
       });
-    });
-  }
-
-  // src/js/components/stateful/range-datepicker.js
-  function initRangeDatepicker() {
-    document.querySelectorAll(".ina-ss-range-datepicker").forEach((rangeDatepicker) => {
-      let currentDate = /* @__PURE__ */ new Date();
-      let currentDateLeft = /* @__PURE__ */ new Date();
-      let currentDateRight = new Date(
-        currentDateLeft.getFullYear(),
-        currentDateLeft.getMonth() + 1,
-        currentDateLeft.getDate()
-      );
-      let selectedDateTarget = null;
-      let fromSelectedDate = null;
-      let toSelectedDate = null;
-      let selectedDate = null;
-      const MONTHS = [
-        "Januari",
-        "Februari",
-        "Maret",
-        "April",
-        "Mei",
-        "Juni",
-        "Juli",
-        "Agustus",
-        "September",
-        "Oktober",
-        "November",
-        "Desember"
-      ];
-      const DAYS = ["Min", "Sen", "Sel", "Rab", "Kam", "Jum", "Sab"];
-      const rangeDatepickerTrigger = rangeDatepicker.querySelector(
-        `.ina-ss-range-datepicker__trigger`
-      );
-      const rangeDatepickerPopover = rangeDatepicker.querySelector(
-        `.ina-ss-range-datepicker__popover`
-      );
-      const datePickerLeftDate = rangeDatepicker.querySelector(
-        `.ina-ss-range-datepicker__left-date`
-      );
-      const datePickerRightDate = rangeDatepicker.querySelector(
-        `.ina-ss-range-datepicker__right-date`
-      );
-      const datepickerMonthLeftTrigger = datePickerLeftDate.querySelector(
-        `.ina-ss-range-datepicker__month-trigger`
-      );
-      const datepickerMonthRightTrigger = datePickerRightDate.querySelector(
-        `.ina-ss-range-datepicker__month-trigger`
-      );
-      const datepickerLeftContent = datePickerLeftDate.querySelector(
-        `.ina-ss-range-datepicker__content`
-      );
-      const datepickerRightContent = datePickerRightDate.querySelector(
-        `.ina-ss-range-datepicker__content`
-      );
-      const prevMonthButtonLeft = datePickerLeftDate.querySelector(
-        `.ina-ss-range-datepicker__nav-prev`
-      );
-      const nextMonthButtonLeft = datePickerLeftDate.querySelector(
-        `.ina-ss-range-datepicker__nav-next`
-      );
-      const prevMonthButtonRight = datePickerRightDate.querySelector(
-        `.ina-ss-range-datepicker__nav-prev`
-      );
-      const nextMonthButtonRight = datePickerRightDate.querySelector(
-        `.ina-ss-range-datepicker__nav-next`
+      const clearBtn = picker.querySelector(
+        `.${PREFIX}-time-picker__clear-button`
       );
-      function renderCalendar(targetEl, year, month) {
-        const rangeDatepickerMonthTrigger = targetEl.querySelector(
-          `.ina-ss-range-datepicker__month-trigger`
-        );
-        const rangeDatepickerMonthPopover = targetEl.querySelector(
-          `.ina-ss-range-datepicker__month-popover`
-        );
-        const rangeDatepickerMonthItem = targetEl.querySelectorAll(
-          `.ina-ss-range-datepicker__month-item`
-        );
-        const rangeDatepickerYearTrigger = targetEl.querySelector(
-          `.ina-ss-range-datepicker__year-trigger`
-        );
-        const targetContentEl = targetEl.querySelector(
-          `.ina-ss-range-datepicker__content`
-        );
-        targetContentEl.innerHTML = "";
-        rangeDatepickerMonthTrigger.textContent = MONTHS[month].substring(0, 3);
-        rangeDatepickerYearTrigger.textContent = year;
-        DAYS.forEach((day) => {
-          const dayNameWrapper = document.createElement("div");
-          dayNameWrapper.className = `ina-ss-range-datepicker__dayname-wrapper`;
-          const dayNameEl = document.createElement("span");
-          dayNameEl.className = `ina-ss-range-datepicker__dayname`;
-          dayNameEl.textContent = day.substring(0, 3);
-          dayNameWrapper.appendChild(dayNameEl);
-          targetContentEl.appendChild(dayNameWrapper);
+      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 }));
         });
-        const firstDayOfMonth = new Date(year, month, 1).getDay();
-        const daysInMonth = new Date(year, month + 1, 0).getDate();
-        const daysInPrevMonth = new Date(year, month, 0).getDate();
-        for (let i = 0; i < firstDayOfMonth; i++) {
-          const dayEl = document.createElement("button");
-          dayEl.className = `ina-ss-range-datepicker__calendar-day outside-month`;
-          dayEl.textContent = daysInPrevMonth - firstDayOfMonth + 1 + i;
-          dayEl.disabled = true;
-          targetContentEl.appendChild(dayEl);
-        }
-        const today = /* @__PURE__ */ new Date();
-        for (let i = 1; i <= daysInMonth; i++) {
-          const dayEl = document.createElement("button");
-          dayEl.className = `ina-ss-range-datepicker__calendar-day`;
-          dayEl.textContent = i;
-          dayEl.dataset.date = new Date(year, month, i).toISOString();
-          if (fromSelectedDate && new Date(year, month, i).getTime() === fromSelectedDate?.getTime()) {
-            dayEl.classList.add("selected-from");
-          }
-          if (toSelectedDate && new Date(year, month, i).getTime() === toSelectedDate?.getTime()) {
-            dayEl.classList.add("selected-to");
-          }
-          if (toSelectedDate && new Date(year, month, i) === toSelectedDate) {
-            dayEl.classList.add("selected-to");
-          }
-          if (fromSelectedDate && toSelectedDate && new Date(year, month, i) > fromSelectedDate && new Date(year, month, i) < toSelectedDate) {
-            dayEl.classList.add("selected-range");
-          }
-          if (year === today.getFullYear() && month === today.getMonth() && i === today.getDate()) {
-            const marker = document.createElement("span");
-            marker.className = `ina-ss-range-datepicker__today-marker`;
-            marker.textContent = "Hari ini";
-            dayEl.appendChild(marker);
-            dayEl.classList.add("today");
-          }
-          if (selectedDate && year === selectedDate.getFullYear() && month === selectedDate.getMonth() && i === selectedDate.getDate()) {
-            dayEl.classList.add("selected");
-          }
-          targetContentEl.appendChild(dayEl);
-        }
-        const totalCells = 42;
-        const cellsRendered = firstDayOfMonth + daysInMonth;
-        const remainingCells = totalCells - cellsRendered;
-        for (let i = 1; i <= remainingCells; i++) {
-          const dayEl = document.createElement("button");
-          dayEl.className = `ina-ss-range-datepicker__calendar-day outside-month`;
-          dayEl.textContent = i;
-          dayEl.disabled = true;
-          targetContentEl.appendChild(dayEl);
-        }
       }
-      function handleChangeDate(target) {
-        if (fromSelectedDate && toSelectedDate) {
-          if (target.classList.contains(
-            `ina-ss-range-datepicker__calendar-day`
-          ) && !target.classList.contains("outside-month")) {
-            const targetDate = new Date(target.dataset.date);
-            if (target.classList.contains("selected-from") || target.classList.contains("selected-to")) {
-              const fromSelectedDateLeftEl = datepickerLeftContent.querySelector(
-                `.ina-ss-range-datepicker__calendar-day.selected-from`
-              );
-              const fromSelectedDateRightEl = datepickerRightContent.querySelector(
-                `.ina-ss-range-datepicker__calendar-day.selected-from`
-              );
-              fromSelectedDateLeftEl?.classList.remove("selected-from");
-              fromSelectedDateRightEl?.classList.remove("selected-from");
-              const toSelectedDateLeftEl = datepickerLeftContent.querySelector(
-                `.ina-ss-range-datepicker__calendar-day.selected-to`
-              );
-              const toSelectedDateRightEl = datepickerRightContent.querySelector(
-                `.ina-ss-range-datepicker__calendar-day.selected-to`
-              );
-              toSelectedDateLeftEl?.classList.remove("selected-to");
-              toSelectedDateRightEl?.classList.remove("selected-to");
-              target.classList.add("selected-from");
-              target.classList.add("selected-to");
-              fromSelectedDate = targetDate;
-              toSelectedDate = targetDate;
-            }
-            if (targetDate < fromSelectedDate) {
-              const fromSelectedDateLeftEl = datepickerLeftContent.querySelector(
-                `.ina-ss-range-datepicker__calendar-day.selected-from`
-              );
-              const fromSelectedDateRightEl = datepickerRightContent.querySelector(
-                `.ina-ss-range-datepicker__calendar-day.selected-from`
-              );
-              fromSelectedDateLeftEl?.classList.remove("selected-from");
-              fromSelectedDateRightEl?.classList.remove("selected-from");
-              fromSelectedDate = targetDate;
-              target.classList.add("selected-from");
+    });
+  }
+
+  // src/js/components/stateful/chip.js
+  var PREFIX3 = "ina";
+  function initChip(rootSelector = `.${PREFIX3}-chip`) {
+    const chips = document.querySelectorAll(rootSelector);
+    chips.forEach((container) => {
+      if (container.__inaChipInitialized) return;
+      const showCustomization = container.getAttribute("data-show-customization") === "true";
+      const customizationLabel = container.getAttribute("data-customization-label") || "Kustomisasi";
+      let selectedValue = container.getAttribute("data-selected") || "";
+      const list = container.querySelector(`.${PREFIX3}-chip__list`);
+      const items = list ? list.querySelectorAll(`.${PREFIX3}-chip__item`) : [];
+      let customFieldContainer = container.querySelector(
+        `.${PREFIX3}-chip__custom-field`
+      );
+      const updateUI = () => {
+        items.forEach((item) => {
+          const itemValue = item.getAttribute("data-value");
+          const isSelected = itemValue === selectedValue;
+          if (isSelected) {
+            item.classList.add(`${PREFIX3}-chip__item--selected`);
+          } else {
+            item.classList.remove(`${PREFIX3}-chip__item--selected`);
+          }
+        });
+        if (showCustomization) {
+          const isCustomToggleSelected = selectedValue === customizationLabel;
+          let isStandard = false;
+          items.forEach((item) => {
+            if (item.getAttribute("data-value") === selectedValue && item.textContent.trim() !== customizationLabel) {
+              isStandard = true;
             }
-            if (targetDate > toSelectedDate || targetDate > fromSelectedDate) {
-              const toSelectedDateLeftEl = datepickerLeftContent.querySelector(
-                `.ina-ss-range-datepicker__calendar-day.selected-to`
-              );
-              const toSelectedDateRightEl = datepickerRightContent.querySelector(
-                `.ina-ss-range-datepicker__calendar-day.selected-to`
-              );
-              toSelectedDateLeftEl?.classList.remove("selected-to");
-              toSelectedDateRightEl?.classList.remove("selected-to");
-              toSelectedDate = targetDate;
-              target.classList.add("selected-to");
+          });
+          const toggleBtn = Array.from(items).find(
+            (i) => i.textContent.trim() === customizationLabel
+          );
+          const showInput = toggleBtn && selectedValue === toggleBtn.getAttribute("data-value") || !isStandard && selectedValue !== "";
+          if (showInput) {
+            if (!customFieldContainer) {
+              customFieldContainer = document.createElement("div");
+              customFieldContainer.className = `${PREFIX3}-chip__custom-field`;
+              container.appendChild(customFieldContainer);
             }
-            const leftDays = datepickerLeftContent.querySelectorAll(
-              ".ina-ss-range-datepicker__calendar-day"
-            );
-            const rightDays = datepickerRightContent.querySelectorAll(
-              ".ina-ss-range-datepicker__calendar-day"
-            );
-            const leftDaysArray = Array.from(leftDays);
-            const rightDaysArray = Array.from(rightDays);
-            const leftFromIndex = leftDaysArray.findIndex(
-              (btn) => btn.classList.contains("selected-from")
-            );
-            const rightFromIndex = rightDaysArray.findIndex(
-              (btn) => btn.classList.contains("selected-from")
-            );
-            const leftToIndex = leftDaysArray.findIndex(
-              (btn) => btn.classList.contains("selected-to")
-            );
-            const rightToIndex = rightDaysArray.findIndex(
-              (btn) => btn.classList.contains("selected-to")
+            let input = customFieldContainer.querySelector(
+              `.${PREFIX3}-chip__input`
             );
-            leftDaysArray.forEach(
-              (btn) => btn.classList.remove("selected-range")
-            );
-            rightDaysArray.forEach(
-              (btn) => btn.classList.remove("selected-range")
-            );
-            if (leftFromIndex !== -1 && leftToIndex !== -1 && rightFromIndex === -1 && rightToIndex === -1) {
-              for (let i = leftFromIndex + 1; i <= leftToIndex - 1; i++) {
-                leftDaysArray[i].classList.add("selected-range");
-              }
-            }
-            if (leftFromIndex !== -1 && rightToIndex !== -1) {
-              for (let i = leftFromIndex + 1; i < leftDaysArray.length; i++) {
-                leftDaysArray[i].classList.add("selected-range");
-              }
-              for (let i = 0; i < rightToIndex; i++) {
-                rightDaysArray[i].classList.add("selected-range");
-              }
-            }
-            if (leftFromIndex === -1 && leftToIndex === -1 && rightFromIndex !== -1 && rightToIndex !== -1) {
-              for (let i = rightFromIndex + 1; i <= rightToIndex - 1; i++) {
-                rightDaysArray[i].classList.add("selected-range");
+            if (!input) {
+              customFieldContainer.innerHTML = `
+               <div class="${PREFIX3}-text-field ${PREFIX3}-text-field--size-medium ${PREFIX3}-text-field--variant-outline ${PREFIX3}-chip__input">
+                 <div class="${PREFIX3}-text-field__wrapper">
+                   <input type="text" class="${PREFIX3}-text-field__input" placeholder="Masukkan data yang Anda inginkan" value="${!isStandard ? selectedValue : ""}" />
+                 </div>
+               </div>
+             `;
+              input = customFieldContainer.querySelector("input");
+              input.addEventListener("blur", (e) => {
+                const val = e.target.value;
+                if (val.trim()) {
+                  handleSelect(val);
+                } else {
+                  handleSelect("");
+                }
+              });
+              input.addEventListener("keydown", (e) => {
+                if (e.key === "Enter") {
+                  handleSelect(e.target.value);
+                  e.target.blur();
+                }
+              });
+            } else {
+              const inputEl = customFieldContainer.querySelector("input");
+              if (inputEl && document.activeElement !== inputEl) {
+                inputEl.value = !isStandard ? selectedValue : "";
               }
             }
-          }
-        } else {
-          if (target.classList.contains(
-            `ina-ss-range-datepicker__calendar-day`
-          ) && !target.classList.contains("outside-month")) {
-            if (target.classList.contains("selected-from") && target.classList.contains("selected-to")) {
-              target.classList.remove("selected-from");
-              target.classList.remove("selected-to");
-              selectedDateTarget = null;
-            } else {
-              target.classList.add("selected-from");
-              target.classList.add("selected-to");
-              selectedDateTarget = target;
+            customFieldContainer.style.display = "block";
+          } else {
+            if (customFieldContainer) {
+              customFieldContainer.style.display = "none";
             }
-            fromSelectedDate = selectedDateTarget ? new Date(selectedDateTarget.dataset.date) : null;
-            toSelectedDate = selectedDateTarget ? new Date(selectedDateTarget.dataset.date) : null;
           }
         }
-        rangeDatepicker.dispatchEvent(
-          new CustomEvent("date:changed", {
-            detail: {
-              selectedDate: {
-                from: fromSelectedDate,
-                to: toSelectedDate
-              }
-            }
+      };
+      const handleSelect = (val) => {
+        selectedValue = val;
+        container.setAttribute("data-selected", val);
+        updateUI();
+        container.dispatchEvent(
+          new CustomEvent("chip:select", {
+            detail: { value: val },
+            bubbles: true
           })
         );
-      }
-      datepickerLeftContent.addEventListener("click", (e) => {
-        const target = e.target;
-        if (!target) return;
-        handleChangeDate(target);
-      });
-      datepickerRightContent.addEventListener("click", (e) => {
-        const target = e.target;
-        if (!target) return;
-        handleChangeDate(target);
-      });
-      function togglePopover() {
-        if (rangeDatepickerPopover.style.display === "none" || rangeDatepickerPopover.style.display === "") {
-          rangeDatepickerPopover.style.display = "flex";
-          renderCalendar(
-            datePickerLeftDate,
-            currentDateLeft.getFullYear(),
-            currentDateLeft.getMonth()
-          );
-          renderCalendar(
-            datePickerRightDate,
-            currentDateRight.getFullYear(),
-            currentDateRight.getMonth()
-          );
-        } else {
-          rangeDatepickerPopover.style.display = "none";
-        }
-      }
-      function getMonthDifference(d1, d2) {
-        let months;
-        months = (d2.getFullYear() - d1.getFullYear()) * 12;
-        months -= d1.getMonth();
-        months += d2.getMonth();
-        return months;
-      }
-      rangeDatepickerTrigger.addEventListener("click", (e) => {
-        e.stopPropagation();
-        togglePopover();
-      });
-      prevMonthButtonLeft.addEventListener("click", () => {
-        currentDateLeft.setMonth(currentDateLeft.getMonth() - 1);
-        renderCalendar(
-          datePickerLeftDate,
-          currentDateLeft.getFullYear(),
-          currentDateLeft.getMonth()
-        );
+      };
+      items.forEach((item) => {
+        item.addEventListener("click", (e) => {
+          const val = item.getAttribute("data-value");
+          const label = item.textContent.trim();
+          if (showCustomization && label === customizationLabel) {
+            handleSelect(val);
+          } else {
+            handleSelect(val);
+          }
+        });
       });
-      nextMonthButtonLeft.addEventListener("click", () => {
-        const monthDiff = getMonthDifference(currentDateLeft, currentDateRight);
-        currentDateLeft.setMonth(currentDateLeft.getMonth() + 1);
-        renderCalendar(
-          datePickerLeftDate,
-          currentDateLeft.getFullYear(),
-          currentDateLeft.getMonth()
-        );
-        if (monthDiff === 1) {
-          currentDateRight.setMonth(currentDateRight.getMonth() + 1);
-          renderCalendar(
-            datePickerRightDate,
-            currentDateRight.getFullYear(),
-            currentDateRight.getMonth()
+      updateUI();
+      container.__inaChipInitialized = true;
+    });
+  }
+
+  // src/js/components/stateful/pagination.js
+  function initPagination() {
+    document.querySelectorAll(`.${PREFIX}-pagination`).forEach((container) => {
+      if (container.dataset.initialized === "true") return;
+      container.dataset.initialized = "true";
+      const navButtonsContainer = container.querySelector(
+        `.${PREFIX}-pagination__nav-buttons`
+      );
+      const pageInfo = container.querySelector(
+        `.${PREFIX}-pagination__page-info`
+      );
+      const firstBtn = container.querySelector('[data-action="first"]');
+      const prevBtn = container.querySelector('[data-action="prev"]');
+      const nextBtn = container.querySelector('[data-action="next"]');
+      const lastBtn = container.querySelector('[data-action="last"]');
+      const pageSizeSelect = container.querySelector('[data-role="page-size"]');
+      if (!navButtonsContainer || !pageInfo) return;
+      let currentPage = parseInt(container.dataset.current || "1", 10);
+      let totalPages = parseInt(container.dataset.total || "10", 10);
+      let pageSize = parseInt(container.dataset.pageSize || "10", 10);
+      let pageButtons = [];
+      const updateUI = () => {
+        pageInfo.textContent = `Halaman ${currentPage} dari ${totalPages}`;
+        const isFirst = currentPage === 1;
+        if (firstBtn) {
+          firstBtn.disabled = isFirst;
+          firstBtn.classList.toggle(
+            `${PREFIX}-pagination__nav-button--disabled`,
+            isFirst
+          );
+          firstBtn.classList.toggle(
+            `${PREFIX}-pagination__nav-button--enabled`,
+            !isFirst
           );
         }
-      });
-      prevMonthButtonRight.addEventListener("click", () => {
-        const monthDiff = getMonthDifference(currentDateLeft, currentDateRight);
-        currentDateRight.setMonth(currentDateRight.getMonth() - 1);
-        renderCalendar(
-          datePickerRightDate,
-          currentDateRight.getFullYear(),
-          currentDateRight.getMonth()
-        );
-        if (monthDiff === 1) {
-          currentDateLeft.setMonth(currentDateRight.getMonth() - 1);
-          renderCalendar(
-            datePickerLeftDate,
-            currentDateLeft.getFullYear(),
-            currentDateLeft.getMonth()
+        if (prevBtn) {
+          prevBtn.disabled = isFirst;
+          prevBtn.classList.toggle(
+            `${PREFIX}-pagination__nav-button--disabled`,
+            isFirst
+          );
+          prevBtn.classList.toggle(
+            `${PREFIX}-pagination__nav-button--enabled`,
+            !isFirst
           );
         }
-      });
-      nextMonthButtonRight.addEventListener("click", () => {
-        currentDateRight.setMonth(currentDateRight.getMonth() + 1);
-        renderCalendar(
-          datePickerRightDate,
-          currentDateRight.getFullYear(),
-          currentDateRight.getMonth()
-        );
-      });
-      document.addEventListener("click", (e) => {
-        if (!rangeDatepickerPopover.contains(e.target) && e.target !== rangeDatepickerTrigger && !rangeDatepickerTrigger.contains(e.target)) {
-          rangeDatepickerPopover.style.display = "none";
+        const isLast = currentPage === totalPages;
+        if (nextBtn) {
+          nextBtn.disabled = isLast;
+          nextBtn.classList.toggle(
+            `${PREFIX}-pagination__nav-button--disabled`,
+            isLast
+          );
+          nextBtn.classList.toggle(
+            `${PREFIX}-pagination__nav-button--enabled`,
+            !isLast
+          );
         }
-      });
+        if (lastBtn) {
+          lastBtn.disabled = isLast;
+          lastBtn.classList.toggle(
+            `${PREFIX}-pagination__nav-button--disabled`,
+            isLast
+          );
+          lastBtn.classList.toggle(
+            `${PREFIX}-pagination__nav-button--enabled`,
+            !isLast
+          );
+        }
+        renderPageNumbers();
+      };
+      const renderPageNumbers = () => {
+        let start, end;
+        if (currentPage === 1) {
+          start = 1;
+          end = Math.min(3, totalPages);
+        } else if (currentPage === totalPages) {
+          start = Math.max(1, totalPages - 2);
+          end = totalPages;
+        } else {
+          start = currentPage - 1;
+          end = currentPage + 1;
+        }
+        if (start < 1) start = 1;
+        if (end > totalPages) end = totalPages;
+        pageButtons.forEach((btn) => btn.remove());
+        pageButtons = [];
+        const refNode = nextBtn || null;
+        for (let i = start; i <= end; i++) {
+          const isActive = i === currentPage;
+          const button = document.createElement("button");
+          button.type = "button";
+          button.textContent = i;
+          button.className = `${PREFIX}-pagination__page-button ${PREFIX}-pagination__page-button--${isActive ? "active" : "enabled"}`;
+          button.addEventListener("click", (e) => {
+            e.stopPropagation();
+            if (i !== currentPage) {
+              goToPage(i);
+            }
+          });
+          navButtonsContainer.insertBefore(button, refNode);
+          pageButtons.push(button);
+        }
+      };
+      const goToPage = (page) => {
+        if (page < 1) page = 1;
+        if (page > totalPages) page = totalPages;
+        if (page === currentPage) return;
+        currentPage = page;
+        container.dataset.current = currentPage;
+        updateUI();
+        dispatchChange();
+      };
+      const dispatchChange = () => {
+        container.dispatchEvent(
+          new CustomEvent("pagination:change", {
+            bubbles: true,
+            detail: {
+              page: currentPage,
+              pageSize,
+              totalPages
+            }
+          })
+        );
+      };
+      if (firstBtn)
+        firstBtn.addEventListener("click", () => {
+          if (currentPage > 1) goToPage(1);
+        });
+      if (prevBtn)
+        prevBtn.addEventListener("click", () => {
+          if (currentPage > 1) goToPage(currentPage - 1);
+        });
+      if (nextBtn)
+        nextBtn.addEventListener("click", () => {
+          if (currentPage < totalPages) goToPage(currentPage + 1);
+        });
+      if (lastBtn)
+        lastBtn.addEventListener("click", () => {
+          if (currentPage < totalPages) goToPage(totalPages);
+        });
+      if (pageSizeSelect) {
+        pageSizeSelect.addEventListener("change", (e) => {
+          pageSize = parseInt(e.target.value, 10);
+          currentPage = 1;
+          container.dataset.pageSize = pageSize;
+          container.dataset.current = currentPage;
+          updateUI();
+          dispatchChange();
+        });
+      }
+      updateUI();
     });
   }
 
@@ -2215,6 +2608,196 @@ var InaUI = (() => {
     }
   }
 
+  // src/js/index.js
+  var PREFIX = "ina";
+
+  // src/js/components/stateful/button-group.js
+  function initButtonGroup(rootSelector = `.${PREFIX}-button-group`) {
+    const buttonGroups = document.querySelectorAll(rootSelector);
+    buttonGroups.forEach((buttonGroup) => {
+      if (buttonGroup.__inaButtonGroupInitialized) return;
+      const buttons = buttonGroup.querySelectorAll(
+        `.${PREFIX}-button-group__button`
+      );
+      const updateState = (clickedButton) => {
+        const isDisabled = clickedButton.hasAttribute("disabled") || clickedButton.classList.contains(
+          `${PREFIX}-button-group__button--disabled`
+        );
+        if (isDisabled) return;
+        const value = clickedButton.getAttribute("data-value");
+        buttons.forEach((btn) => {
+          if (btn === clickedButton) {
+            btn.classList.add(`${PREFIX}-button-group__button--selected`);
+            btn.setAttribute("aria-pressed", "true");
+          } else {
+            btn.classList.remove(`${PREFIX}-button-group__button--selected`);
+            btn.setAttribute("aria-pressed", "false");
+          }
+        });
+        buttonGroup.dispatchEvent(
+          new CustomEvent("button-group:change", {
+            detail: { value },
+            bubbles: true,
+            composed: true
+          })
+        );
+      };
+      buttons.forEach((button) => {
+        button.addEventListener("click", (e) => {
+          if (button.type !== "submit") {
+            e.preventDefault();
+          }
+          updateState(button);
+        });
+      });
+      buttonGroup.__inaButtonGroupInitialized = true;
+    });
+  }
+
+  // src/js/components/stateful/dropdown.js
+  function initDropdown(rootSelector = `.${PREFIX}-dropdown`) {
+    document.querySelectorAll(rootSelector).forEach((dropdown) => {
+      const trigger = dropdown.querySelector(`.${PREFIX}-dropdown__trigger`);
+      const input = dropdown.querySelector(`.${PREFIX}-dropdown__input`);
+      const menu = dropdown.querySelector(`.${PREFIX}-dropdown__menu`);
+      const menuItems = menu.querySelectorAll("li[role='option']");
+      const menuId = menu.id;
+      let activeIndex = -1;
+      menuItems.forEach((item, index) => {
+        item.id = `${menuId}-item-${index}`;
+      });
+      const toggleMenu = (show) => {
+        const isCurrentlyShown = dropdown.classList.contains("show");
+        const isShown = show !== void 0 ? show : !isCurrentlyShown;
+        if (isShown === isCurrentlyShown) {
+          return;
+        }
+        dropdown.classList.toggle("show", isShown);
+        trigger.setAttribute("aria-expanded", isShown);
+        if (isShown) {
+          input.focus();
+        } else {
+          input.blur();
+          removeHighlight();
+          activeIndex = -1;
+          input.removeAttribute("aria-activedescendant");
+        }
+      };
+      const filterItems = () => {
+        const filterValue = input.value.toLowerCase();
+        let hasVisibleItems = false;
+        activeIndex = -1;
+        removeHighlight();
+        input.removeAttribute("aria-activedescendant");
+        const activeItem = menu.querySelector("li[role='option'].selected");
+        if (activeItem && input.value !== activeItem.textContent.trim()) {
+          activeItem.classList.remove("selected");
+        }
+        menuItems.forEach((item) => {
+          const itemText = item.textContent.toLowerCase();
+          const isMatch = itemText.includes(filterValue);
+          item.classList.toggle("hidden", !isMatch);
+          if (isMatch) hasVisibleItems = true;
+        });
+        if (!dropdown.classList.contains("show") && hasVisibleItems) {
+          toggleMenu(true);
+        }
+      };
+      const selectItem = (item) => {
+        const itemText = item.textContent.trim();
+        input.value = itemText;
+        menuItems.forEach((li) => {
+          li.classList.remove("selected");
+        });
+        if (item) {
+          item.classList.add("selected");
+          dropdown.dispatchEvent(
+            new CustomEvent("dropdown:changed", {
+              detail: { value: itemText }
+            })
+          );
+        }
+        toggleMenu(false);
+      };
+      const setHighlight = (index) => {
+        removeHighlight();
+        const visibleItems = menu.querySelectorAll(
+          "li[role='option']:not(.hidden)"
+        );
+        if (visibleItems.length === 0) return;
+        if (index < 0) index = 0;
+        else if (index >= visibleItems.length) index = visibleItems.length - 1;
+        const itemToHighlight = visibleItems[index];
+        if (itemToHighlight) {
+          itemToHighlight.classList.add("highlighted");
+          input.setAttribute("aria-activedescendant", itemToHighlight.id);
+          itemToHighlight.scrollIntoView({
+            behavior: "smooth",
+            block: "nearest"
+          });
+          activeIndex = index;
+        }
+      };
+      const removeHighlight = () => {
+        menuItems.forEach((item) => item.classList.remove("highlighted"));
+      };
+      trigger.addEventListener("click", () => {
+        toggleMenu();
+      });
+      input.addEventListener("input", filterItems);
+      menu.addEventListener("click", (e) => {
+        const option = e.target.closest("li[role='option']");
+        if (option) {
+          e.preventDefault();
+          selectItem(option);
+        }
+      });
+      document.addEventListener("click", (e) => {
+        if (!dropdown.contains(e.target)) {
+          toggleMenu(false);
+        }
+      });
+      input.addEventListener("keydown", (e) => {
+        const { key } = e;
+        const isMenuOpen = dropdown.classList.contains("show");
+        switch (key) {
+          case "ArrowDown":
+            e.preventDefault();
+            if (!isMenuOpen) {
+              toggleMenu(true);
+            }
+            setHighlight(activeIndex + 1);
+            break;
+          case "ArrowUp":
+            e.preventDefault();
+            if (isMenuOpen) {
+              setHighlight(activeIndex - 1);
+            }
+            break;
+          case "Enter":
+            e.preventDefault();
+            const firstVisible = menu.querySelector(
+              "li[role='option']:not(.hidden)"
+            );
+            const activeItem = menu.querySelector(".highlighted");
+            if (isMenuOpen && activeItem) {
+              selectItem(activeItem);
+            } else if (isMenuOpen && firstVisible) {
+              toggleMenu(false);
+            }
+            break;
+          case "Escape":
+            e.preventDefault();
+            toggleMenu(false);
+            break;
+          case "Tab":
+            toggleMenu(false);
+            break;
+        }
+      });
+    });
+  }
+
   // src/js/bundle.js
   if (typeof window !== void 0) {
     document.addEventListener("DOMContentLoaded", () => {
@@ -2230,9 +2813,14 @@ var InaUI = (() => {
       initImgCompare();
       initModal();
       initRangeDatepicker();
+      initRadioButton();
+      initStepper();
       initTab();
       initTimepicker();
       initToggle();
+      initPagination();
+      initSelectDropdown();
+      initChip();
     });
   }
   return __toCommonJS(bundle_exports);