@idds/js 1.0.35 → 1.0.37

package/dist/index.iife.js

@@ -119,11 +119,20 @@ var InaUI = (() => {
 
   // src/js/components/stateful/datepicker.js
   function initDatepicker() {
-    document.querySelectorAll(`.${PREFIX}-datepicker`).forEach((datepicker) => {
+    document.querySelectorAll(".ina-date-picker").forEach((datepicker) => {
+      const trigger = datepicker.querySelector(".ina-date-picker__trigger");
+      const triggerText = trigger.querySelector(".ina-date-picker__trigger-text");
+      const panel = datepicker.querySelector(".ina-date-picker__panel");
+      let panelContent = panel.querySelector(".ina-date-picker__panel-content");
+      if (!panelContent) {
+        panelContent = document.createElement("div");
+        panelContent.className = "ina-date-picker__panel-content";
+        panel.appendChild(panelContent);
+      }
       let currentDate = /* @__PURE__ */ new Date();
-      let selectedDateTarget = null;
       let selectedDate = null;
-      const MONTHS = [
+      let isOpen = false;
+      const MONTHS_ID = [
         "Januari",
         "Februari",
         "Maret",
@@ -137,267 +146,325 @@ var InaUI = (() => {
         "November",
         "Desember"
       ];
-      const DAYS = ["Min", "Sen", "Sel", "Rab", "Kam", "Jum", "Sab"];
-      const datepickerTrigger = datepicker.querySelector(
-        `.${PREFIX}-datepicker__trigger`
-      );
-      const datepickerPopover = datepicker.querySelector(
-        `.${PREFIX}-datepicker__popover`
-      );
-      const datepickerMonthTrigger = datepicker.querySelector(
-        `.${PREFIX}-datepicker__month-trigger`
-      );
-      const datepickerMonthPopover = datepicker.querySelector(
-        `.${PREFIX}-datepicker__month-popover`
-      );
-      const datepickerMonthItem = datepicker.querySelectorAll(
-        `.${PREFIX}-datepicker__month-item`
-      );
-      const datepickerYearTrigger = datepicker.querySelector(
-        `.${PREFIX}-datepicker__year-trigger`
-      );
-      const datepickerYearPopover = datepicker.querySelector(
-        `.${PREFIX}-datepicker__year-popover`
-      );
-      const datepickerYearPrevButton = datepicker.querySelector(
-        `.${PREFIX}-datepicker__year-nav-prev`
-      );
-      const datepickerYearCurrent = datepicker.querySelector(
-        `.${PREFIX}-datepicker__year-current`
-      );
-      const datepickerYearNextButton = datepicker.querySelector(
-        `.${PREFIX}-datepicker__year-nav-next`
-      );
-      const datepickerYearContent = datepicker.querySelector(
-        `.${PREFIX}-datepicker__year-content`
-      );
-      const datepickerYearItem = datepicker.querySelectorAll(
-        `.${PREFIX}-datepicker__year-item`
-      );
-      const datepickerContent = datepicker.querySelector(
-        `.${PREFIX}-datepicker__content`
-      );
-      const prevMonthButton = datepicker.querySelector(
-        `.${PREFIX}-datepicker__nav-prev`
-      );
-      const nextMonthButton = datepicker.querySelector(
-        `.${PREFIX}-datepicker__nav-next`
-      );
-      const datepickerSubmitButton = datepicker.querySelector(
-        `.${PREFIX}-datepicker__submit`
-      );
-      function renderYear(startYear, endYear) {
-        datepickerYearContent.innerHTML = "";
-        datepickerYearCurrent.textContent = `${startYear} - ${endYear}`;
-        for (let y = startYear; y <= endYear; y++) {
-          const yearEl = document.createElement("button");
-          yearEl.className = `${PREFIX}-datepicker__year-item`;
-          yearEl.textContent = y;
-          yearEl.dataset.year = y;
-          if (y === currentDate.getFullYear()) {
-            yearEl.classList.add("selected");
+      const MONTHS_SHORT_ID = [
+        "Jan",
+        "Feb",
+        "Mar",
+        "Apr",
+        "Mei",
+        "Jun",
+        "Jul",
+        "Agu",
+        "Sep",
+        "Okt",
+        "Nov",
+        "Des"
+      ];
+      const DAYS_SHORT = ["Min", "Sen", "Sel", "Rab", "Kam", "Jum", "Sab"];
+      function formatDate(date) {
+        const day = date.getDate().toString().padStart(2, "0");
+        const monthIndex = date.getMonth();
+        const year = date.getFullYear();
+        return `${day} ${MONTHS_SHORT_ID[monthIndex]} ${year}`;
+      }
+      function createIcon(name, size = 16) {
+        if (name === "chevron-left") {
+          return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 6l-6 6l6 6" /></svg>`;
+        }
+        if (name === "chevron-right") {
+          return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l6 6l-6 6" /></svg>`;
+        }
+        return "";
+      }
+      function createMonthPicker(initialMonth, onChange) {
+        const container = document.createElement("div");
+        container.className = "ina-month-picker";
+        let currentMonthIdx = initialMonth;
+        let isPickerOpen = false;
+        const pickerTrigger = document.createElement("button");
+        pickerTrigger.type = "button";
+        pickerTrigger.className = "ina-month-picker__trigger ina-month-picker__trigger--size-sm";
+        const updateTriggerText = () => {
+          pickerTrigger.innerHTML = `
+                <span class="ina-month-picker__trigger-text">${MONTHS_SHORT_ID[currentMonthIdx]}</span>
+             `;
+        };
+        updateTriggerText();
+        pickerTrigger.addEventListener("click", (e) => {
+          e.stopPropagation();
+          togglePicker(!isPickerOpen);
+        });
+        const pickerPanel = document.createElement("div");
+        pickerPanel.className = "ina-month-picker__panel";
+        const grid = document.createElement("div");
+        grid.className = "ina-month-picker__grid";
+        MONTHS_SHORT_ID.forEach((m, idx) => {
+          const btn = document.createElement("button");
+          btn.type = "button";
+          btn.className = "ina-month-picker__month-option";
+          if (idx === currentMonthIdx)
+            btn.classList.add("ina-month-picker__month-option--selected");
+          btn.textContent = m;
+          btn.addEventListener("click", (e) => {
+            e.stopPropagation();
+            currentMonthIdx = idx;
+            updateTriggerText();
+            grid.querySelectorAll(".ina-month-picker__month-option").forEach((b, i) => {
+              if (i === idx)
+                b.classList.add("ina-month-picker__month-option--selected");
+              else
+                b.classList.remove("ina-month-picker__month-option--selected");
+            });
+            togglePicker(false);
+            onChange(idx);
+          });
+          grid.appendChild(btn);
+        });
+        pickerPanel.appendChild(grid);
+        container.appendChild(pickerTrigger);
+        container.appendChild(pickerPanel);
+        function togglePicker(show) {
+          isPickerOpen = show;
+          if (show) {
+            pickerPanel.classList.add("ina-month-picker__panel--open");
+            pickerTrigger.setAttribute("aria-expanded", "true");
+          } else {
+            pickerPanel.classList.remove("ina-month-picker__panel--open");
+            pickerTrigger.setAttribute("aria-expanded", "false");
+          }
+        }
+        document.addEventListener("click", (e) => {
+          if (!container.contains(e.target)) togglePicker(false);
+        });
+        return {
+          element: container,
+          setMonth: (m) => {
+            currentMonthIdx = m;
+            updateTriggerText();
+            grid.querySelectorAll(".ina-month-picker__month-option").forEach((b, i) => {
+              if (i === m)
+                b.classList.add("ina-month-picker__month-option--selected");
+              else
+                b.classList.remove("ina-month-picker__month-option--selected");
+            });
+          }
+        };
+      }
+      function createYearPicker(initialYear, onChange) {
+        const container = document.createElement("div");
+        container.className = "ina-year-picker";
+        let currentYearVal = initialYear;
+        let isPickerOpen = false;
+        let decadeStart = Math.floor(initialYear / 20) * 20;
+        const pickerTrigger = document.createElement("button");
+        pickerTrigger.type = "button";
+        pickerTrigger.className = "ina-year-picker__trigger ina-year-picker__trigger--size-sm";
+        const updateTriggerText = () => {
+          pickerTrigger.innerHTML = `
+                <span class="ina-year-picker__trigger-text">${currentYearVal}</span>
+             `;
+        };
+        updateTriggerText();
+        pickerTrigger.addEventListener("click", (e) => {
+          e.stopPropagation();
+          togglePicker(!isPickerOpen);
+        });
+        const pickerPanel = document.createElement("div");
+        pickerPanel.className = "ina-year-picker__panel";
+        const header = document.createElement("div");
+        header.className = "ina-year-picker__header";
+        const prevBtn = document.createElement("button");
+        prevBtn.type = "button";
+        prevBtn.className = "ina-year-picker__nav-button";
+        prevBtn.innerHTML = createIcon("chevron-left");
+        prevBtn.onclick = (e) => {
+          e.stopPropagation();
+          decadeStart -= 20;
+          renderGrid();
+        };
+        const nextBtn = document.createElement("button");
+        nextBtn.type = "button";
+        nextBtn.className = "ina-year-picker__nav-button";
+        nextBtn.innerHTML = createIcon("chevron-right");
+        nextBtn.onclick = (e) => {
+          e.stopPropagation();
+          decadeStart += 20;
+          renderGrid();
+        };
+        const rangeText = document.createElement("span");
+        rangeText.className = "ina-year-picker__decade-range";
+        header.append(prevBtn, rangeText, nextBtn);
+        const grid = document.createElement("div");
+        grid.className = "ina-year-picker__grid";
+        function renderGrid() {
+          grid.innerHTML = "";
+          rangeText.textContent = `${decadeStart} - ${decadeStart + 19}`;
+          for (let y = decadeStart; y < decadeStart + 20; y++) {
+            const btn = document.createElement("button");
+            btn.type = "button";
+            btn.className = "ina-year-picker__year-option";
+            if (y === currentYearVal)
+              btn.classList.add("ina-year-picker__year-option--selected");
+            btn.textContent = y;
+            btn.addEventListener("click", (e) => {
+              e.stopPropagation();
+              currentYearVal = y;
+              updateTriggerText();
+              togglePicker(false);
+              onChange(y);
+            });
+            grid.appendChild(btn);
+          }
+        }
+        pickerPanel.append(header, grid);
+        container.append(pickerTrigger, pickerPanel);
+        function togglePicker(show) {
+          isPickerOpen = show;
+          if (show) {
+            decadeStart = Math.floor(currentYearVal / 20) * 20;
+            renderGrid();
+            pickerPanel.classList.add("ina-year-picker__panel--open");
+            pickerTrigger.setAttribute("aria-expanded", "true");
+          } else {
+            pickerPanel.classList.remove("ina-year-picker__panel--open");
+            pickerTrigger.setAttribute("aria-expanded", "false");
           }
-          datepickerYearContent.appendChild(yearEl);
         }
+        document.addEventListener("click", (e) => {
+          if (!container.contains(e.target)) togglePicker(false);
+        });
+        return {
+          element: container,
+          setYear: (y) => {
+            currentYearVal = y;
+            updateTriggerText();
+          }
+        };
       }
-      function renderCalendar(year, month) {
-        datepickerContent.innerHTML = "";
-        datepickerMonthTrigger.textContent = MONTHS[month].substring(0, 3);
-        datepickerYearTrigger.textContent = year;
-        DAYS.forEach((day) => {
-          const dayNameWrapper = document.createElement("div");
-          dayNameWrapper.className = `${PREFIX}-datepicker__dayname-wrapper`;
-          const dayNameEl = document.createElement("span");
-          dayNameEl.className = `${PREFIX}-datepicker__dayname`;
-          dayNameEl.textContent = day.substring(0, 3);
-          dayNameWrapper.appendChild(dayNameEl);
-          datepickerContent.appendChild(dayNameWrapper);
+      function renderCalendar() {
+        panelContent.innerHTML = "";
+        const year = currentDate.getFullYear();
+        const month = currentDate.getMonth();
+        const calendarContainer = document.createElement("div");
+        calendarContainer.className = "ina-date-picker__calendar-container";
+        const header = document.createElement("div");
+        header.className = "ina-date-picker__calendar-header";
+        const prevBtn = document.createElement("button");
+        prevBtn.className = "ina-date-picker__nav-button";
+        prevBtn.type = "button";
+        prevBtn.innerHTML = createIcon("chevron-left", 20);
+        prevBtn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          currentDate.setMonth(month - 1);
+          renderCalendar();
+        });
+        const nextBtn = document.createElement("button");
+        nextBtn.className = "ina-date-picker__nav-button";
+        nextBtn.type = "button";
+        nextBtn.innerHTML = createIcon("chevron-right", 20);
+        nextBtn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          currentDate.setMonth(month + 1);
+          renderCalendar();
+        });
+        const controls = document.createElement("div");
+        controls.className = "ina-date-picker__header-controls";
+        const monthContainer = document.createElement("div");
+        monthContainer.className = "ina-date-picker__dropdown-container";
+        const monthPicker = createMonthPicker(month, (newMonth) => {
+          currentDate.setMonth(newMonth);
+          renderCalendar();
+        });
+        monthContainer.appendChild(monthPicker.element);
+        const yearContainer = document.createElement("div");
+        yearContainer.className = "ina-date-picker__dropdown-container";
+        const yearPicker = createYearPicker(year, (newYear) => {
+          currentDate.setFullYear(newYear);
+          renderCalendar();
+        });
+        yearContainer.appendChild(yearPicker.element);
+        controls.append(monthContainer, yearContainer);
+        header.append(prevBtn, controls, nextBtn);
+        const grid = document.createElement("div");
+        grid.className = "ina-date-picker__calendar-grid";
+        DAYS_SHORT.forEach((day) => {
+          const dh = document.createElement("div");
+          dh.className = "ina-date-picker__day-header";
+          dh.textContent = day;
+          grid.appendChild(dh);
         });
         const firstDayOfMonth = new Date(year, month, 1).getDay();
         const daysInMonth = new Date(year, month + 1, 0).getDate();
         const daysInPrevMonth = new Date(year, month, 0).getDate();
-        for (let i = 0; i < firstDayOfMonth; i++) {
-          const dayEl = document.createElement("button");
-          dayEl.className = `${PREFIX}-datepicker__calendar-day outside-month`;
-          dayEl.textContent = daysInPrevMonth - firstDayOfMonth + 1 + i;
-          dayEl.disabled = true;
-          datepickerContent.appendChild(dayEl);
+        for (let i = firstDayOfMonth - 1; i >= 0; i--) {
+          const dayBtn = document.createElement("button");
+          dayBtn.type = "button";
+          dayBtn.className = "ina-date-picker__day ina-date-picker__day--other-month ina-date-picker__day--disabled";
+          dayBtn.textContent = daysInPrevMonth - i;
+          grid.appendChild(dayBtn);
         }
         const today = /* @__PURE__ */ new Date();
         for (let i = 1; i <= daysInMonth; i++) {
-          const dayEl = document.createElement("button");
-          dayEl.className = `${PREFIX}-datepicker__calendar-day`;
-          dayEl.textContent = i;
-          dayEl.dataset.date = new Date(year, month, i).toISOString();
-          if (year === today.getFullYear() && month === today.getMonth() && i === today.getDate()) {
-            const marker = document.createElement("span");
-            marker.className = `${PREFIX}-datepicker__today-marker`;
-            marker.textContent = "Hari ini";
-            dayEl.appendChild(marker);
-            dayEl.classList.add("today");
+          const dayBtn = document.createElement("button");
+          dayBtn.type = "button";
+          dayBtn.className = "ina-date-picker__day";
+          dayBtn.textContent = i;
+          let isSelected = false;
+          if (selectedDate && selectedDate.getDate() === i && selectedDate.getMonth() === month && selectedDate.getFullYear() === year) {
+            dayBtn.classList.add("ina-date-picker__day--selected");
+            isSelected = true;
           }
-          if (selectedDate && year === selectedDate.getFullYear() && month === selectedDate.getMonth() && i === selectedDate.getDate()) {
-            dayEl.classList.add("selected");
-          }
-          datepickerContent.appendChild(dayEl);
-        }
-        const totalCells = 42;
-        const cellsRendered = firstDayOfMonth + daysInMonth;
-        const remainingCells = totalCells - cellsRendered;
-        for (let i = 1; i <= remainingCells; i++) {
-          const dayEl = document.createElement("button");
-          dayEl.className = `${PREFIX}-datepicker__calendar-day outside-month`;
-          dayEl.textContent = i;
-          dayEl.disabled = true;
-          datepickerContent.appendChild(dayEl);
-        }
-        datepickerMonthPopover.innerHTML = "";
-        MONTHS.forEach((monthName, index) => {
-          const monthEl = document.createElement("button");
-          monthEl.className = `${PREFIX}-datepicker__month-item`;
-          monthEl.textContent = monthName.substring(0, 3);
-          monthEl.dataset.month = index;
-          if (index === month) {
-            monthEl.classList.add("selected");
+          if (today.getDate() === i && today.getMonth() === month && today.getFullYear() === year) {
+            dayBtn.classList.add("ina-date-picker__day--today");
           }
-          datepickerMonthPopover.appendChild(monthEl);
-        });
-        datepickerYearContent.innerHTML = "";
-        const startYear = Math.floor(year / 10) * 10;
-        const endYear = startYear + 19;
-        datepickerYearCurrent.textContent = `${startYear} - ${endYear}`;
-        for (let y = startYear; y <= endYear; y++) {
-          const yearEl = document.createElement("button");
-          yearEl.className = `${PREFIX}-datepicker__year-item`;
-          yearEl.textContent = y;
-          yearEl.dataset.year = y;
-          if (y === year) {
-            yearEl.classList.add("selected");
+          if (!isSelected) {
+            dayBtn.classList.add("ina-date-picker__day--hover");
           }
-          datepickerYearContent.appendChild(yearEl);
-        }
-      }
-      function togglePopover() {
-        if (datepickerPopover.style.display === "none" || datepickerPopover.style.display === "") {
-          datepickerPopover.style.display = "block";
-          renderCalendar(currentDate.getFullYear(), currentDate.getMonth());
-        } else {
-          datepickerPopover.style.display = "none";
+          dayBtn.addEventListener("click", (e) => {
+            e.stopPropagation();
+            selectedDate = new Date(year, month, i);
+            triggerText.textContent = formatDate(selectedDate);
+            triggerText.classList.add("ina-date-picker__trigger-text--value");
+            triggerText.classList.remove(
+              "ina-date-picker__trigger-text--placeholder"
+            );
+            datepicker.dispatchEvent(
+              new CustomEvent("date:changed", { detail: { selectedDate } })
+            );
+            toggle(false);
+          });
+          grid.appendChild(dayBtn);
         }
-      }
-      function toggleMonthPopover() {
-        if (datepickerMonthPopover.style.display === "none" || datepickerMonthPopover.style.display === "") {
-          datepickerMonthPopover.style.display = "grid";
-        } else {
-          datepickerMonthPopover.style.display = "none";
+        const currentCells = grid.children.length - 7;
+        const remaining = 42 - currentCells;
+        for (let i = 1; i <= remaining; i++) {
+          const dayBtn = document.createElement("button");
+          dayBtn.type = "button";
+          dayBtn.className = "ina-date-picker__day ina-date-picker__day--other-month ina-date-picker__day--disabled";
+          dayBtn.textContent = i;
+          grid.appendChild(dayBtn);
         }
+        calendarContainer.append(header, grid);
+        panelContent.appendChild(calendarContainer);
       }
-      function toggleYearPopover() {
-        if (datepickerYearPopover.style.display === "none" || datepickerYearPopover.style.display === "") {
-          datepickerYearPopover.style.display = "block";
+      function toggle(show) {
+        isOpen = show;
+        if (show) {
+          panel.classList.add("ina-date-picker__panel--open");
+          renderCalendar();
         } else {
-          datepickerYearPopover.style.display = "none";
+          panel.classList.remove("ina-date-picker__panel--open");
         }
       }
-      datepickerTrigger.addEventListener("click", (e) => {
+      trigger.addEventListener("click", (e) => {
         e.stopPropagation();
-        togglePopover();
-      });
-      prevMonthButton.addEventListener("click", () => {
-        currentDate.setMonth(currentDate.getMonth() - 1);
-        renderCalendar(currentDate.getFullYear(), currentDate.getMonth());
-      });
-      nextMonthButton.addEventListener("click", () => {
-        currentDate.setMonth(currentDate.getMonth() + 1);
-        renderCalendar(currentDate.getFullYear(), currentDate.getMonth());
-      });
-      datepickerMonthTrigger.addEventListener("click", (e) => {
-        e.stopPropagation();
-        toggleMonthPopover();
-      });
-      datepickerYearTrigger.addEventListener("click", (e) => {
-        e.stopPropagation();
-        toggleYearPopover();
-      });
-      document.addEventListener("click", (e) => {
-        if (!datepickerPopover.contains(e.target) && e.target !== datepickerTrigger && !datepickerTrigger.contains(e.target)) {
-          datepickerPopover.style.display = "none";
-        }
-      });
-      document.addEventListener("click", (e) => {
-        if (!datepickerMonthPopover.contains(e.target) && e.target !== datepickerMonthTrigger && !datepickerMonthTrigger.contains(e.target)) {
-          datepickerMonthPopover.style.display = "none";
-        }
+        toggle(!isOpen);
       });
       document.addEventListener("click", (e) => {
-        if (!datepickerYearPopover.contains(e.target) && e.target !== datepickerYearTrigger && !datepickerYearTrigger.contains(e.target)) {
-          datepickerYearPopover.style.display = "none";
-        }
-      });
-      datepickerMonthPopover.addEventListener("click", (e) => {
-        e.stopPropagation();
-        const target = e.target;
-        if (target.classList.contains(`${PREFIX}-datepicker__month-item`)) {
-          const monthIndex = parseInt(target.dataset.month);
-          currentDate.setMonth(monthIndex);
-          renderCalendar(currentDate.getFullYear(), currentDate.getMonth());
-          datepickerMonthPopover.style.display = "none";
-        }
-      });
-      datepickerYearPopover.addEventListener("click", (e) => {
-        e.stopPropagation();
-        const target = e.target;
-        if (target.classList.contains(`${PREFIX}-datepicker__year-nav-prev`)) {
-          const currentYearRange = datepickerYearCurrent.textContent.split(" - ").map((y) => parseInt(y));
-          const newStartYear = currentYearRange[0] - 20;
-          const newEndYear = currentYearRange[1] - 20;
-          renderYear(newStartYear, newEndYear);
-        } else if (target.classList.contains(`${PREFIX}-datepicker__year-nav-next`)) {
-          const currentYearRange = datepickerYearCurrent.textContent.split(" - ").map((y) => parseInt(y));
-          const newStartYear = currentYearRange[0] + 20;
-          const newEndYear = currentYearRange[1] + 20;
-          renderYear(newStartYear, newEndYear);
-        }
+        if (!datepicker.contains(e.target)) toggle(false);
       });
-      datepickerYearContent.addEventListener("click", (e) => {
-        e.stopPropagation();
-        const target = e.target;
-        if (target.classList.contains(`${PREFIX}-datepicker__year-item`)) {
-          const yearValue = parseInt(target.dataset.year);
-          currentDate.setFullYear(yearValue);
-          renderCalendar(currentDate.getFullYear(), currentDate.getMonth());
-          datepickerYearPopover.style.display = "none";
-        }
-      });
-      datepickerContent.addEventListener("click", (e) => {
-        const target = e.target;
-        if (target.classList.contains(`${PREFIX}-datepicker__calendar-day`) && !target.classList.contains("outside-month")) {
-          if (target.classList.contains("selected")) {
-            target.classList.remove("selected");
-            selectedDateTarget = null;
-          } else {
-            const selectedDateEl = datepickerContent.querySelector(
-              `.${PREFIX}-datepicker__calendar-day.selected`
-            );
-            selectedDateEl?.classList.remove("selected");
-            target.classList.add("selected");
-            selectedDateTarget = target;
-          }
-        }
-      });
-      datepickerSubmitButton.addEventListener("click", () => {
-        selectedDate = selectedDateTarget ? new Date(selectedDateTarget.dataset.date) : null;
-        currentDate = selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date();
-        datepicker.dispatchEvent(
-          new CustomEvent("date:changed", { detail: { selectedDate } })
-        );
-        datepickerPopover.style.display = "none";
-      });
-      renderCalendar(currentDate.getFullYear(), currentDate.getMonth());
     });
   }
-  document.addEventListener("DOMContentLoaded", () => {
-  });
 
   // src/js/components/stateless/modal.js
   function initModal(rootSelector = `.${PREFIX}-modal`) {
@@ -1214,31 +1281,72 @@ var InaUI = (() => {
   }
 
   // src/js/components/stateless/toast.js
-  function showToast(message, variant = "default", duration = 3e3) {
-    const toastContainer = document.createElement("div");
-    toastContainer.className = "ina-ss-toast--container";
+  function showToast(optionsOrMessage, variant = "default", duration = 3e3) {
+    let message, title, state, style, position, actionHtml;
+    if (typeof optionsOrMessage === "object") {
+      message = optionsOrMessage.message || "";
+      title = optionsOrMessage.title;
+      state = optionsOrMessage.state || "default";
+      style = optionsOrMessage.style || "solid";
+      duration = optionsOrMessage.duration || 3e3;
+      position = optionsOrMessage.position || "top-right";
+      actionHtml = optionsOrMessage.actionHtml || "";
+    } else {
+      message = optionsOrMessage;
+      state = variant;
+      style = "solid";
+      position = "top-right";
+      actionHtml = "";
+    }
+    let containerId = `ina-toast-container-${position}`;
+    let container = document.getElementById(containerId);
+    if (!container) {
+      container = document.createElement("div");
+      container.id = containerId;
+      container.className = `ina-toast-container ina-toast-container--${position}`;
+      document.body.appendChild(container);
+    }
+    const toastItem = document.createElement("div");
+    toastItem.className = "ina-toast-item";
     const toast = document.createElement("div");
-    toast.className = `ina-ss-toast ina-ss-toast--${variant}`;
-    const iconEl = document.createElement("div");
-    iconEl.className = "ina-ss-toast__icon";
-    toast.appendChild(iconEl);
-    const contentEl = document.createElement("span");
-    contentEl.textContent = message;
-    toast.appendChild(contentEl);
-    const closeEl = document.createElement("button");
-    closeEl.className = "ina-ss-toast__close";
-    toast.appendChild(closeEl);
-    closeEl.addEventListener("click", () => {
-      toast.classList.remove("show");
-      toast.addEventListener("transitionend", () => toast.remove());
-    });
-    toastContainer.appendChild(toast);
-    document.body.appendChild(toastContainer);
-    requestAnimationFrame(() => toast.classList.add("show"));
-    setTimeout(() => {
-      toast.classList.remove("show");
-      toast.addEventListener("transitionend", () => toast.remove());
-    }, duration);
+    toast.className = `ina-toast ina-toast--state-${state} ina-toast--style-${style} ina-toast--visible`;
+    const iconMap = {
+      default: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>',
+      destructive: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>',
+      positive: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>'
+    };
+    const iconHtml = iconMap[state] || iconMap.default;
+    let contentHtml = `
+     <div class="ina-toast__icon">${iconHtml}</div>
+     <div class="ina-toast__content">
+        <div class="ina-toast__text-area">
+           ${title ? `<p class="ina-toast__title">${title}</p>` : ""}
+           ${message ? `<p class="ina-toast__description">${message}</p>` : ""}
+        </div>
+        ${actionHtml ? `<div class="ina-toast__action-area">${actionHtml}</div>` : ""}
+     </div>
+     <button class="ina-toast__close-button">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ina-toast__close-icon"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+     </button>
+  `;
+    toast.innerHTML = contentHtml;
+    toastItem.appendChild(toast);
+    const closeBtn = toast.querySelector(".ina-toast__close-button");
+    const close = () => {
+      toast.classList.remove("ina-toast--visible");
+      toast.classList.add("ina-toast--hidden");
+      setTimeout(() => {
+        if (toastItem.parentNode) toastItem.parentNode.removeChild(toastItem);
+        if (container.children.length === 0) {
+          if (container.parentNode) container.parentNode.removeChild(container);
+        }
+      }, 300);
+    };
+    closeBtn.addEventListener("click", close);
+    container.appendChild(toastItem);
+    if (duration > 0) {
+      setTimeout(close, duration);
+    }
   }
 
   // src/js/bundle.js