@idds/js 1.0.34 → 1.0.36

package/dist/index.iife.js

@@ -119,7 +119,7 @@ var InaUI = (() => {
 
   // src/js/components/stateful/datepicker.js
   function initDatepicker() {
-    document.querySelectorAll(`.${PREFIX}-datepicker`).forEach((datepicker) => {
+    document.querySelectorAll(".ina-date-picker").forEach((datepicker) => {
       let currentDate = /* @__PURE__ */ new Date();
       let selectedDateTarget = null;
       let selectedDate = null;
@@ -139,59 +139,59 @@ var InaUI = (() => {
       ];
       const DAYS = ["Min", "Sen", "Sel", "Rab", "Kam", "Jum", "Sab"];
       const datepickerTrigger = datepicker.querySelector(
-        `.${PREFIX}-datepicker__trigger`
+        ".ina-date-picker__trigger"
       );
       const datepickerPopover = datepicker.querySelector(
-        `.${PREFIX}-datepicker__popover`
+        ".ina-date-picker__popover"
       );
       const datepickerMonthTrigger = datepicker.querySelector(
-        `.${PREFIX}-datepicker__month-trigger`
+        ".ina-date-picker__month-trigger"
       );
       const datepickerMonthPopover = datepicker.querySelector(
-        `.${PREFIX}-datepicker__month-popover`
+        ".ina-date-picker__month-popover"
       );
       const datepickerMonthItem = datepicker.querySelectorAll(
-        `.${PREFIX}-datepicker__month-item`
+        ".ina-date-picker__month-item"
       );
       const datepickerYearTrigger = datepicker.querySelector(
-        `.${PREFIX}-datepicker__year-trigger`
+        ".ina-date-picker__year-trigger"
       );
       const datepickerYearPopover = datepicker.querySelector(
-        `.${PREFIX}-datepicker__year-popover`
+        ".ina-date-picker__year-popover"
       );
       const datepickerYearPrevButton = datepicker.querySelector(
-        `.${PREFIX}-datepicker__year-nav-prev`
+        ".ina-date-picker__year-nav-prev"
       );
       const datepickerYearCurrent = datepicker.querySelector(
-        `.${PREFIX}-datepicker__year-current`
+        ".ina-date-picker__year-current"
       );
       const datepickerYearNextButton = datepicker.querySelector(
-        `.${PREFIX}-datepicker__year-nav-next`
+        ".ina-date-picker__year-nav-next"
       );
       const datepickerYearContent = datepicker.querySelector(
-        `.${PREFIX}-datepicker__year-content`
+        ".ina-date-picker__year-content"
       );
       const datepickerYearItem = datepicker.querySelectorAll(
-        `.${PREFIX}-datepicker__year-item`
+        ".ina-date-picker__year-item"
       );
       const datepickerContent = datepicker.querySelector(
-        `.${PREFIX}-datepicker__content`
+        ".ina-date-picker__content"
       );
       const prevMonthButton = datepicker.querySelector(
-        `.${PREFIX}-datepicker__nav-prev`
+        ".ina-date-picker__nav-prev"
       );
       const nextMonthButton = datepicker.querySelector(
-        `.${PREFIX}-datepicker__nav-next`
+        ".ina-date-picker__nav-next"
       );
       const datepickerSubmitButton = datepicker.querySelector(
-        `.${PREFIX}-datepicker__submit`
+        ".ina-date-picker__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.className = "ina-date-picker__year-item";
           yearEl.textContent = y;
           yearEl.dataset.year = y;
           if (y === currentDate.getFullYear()) {
@@ -206,9 +206,9 @@ var InaUI = (() => {
         datepickerYearTrigger.textContent = year;
         DAYS.forEach((day) => {
           const dayNameWrapper = document.createElement("div");
-          dayNameWrapper.className = `${PREFIX}-datepicker__dayname-wrapper`;
+          dayNameWrapper.className = "ina-date-picker__dayname-wrapper";
           const dayNameEl = document.createElement("span");
-          dayNameEl.className = `${PREFIX}-datepicker__dayname`;
+          dayNameEl.className = "ina-date-picker__dayname";
           dayNameEl.textContent = day.substring(0, 3);
           dayNameWrapper.appendChild(dayNameEl);
           datepickerContent.appendChild(dayNameWrapper);
@@ -218,7 +218,7 @@ var InaUI = (() => {
         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.className = "ina-date-picker__calendar-day outside-month";
           dayEl.textContent = daysInPrevMonth - firstDayOfMonth + 1 + i;
           dayEl.disabled = true;
           datepickerContent.appendChild(dayEl);
@@ -226,12 +226,12 @@ var InaUI = (() => {
         const today = /* @__PURE__ */ new Date();
         for (let i = 1; i <= daysInMonth; i++) {
           const dayEl = document.createElement("button");
-          dayEl.className = `${PREFIX}-datepicker__calendar-day`;
+          dayEl.className = "ina-date-picker__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.className = "ina-date-picker__today-marker";
             marker.textContent = "Hari ini";
             dayEl.appendChild(marker);
             dayEl.classList.add("today");
@@ -246,7 +246,7 @@ var InaUI = (() => {
         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.className = "ina-date-picker__calendar-day outside-month";
           dayEl.textContent = i;
           dayEl.disabled = true;
           datepickerContent.appendChild(dayEl);
@@ -254,7 +254,7 @@ var InaUI = (() => {
         datepickerMonthPopover.innerHTML = "";
         MONTHS.forEach((monthName, index) => {
           const monthEl = document.createElement("button");
-          monthEl.className = `${PREFIX}-datepicker__month-item`;
+          monthEl.className = "ina-date-picker__month-item";
           monthEl.textContent = monthName.substring(0, 3);
           monthEl.dataset.month = index;
           if (index === month) {
@@ -268,7 +268,7 @@ var InaUI = (() => {
         datepickerYearCurrent.textContent = `${startYear} - ${endYear}`;
         for (let y = startYear; y <= endYear; y++) {
           const yearEl = document.createElement("button");
-          yearEl.className = `${PREFIX}-datepicker__year-item`;
+          yearEl.className = "ina-date-picker__year-item";
           yearEl.textContent = y;
           yearEl.dataset.year = y;
           if (y === year) {
@@ -337,7 +337,7 @@ var InaUI = (() => {
       datepickerMonthPopover.addEventListener("click", (e) => {
         e.stopPropagation();
         const target = e.target;
-        if (target.classList.contains(`${PREFIX}-datepicker__month-item`)) {
+        if (target.classList.contains("ina-date-picker__month-item")) {
           const monthIndex = parseInt(target.dataset.month);
           currentDate.setMonth(monthIndex);
           renderCalendar(currentDate.getFullYear(), currentDate.getMonth());
@@ -347,12 +347,12 @@ var InaUI = (() => {
       datepickerYearPopover.addEventListener("click", (e) => {
         e.stopPropagation();
         const target = e.target;
-        if (target.classList.contains(`${PREFIX}-datepicker__year-nav-prev`)) {
+        if (target.classList.contains("ina-date-picker__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`)) {
+        } else if (target.classList.contains("ina-date-picker__year-nav-next")) {
           const currentYearRange = datepickerYearCurrent.textContent.split(" - ").map((y) => parseInt(y));
           const newStartYear = currentYearRange[0] + 20;
           const newEndYear = currentYearRange[1] + 20;
@@ -362,7 +362,7 @@ var InaUI = (() => {
       datepickerYearContent.addEventListener("click", (e) => {
         e.stopPropagation();
         const target = e.target;
-        if (target.classList.contains(`${PREFIX}-datepicker__year-item`)) {
+        if (target.classList.contains("ina-date-picker__year-item")) {
           const yearValue = parseInt(target.dataset.year);
           currentDate.setFullYear(yearValue);
           renderCalendar(currentDate.getFullYear(), currentDate.getMonth());
@@ -371,13 +371,13 @@ var InaUI = (() => {
       });
       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("ina-date-picker__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`
+              ".ina-date-picker__calendar-day.selected"
             );
             selectedDateEl?.classList.remove("selected");
             target.classList.add("selected");
@@ -1214,31 +1214,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

package/dist/index.js

@@ -108,7 +108,7 @@ function initAccordion(rootSelector = `.${PREFIX}-accordion`) {
 
 // src/js/components/stateful/datepicker.js
 function initDatepicker() {
-  document.querySelectorAll(`.${PREFIX}-datepicker`).forEach((datepicker) => {
+  document.querySelectorAll(".ina-date-picker").forEach((datepicker) => {
     let currentDate = /* @__PURE__ */ new Date();
     let selectedDateTarget = null;
     let selectedDate = null;
@@ -128,59 +128,59 @@ function initDatepicker() {
     ];
     const DAYS = ["Min", "Sen", "Sel", "Rab", "Kam", "Jum", "Sab"];
     const datepickerTrigger = datepicker.querySelector(
-      `.${PREFIX}-datepicker__trigger`
+      ".ina-date-picker__trigger"
     );
     const datepickerPopover = datepicker.querySelector(
-      `.${PREFIX}-datepicker__popover`
+      ".ina-date-picker__popover"
     );
     const datepickerMonthTrigger = datepicker.querySelector(
-      `.${PREFIX}-datepicker__month-trigger`
+      ".ina-date-picker__month-trigger"
     );
     const datepickerMonthPopover = datepicker.querySelector(
-      `.${PREFIX}-datepicker__month-popover`
+      ".ina-date-picker__month-popover"
     );
     const datepickerMonthItem = datepicker.querySelectorAll(
-      `.${PREFIX}-datepicker__month-item`
+      ".ina-date-picker__month-item"
     );
     const datepickerYearTrigger = datepicker.querySelector(
-      `.${PREFIX}-datepicker__year-trigger`
+      ".ina-date-picker__year-trigger"
     );
     const datepickerYearPopover = datepicker.querySelector(
-      `.${PREFIX}-datepicker__year-popover`
+      ".ina-date-picker__year-popover"
     );
     const datepickerYearPrevButton = datepicker.querySelector(
-      `.${PREFIX}-datepicker__year-nav-prev`
+      ".ina-date-picker__year-nav-prev"
     );
     const datepickerYearCurrent = datepicker.querySelector(
-      `.${PREFIX}-datepicker__year-current`
+      ".ina-date-picker__year-current"
     );
     const datepickerYearNextButton = datepicker.querySelector(
-      `.${PREFIX}-datepicker__year-nav-next`
+      ".ina-date-picker__year-nav-next"
     );
     const datepickerYearContent = datepicker.querySelector(
-      `.${PREFIX}-datepicker__year-content`
+      ".ina-date-picker__year-content"
     );
     const datepickerYearItem = datepicker.querySelectorAll(
-      `.${PREFIX}-datepicker__year-item`
+      ".ina-date-picker__year-item"
     );
     const datepickerContent = datepicker.querySelector(
-      `.${PREFIX}-datepicker__content`
+      ".ina-date-picker__content"
     );
     const prevMonthButton = datepicker.querySelector(
-      `.${PREFIX}-datepicker__nav-prev`
+      ".ina-date-picker__nav-prev"
     );
     const nextMonthButton = datepicker.querySelector(
-      `.${PREFIX}-datepicker__nav-next`
+      ".ina-date-picker__nav-next"
     );
     const datepickerSubmitButton = datepicker.querySelector(
-      `.${PREFIX}-datepicker__submit`
+      ".ina-date-picker__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.className = "ina-date-picker__year-item";
         yearEl.textContent = y;
         yearEl.dataset.year = y;
         if (y === currentDate.getFullYear()) {
@@ -195,9 +195,9 @@ function initDatepicker() {
       datepickerYearTrigger.textContent = year;
       DAYS.forEach((day) => {
         const dayNameWrapper = document.createElement("div");
-        dayNameWrapper.className = `${PREFIX}-datepicker__dayname-wrapper`;
+        dayNameWrapper.className = "ina-date-picker__dayname-wrapper";
         const dayNameEl = document.createElement("span");
-        dayNameEl.className = `${PREFIX}-datepicker__dayname`;
+        dayNameEl.className = "ina-date-picker__dayname";
         dayNameEl.textContent = day.substring(0, 3);
         dayNameWrapper.appendChild(dayNameEl);
         datepickerContent.appendChild(dayNameWrapper);
@@ -207,7 +207,7 @@ function initDatepicker() {
       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.className = "ina-date-picker__calendar-day outside-month";
         dayEl.textContent = daysInPrevMonth - firstDayOfMonth + 1 + i;
         dayEl.disabled = true;
         datepickerContent.appendChild(dayEl);
@@ -215,12 +215,12 @@ function initDatepicker() {
       const today = /* @__PURE__ */ new Date();
       for (let i = 1; i <= daysInMonth; i++) {
         const dayEl = document.createElement("button");
-        dayEl.className = `${PREFIX}-datepicker__calendar-day`;
+        dayEl.className = "ina-date-picker__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.className = "ina-date-picker__today-marker";
           marker.textContent = "Hari ini";
           dayEl.appendChild(marker);
           dayEl.classList.add("today");
@@ -235,7 +235,7 @@ function initDatepicker() {
       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.className = "ina-date-picker__calendar-day outside-month";
         dayEl.textContent = i;
         dayEl.disabled = true;
         datepickerContent.appendChild(dayEl);
@@ -243,7 +243,7 @@ function initDatepicker() {
       datepickerMonthPopover.innerHTML = "";
       MONTHS.forEach((monthName, index) => {
         const monthEl = document.createElement("button");
-        monthEl.className = `${PREFIX}-datepicker__month-item`;
+        monthEl.className = "ina-date-picker__month-item";
         monthEl.textContent = monthName.substring(0, 3);
         monthEl.dataset.month = index;
         if (index === month) {
@@ -257,7 +257,7 @@ function initDatepicker() {
       datepickerYearCurrent.textContent = `${startYear} - ${endYear}`;
       for (let y = startYear; y <= endYear; y++) {
         const yearEl = document.createElement("button");
-        yearEl.className = `${PREFIX}-datepicker__year-item`;
+        yearEl.className = "ina-date-picker__year-item";
         yearEl.textContent = y;
         yearEl.dataset.year = y;
         if (y === year) {
@@ -326,7 +326,7 @@ function initDatepicker() {
     datepickerMonthPopover.addEventListener("click", (e) => {
       e.stopPropagation();
       const target = e.target;
-      if (target.classList.contains(`${PREFIX}-datepicker__month-item`)) {
+      if (target.classList.contains("ina-date-picker__month-item")) {
         const monthIndex = parseInt(target.dataset.month);
         currentDate.setMonth(monthIndex);
         renderCalendar(currentDate.getFullYear(), currentDate.getMonth());
@@ -336,12 +336,12 @@ function initDatepicker() {
     datepickerYearPopover.addEventListener("click", (e) => {
       e.stopPropagation();
       const target = e.target;
-      if (target.classList.contains(`${PREFIX}-datepicker__year-nav-prev`)) {
+      if (target.classList.contains("ina-date-picker__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`)) {
+      } else if (target.classList.contains("ina-date-picker__year-nav-next")) {
         const currentYearRange = datepickerYearCurrent.textContent.split(" - ").map((y) => parseInt(y));
         const newStartYear = currentYearRange[0] + 20;
         const newEndYear = currentYearRange[1] + 20;
@@ -351,7 +351,7 @@ function initDatepicker() {
     datepickerYearContent.addEventListener("click", (e) => {
       e.stopPropagation();
       const target = e.target;
-      if (target.classList.contains(`${PREFIX}-datepicker__year-item`)) {
+      if (target.classList.contains("ina-date-picker__year-item")) {
         const yearValue = parseInt(target.dataset.year);
         currentDate.setFullYear(yearValue);
         renderCalendar(currentDate.getFullYear(), currentDate.getMonth());
@@ -360,13 +360,13 @@ function initDatepicker() {
     });
     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("ina-date-picker__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`
+            ".ina-date-picker__calendar-day.selected"
           );
           selectedDateEl?.classList.remove("selected");
           target.classList.add("selected");
@@ -1191,6 +1191,202 @@ if (typeof window !== void 0) {
   });
 }
 
+// src/js/components/stateful/timepicker.js
+function initTimepicker() {
+  const pickers = document.querySelectorAll(".ina-time-picker");
+  pickers.forEach((picker) => {
+    if (picker.dataset.initialized === "true") return;
+    picker.dataset.initialized = "true";
+    const input = picker.querySelector(".ina-time-picker__input");
+    const wrapper = picker.querySelector(".ina-time-picker__wrapper");
+    if (!input || !wrapper) return;
+    const format = picker.dataset.format || "HH:mm";
+    const use12Hours = picker.dataset.use12Hours === "true";
+    const showSecond = picker.dataset.showSecond === "true";
+    const disabled = picker.classList.contains("ina-time-picker--disabled");
+    const allowClear = picker.dataset.allowClear !== "false";
+    let isOpen = false;
+    let internalValue = input.value || "";
+    let panel = picker.querySelector(".ina-time-picker__panel");
+    if (!panel) {
+      panel = document.createElement("div");
+      panel.className = "ina-time-picker__panel";
+      panel.style.display = "none";
+      picker.appendChild(panel);
+    }
+    const content = document.createElement("div");
+    content.className = "ina-time-picker__content";
+    panel.appendChild(content);
+    const actions = document.createElement("div");
+    actions.className = "ina-time-picker__actions";
+    const confirmBtn = document.createElement("button");
+    confirmBtn.type = "button";
+    confirmBtn.className = "ina-time-picker__confirm-button";
+    confirmBtn.textContent = "Pilih";
+    actions.appendChild(confirmBtn);
+    panel.appendChild(actions);
+    const parseTime = (timeStr) => {
+      if (!timeStr) return { hours: 0, minutes: 0, seconds: 0, period: "AM" };
+      const parts = timeStr.split(":");
+      let hours = 0, minutes = 0, seconds = 0, period = "AM";
+      if (use12Hours) {
+        const timePart = timeStr.split(" ")[0];
+        const periodPart = timeStr.split(" ")[1] || "AM";
+        const tParts = timePart.split(":");
+        hours = parseInt(tParts[0] || "0", 10);
+        minutes = parseInt(tParts[1] || "0", 10);
+        seconds = parseInt(tParts[2] || "0", 10);
+        period = periodPart;
+      } else {
+        hours = parseInt(parts[0] || "0", 10);
+        minutes = parseInt(parts[1] || "0", 10);
+        seconds = parseInt(parts[2] || "0", 10);
+      }
+      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;
+        if (showSecond) {
+          return `${pad(displayHours)}:${pad(m)}:${pad(s)} ${p}`;
+        }
+        return `${pad(displayHours)}:${pad(m)} ${p}`;
+      } else {
+        if (showSecond) {
+          return `${pad(h)}:${pad(m)}:${pad(s)}`;
+        }
+        return `${pad(h)}:${pad(m)}`;
+      }
+    };
+    let currentTime = parseTime(internalValue);
+    const renderColumn = (type, max) => {
+      const column = document.createElement("div");
+      column.className = `ina-time-picker__column ina-time-picker__column--${type}`;
+      const colContent = document.createElement("div");
+      colContent.className = "ina-time-picker__column-content";
+      column.appendChild(colContent);
+      const start = type === "hour" && use12Hours ? 1 : 0;
+      const end = type === "hour" && use12Hours ? 12 : max - 1;
+      for (let i = start; i <= end; i++) {
+        const option = document.createElement("div");
+        option.className = "ina-time-picker__option";
+        option.textContent = i.toString().padStart(2, "0");
+        option.dataset.value = i;
+        let isSelected = false;
+        if (type === "hour") {
+          isSelected = currentTime.hours === i || use12Hours && currentTime.hours === 0 && i === 12;
+        } else if (type === "minute") {
+          isSelected = currentTime.minutes === i;
+        } else if (type === "second") {
+          isSelected = currentTime.seconds === i;
+        }
+        if (isSelected)
+          option.classList.add("ina-time-picker__option--selected");
+        option.addEventListener("click", (e) => {
+          e.stopPropagation();
+          const val = parseInt(option.dataset.value, 10);
+          if (type === "hour") currentTime.hours = val;
+          if (type === "minute") currentTime.minutes = val;
+          if (type === "second") currentTime.seconds = val;
+          updateInput();
+          colContent.querySelectorAll(".ina-time-picker__option").forEach(
+            (el) => el.classList.remove("ina-time-picker__option--selected")
+          );
+          option.classList.add("ina-time-picker__option--selected");
+        });
+        colContent.appendChild(option);
+      }
+      return column;
+    };
+    const renderPeriodColumn = () => {
+      const column = document.createElement("div");
+      column.className = `ina-time-picker__column ina-time-picker__column--period`;
+      const colContent = document.createElement("div");
+      colContent.className = "ina-time-picker__column-content";
+      column.appendChild(colContent);
+      ["AM", "PM"].forEach((p) => {
+        const option = document.createElement("div");
+        option.className = "ina-time-picker__option";
+        option.textContent = p;
+        if (currentTime.period === p)
+          option.classList.add("ina-time-picker__option--selected");
+        option.addEventListener("click", (e) => {
+          e.stopPropagation();
+          currentTime.period = p;
+          updateInput();
+          colContent.querySelectorAll(".ina-time-picker__option").forEach(
+            (el) => el.classList.remove("ina-time-picker__option--selected")
+          );
+          option.classList.add("ina-time-picker__option--selected");
+        });
+        colContent.appendChild(option);
+      });
+      return column;
+    };
+    const updateInput = () => {
+      const val = formatTime(
+        currentTime.hours,
+        currentTime.minutes,
+        currentTime.seconds,
+        currentTime.period
+      );
+      input.value = val;
+      picker.dataset.value = val;
+      input.dispatchEvent(new Event("change", { bubbles: true }));
+    };
+    const buildPanel = () => {
+      content.innerHTML = "";
+      content.appendChild(renderColumn("hour", use12Hours ? 13 : 24));
+      content.appendChild(renderColumn("minute", 60));
+      if (showSecond) content.appendChild(renderColumn("second", 60));
+      if (use12Hours) content.appendChild(renderPeriodColumn());
+    };
+    const open = () => {
+      if (disabled) return;
+      isOpen = true;
+      picker.classList.add("ina-time-picker--open");
+      panel.style.display = "block";
+      currentTime = parseTime(input.value);
+      buildPanel();
+    };
+    const close = () => {
+      isOpen = false;
+      picker.classList.remove("ina-time-picker--open");
+      panel.style.display = "none";
+    };
+    const toggle = (e) => {
+      e.stopPropagation();
+      if (isOpen) close();
+      else open();
+    };
+    wrapper.addEventListener("click", toggle);
+    document.addEventListener("click", (e) => {
+      if (!picker.contains(e.target)) {
+        close();
+      }
+    });
+    confirmBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      close();
+    });
+    input.addEventListener("change", () => {
+      currentTime = parseTime(input.value);
+    });
+    const clearBtn = picker.querySelector(".ina-time-picker__clear-button");
+    if (clearBtn && allowClear) {
+      clearBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        input.value = "";
+        currentTime = { hours: 0, minutes: 0, seconds: 0, period: "AM" };
+        picker.dataset.value = "";
+        input.dispatchEvent(new Event("change", { bubbles: true }));
+      });
+    }
+  });
+}
+
 // src/js/index.js
 var PREFIX = "ina-ss";
 function initAll() {
@@ -1206,6 +1402,7 @@ function initAll() {
   initRangeDatepicker();
   initTab();
   initToggle();
+  initTimepicker();
 }
 export {
   PREFIX,

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@idds/js",
-  "version": "1.0.34",
+  "version": "1.0.36",
   "publishConfig": {
     "access": "public"
   },
-  "description": "Design system JS",
+  "description": "Vanilla Javascript UI component library for INA Digital Design System",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "unpkg": "dist/index.iife.js",

package/readme.md

@@ -1,9 +1,9 @@
-# @idds/jss
+# @idds/js
 
-Sebuah pustaka styling yang siap di‑consume oleh berbagai proyek.
+Vanilla Javascript UI component library for INA Digital Design System
 
 ## Instalasi
 
 ```bash
-npm i @idds/jss
+npm i @idds/js
 ```