@idds/js 1.0.50 → 1.0.52

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.iife.js +143 -94
  2. package/dist/index.js +143 -94
  3. package/package.json +1 -1
package/dist/index.iife.js CHANGED
@@ -85,14 +85,28 @@ var InaUI = (() => {
85
85
  // src/js/components/stateless/accordion.js
86
86
  function initAccordion(rootSelector = `.${PREFIX}-accordion-group`) {
87
87
  const accordionGroups = document.querySelectorAll(rootSelector);
88
+ console.log(
89
+ "[InaUI] initAccordion called. Selector:",
90
+ rootSelector,
91
+ "Found groups:",
92
+ accordionGroups.length
93
+ );
88
94
  accordionGroups.forEach((group) => {
89
- const isMultiple = group.dataset.multipleOpen === "true" || group.dataset.behavior === "multiple";
95
+ const isMultiple = group.getAttribute("data-multiple-open") === "true" || group.getAttribute("data-behavior") === "multiple";
90
96
  const accordions = group.querySelectorAll(`:scope > .${PREFIX}-accordion`);
97
+ console.log("[InaUI] Found direct accordions in group:", accordions.length);
91
98
  accordions.forEach((accordion, _index) => {
92
99
  const toggle = accordion.querySelector(`.${PREFIX}-accordion__toggle`);
93
100
  const body = accordion.querySelector(`.${PREFIX}-accordion__content`);
94
- if (!toggle || !body) return;
101
+ if (!toggle || !body) {
102
+ console.warn(
103
+ "[InaUI] Accordion item missing toggle or body",
104
+ accordion
105
+ );
106
+ return;
107
+ }
95
108
  toggle.addEventListener("click", (e) => {
109
+ console.log("[InaUI] Accordion toggle clicked");
96
110
  e.stopPropagation();
97
111
  const isOpen = accordion.classList.contains(
98
112
  `${PREFIX}-accordion--open`
@@ -151,6 +165,10 @@ var InaUI = (() => {
151
165
  const icon = toggle.querySelector(`.${PREFIX}-accordion__icon`);
152
166
  if (icon) icon.classList.add(`${PREFIX}-accordion__icon--open`);
153
167
  body.classList.add(`${PREFIX}-accordion__content--open`);
168
+ if (body) {
169
+ console.log("[InaUI] Setting maxHeight to", body.scrollHeight);
170
+ body.style.maxHeight = `${body.scrollHeight}px`;
171
+ }
154
172
  }
155
173
  function closeItem(accordion, toggle, body) {
156
174
  accordion.classList.remove(`${PREFIX}-accordion--open`);
@@ -158,30 +176,41 @@ var InaUI = (() => {
158
176
  const icon = toggle.querySelector(`.${PREFIX}-accordion__icon`);
159
177
  if (icon) icon.classList.remove(`${PREFIX}-accordion__icon--open`);
160
178
  body.classList.remove(`${PREFIX}-accordion__content--open`);
179
+ if (body) {
180
+ body.style.maxHeight = null;
181
+ }
161
182
  }
162
183
 
163
184
  // src/js/components/stateful/datepicker.js
164
185
  function initDatepicker() {
165
- document.querySelectorAll(".ina-date-picker").forEach((datepicker) => {
186
+ document.querySelectorAll(`.${PREFIX}-date-picker`).forEach((datepicker) => {
166
187
  if (datepicker.dataset.initialized === "true") return;
167
188
  datepicker.dataset.initialized = "true";
168
189
  const mode = datepicker.dataset.mode || "single";
169
190
  const format = datepicker.dataset.format || "DD/MM/YYYY";
170
- const trigger = datepicker.querySelector(".ina-date-picker__trigger");
171
- const triggerText = trigger.querySelector(".ina-date-picker__trigger-text");
172
- const panel = datepicker.querySelector(".ina-date-picker__panel");
191
+ const trigger = datepicker.querySelector(`.${PREFIX}-date-picker__trigger`);
192
+ const triggerText = trigger.querySelector(
193
+ `.${PREFIX}-date-picker__trigger-text`
194
+ );
195
+ const panel = datepicker.querySelector(`.${PREFIX}-date-picker__panel`);
173
196
  panel.style.display = "none";
174
- let panelContent = panel.querySelector(".ina-date-picker__panel-content");
197
+ let panelContent = panel.querySelector(
198
+ `.${PREFIX}-date-picker__panel-content`
199
+ );
175
200
  if (!panelContent) {
176
201
  panelContent = document.createElement("div");
177
- panelContent.className = "ina-date-picker__panel-content";
202
+ panelContent.className = `${PREFIX}-date-picker__panel-content`;
178
203
  if (mode === "range" || mode === "multiple") {
179
- panelContent.classList.add("ina-date-picker__panel-content--dual");
204
+ panelContent.classList.add(
205
+ `${PREFIX}-date-picker__panel-content--dual`
206
+ );
180
207
  }
181
208
  panel.appendChild(panelContent);
182
209
  } else {
183
210
  if (mode === "range" || mode === "multiple") {
184
- panelContent.classList.add("ina-date-picker__panel-content--dual");
211
+ panelContent.classList.add(
212
+ `${PREFIX}-date-picker__panel-content--dual`
213
+ );
185
214
  }
186
215
  }
187
216
  let viewDate = /* @__PURE__ */ new Date();
@@ -229,15 +258,19 @@ var InaUI = (() => {
229
258
  if (mode === "single") {
230
259
  if (selectedDate) {
231
260
  triggerText.textContent = formatDate(selectedDate);
232
- triggerText.classList.add("ina-date-picker__trigger-text--value");
261
+ triggerText.classList.add(
262
+ `${PREFIX}-date-picker__trigger-text--value`
263
+ );
233
264
  triggerText.classList.remove(
234
- "ina-date-picker__trigger-text--placeholder"
265
+ `${PREFIX}-date-picker__trigger-text--placeholder`
235
266
  );
236
267
  } else {
237
268
  triggerText.textContent = "Pilih Tanggal";
238
- triggerText.classList.remove("ina-date-picker__trigger-text--value");
269
+ triggerText.classList.remove(
270
+ `${PREFIX}-date-picker__trigger-text--value`
271
+ );
239
272
  triggerText.classList.add(
240
- "ina-date-picker__trigger-text--placeholder"
273
+ `${PREFIX}-date-picker__trigger-text--placeholder`
241
274
  );
242
275
  }
243
276
  } else if (mode === "range") {
@@ -245,32 +278,42 @@ var InaUI = (() => {
245
278
  const start = formatDate(rangeDate[0]);
246
279
  const end = formatDate(rangeDate[1]);
247
280
  triggerText.textContent = `${start} - ${end}`;
248
- triggerText.classList.add("ina-date-picker__trigger-text--value");
281
+ triggerText.classList.add(
282
+ `${PREFIX}-date-picker__trigger-text--value`
283
+ );
249
284
  triggerText.classList.remove(
250
- "ina-date-picker__trigger-text--placeholder"
285
+ `${PREFIX}-date-picker__trigger-text--placeholder`
251
286
  );
252
287
  } else if (rangeDate[0]) {
253
288
  triggerText.textContent = `${formatDate(rangeDate[0])} - ...`;
254
- triggerText.classList.add("ina-date-picker__trigger-text--value");
289
+ triggerText.classList.add(
290
+ `${PREFIX}-date-picker__trigger-text--value`
291
+ );
255
292
  } else {
256
293
  triggerText.textContent = "Pilih Rentang Tanggal";
257
- triggerText.classList.remove("ina-date-picker__trigger-text--value");
294
+ triggerText.classList.remove(
295
+ `${PREFIX}-date-picker__trigger-text--value`
296
+ );
258
297
  triggerText.classList.add(
259
- "ina-date-picker__trigger-text--placeholder"
298
+ `${PREFIX}-date-picker__trigger-text--placeholder`
260
299
  );
261
300
  }
262
301
  } else if (mode === "multiple") {
263
302
  if (selectedDates.length > 0) {
264
303
  triggerText.textContent = `${selectedDates.length} Tanggal Terpilih`;
265
- triggerText.classList.add("ina-date-picker__trigger-text--value");
304
+ triggerText.classList.add(
305
+ `${PREFIX}-date-picker__trigger-text--value`
306
+ );
266
307
  triggerText.classList.remove(
267
- "ina-date-picker__trigger-text--placeholder"
308
+ `${PREFIX}-date-picker__trigger-text--placeholder`
268
309
  );
269
310
  } else {
270
311
  triggerText.textContent = "Pilih Beberapa Tanggal";
271
- triggerText.classList.remove("ina-date-picker__trigger-text--value");
312
+ triggerText.classList.remove(
313
+ `${PREFIX}-date-picker__trigger-text--value`
314
+ );
272
315
  triggerText.classList.add(
273
- "ina-date-picker__trigger-text--placeholder"
316
+ `${PREFIX}-date-picker__trigger-text--placeholder`
274
317
  );
275
318
  }
276
319
  }
@@ -284,26 +327,26 @@ var InaUI = (() => {
284
327
  }
285
328
  function createMonthPicker(initialMonth, onChange) {
286
329
  const container = document.createElement("div");
287
- container.className = "ina-month-picker";
330
+ container.className = `${PREFIX}-month-picker`;
288
331
  let currentMonthIdx = initialMonth;
289
332
  let isPickerOpen = false;
290
333
  const pickerTrigger = document.createElement("button");
291
334
  pickerTrigger.type = "button";
292
- pickerTrigger.className = "ina-month-picker__trigger ina-month-picker__trigger--size-sm";
335
+ pickerTrigger.className = `${PREFIX}-month-picker__trigger ${PREFIX}-month-picker__trigger--size-sm`;
293
336
  const updateText = () => {
294
- pickerTrigger.innerHTML = `<span class="ina-month-picker__trigger-text">${MONTHS_SHORT_ID[currentMonthIdx]}</span>`;
337
+ pickerTrigger.innerHTML = `<span class="${PREFIX}-month-picker__trigger-text">${MONTHS_SHORT_ID[currentMonthIdx]}</span>`;
295
338
  };
296
339
  updateText();
297
340
  const pickerPanel = document.createElement("div");
298
- pickerPanel.className = "ina-month-picker__panel";
341
+ pickerPanel.className = `${PREFIX}-month-picker__panel`;
299
342
  const grid = document.createElement("div");
300
- grid.className = "ina-month-picker__grid";
343
+ grid.className = `${PREFIX}-month-picker__grid`;
301
344
  MONTHS_SHORT_ID.forEach((m, idx) => {
302
345
  const btn = document.createElement("button");
303
346
  btn.type = "button";
304
- btn.className = "ina-month-picker__month-option";
347
+ btn.className = `${PREFIX}-month-picker__month-option`;
305
348
  if (idx === currentMonthIdx)
306
- btn.classList.add("ina-month-picker__month-option--selected");
349
+ btn.classList.add(`${PREFIX}-month-picker__month-option--selected`);
307
350
  btn.textContent = m;
308
351
  btn.addEventListener("click", (e) => {
309
352
  e.stopPropagation();
@@ -322,10 +365,10 @@ var InaUI = (() => {
322
365
  function togglePicker(show) {
323
366
  isPickerOpen = show;
324
367
  if (show) {
325
- pickerPanel.classList.add("ina-month-picker__panel--open");
368
+ pickerPanel.classList.add(`${PREFIX}-month-picker__panel--open`);
326
369
  pickerTrigger.setAttribute("aria-expanded", "true");
327
370
  } else {
328
- pickerPanel.classList.remove("ina-month-picker__panel--open");
371
+ pickerPanel.classList.remove(`${PREFIX}-month-picker__panel--open`);
329
372
  pickerTrigger.setAttribute("aria-expanded", "false");
330
373
  }
331
374
  }
@@ -342,24 +385,24 @@ var InaUI = (() => {
342
385
  }
343
386
  function createYearPicker(initialYear, onChange) {
344
387
  const container = document.createElement("div");
345
- container.className = "ina-year-picker";
388
+ container.className = `${PREFIX}-year-picker`;
346
389
  let currentYearVal = initialYear;
347
390
  let isPickerOpen = false;
348
391
  let decadeStart = Math.floor(initialYear / 20) * 20;
349
392
  const pickerTrigger = document.createElement("button");
350
393
  pickerTrigger.type = "button";
351
- pickerTrigger.className = "ina-year-picker__trigger ina-year-picker__trigger--size-sm";
394
+ pickerTrigger.className = `${PREFIX}-year-picker__trigger ${PREFIX}-year-picker__trigger--size-sm`;
352
395
  const updateText = () => {
353
- pickerTrigger.innerHTML = `<span class="ina-year-picker__trigger-text">${currentYearVal}</span>`;
396
+ pickerTrigger.innerHTML = `<span class="${PREFIX}-year-picker__trigger-text">${currentYearVal}</span>`;
354
397
  };
355
398
  updateText();
356
399
  const pickerPanel = document.createElement("div");
357
- pickerPanel.className = "ina-year-picker__panel";
400
+ pickerPanel.className = `${PREFIX}-year-picker__panel`;
358
401
  const header = document.createElement("div");
359
- header.className = "ina-year-picker__header";
402
+ header.className = `${PREFIX}-year-picker__header`;
360
403
  const prevBtn = document.createElement("button");
361
404
  prevBtn.type = "button";
362
- prevBtn.className = "ina-year-picker__nav-button";
405
+ prevBtn.className = `${PREFIX}-year-picker__nav-button`;
363
406
  prevBtn.innerHTML = createIcon("chevron-left");
364
407
  prevBtn.onclick = (e) => {
365
408
  decadeStart -= 20;
@@ -367,26 +410,26 @@ var InaUI = (() => {
367
410
  };
368
411
  const nextBtn = document.createElement("button");
369
412
  nextBtn.type = "button";
370
- nextBtn.className = "ina-year-picker__nav-button";
413
+ nextBtn.className = `${PREFIX}-year-picker__nav-button`;
371
414
  nextBtn.innerHTML = createIcon("chevron-right");
372
415
  nextBtn.onclick = (e) => {
373
416
  decadeStart += 20;
374
417
  renderGrid();
375
418
  };
376
419
  const rangeText = document.createElement("span");
377
- rangeText.className = "ina-year-picker__decade-range";
420
+ rangeText.className = `${PREFIX}-year-picker__decade-range`;
378
421
  header.append(prevBtn, rangeText, nextBtn);
379
422
  const grid = document.createElement("div");
380
- grid.className = "ina-year-picker__grid";
423
+ grid.className = `${PREFIX}-year-picker__grid`;
381
424
  function renderGrid() {
382
425
  grid.innerHTML = "";
383
426
  rangeText.textContent = `${decadeStart} - ${decadeStart + 19}`;
384
427
  for (let y = decadeStart; y < decadeStart + 20; y++) {
385
428
  const btn = document.createElement("button");
386
429
  btn.type = "button";
387
- btn.className = "ina-year-picker__year-option";
430
+ btn.className = `${PREFIX}-year-picker__year-option`;
388
431
  if (y === currentYearVal)
389
- btn.classList.add("ina-year-picker__year-option--selected");
432
+ btn.classList.add(`${PREFIX}-year-picker__year-option--selected`);
390
433
  btn.textContent = y;
391
434
  btn.addEventListener("click", (e) => {
392
435
  e.stopPropagation();
@@ -408,9 +451,9 @@ var InaUI = (() => {
408
451
  if (show) {
409
452
  decadeStart = Math.floor(currentYearVal / 20) * 20;
410
453
  renderGrid();
411
- pickerPanel.classList.add("ina-year-picker__panel--open");
454
+ pickerPanel.classList.add(`${PREFIX}-year-picker__panel--open`);
412
455
  } else {
413
- pickerPanel.classList.remove("ina-year-picker__panel--open");
456
+ pickerPanel.classList.remove(`${PREFIX}-year-picker__panel--open`);
414
457
  }
415
458
  }
416
459
  document.addEventListener("click", (e) => {
@@ -429,16 +472,16 @@ var InaUI = (() => {
429
472
  const month = baseDate.getMonth();
430
473
  const container = document.createElement("div");
431
474
  if (!isNextMonth) {
432
- container.className = "ina-date-picker__calendar-container";
475
+ container.className = `${PREFIX}-date-picker__calendar-container`;
433
476
  } else {
434
- container.className = "ina-date-picker__calendar";
477
+ container.className = `${PREFIX}-date-picker__calendar`;
435
478
  }
436
479
  const header = document.createElement("div");
437
- header.className = isNextMonth ? "ina-date-picker__next-month-header" : "ina-date-picker__calendar-header";
480
+ header.className = isNextMonth ? `${PREFIX}-date-picker__next-month-header` : `${PREFIX}-date-picker__calendar-header`;
438
481
  if (!isNextMonth) {
439
482
  const prevBtn = document.createElement("button");
440
483
  prevBtn.type = "button";
441
- prevBtn.className = "ina-date-picker__nav-button";
484
+ prevBtn.className = `${PREFIX}-date-picker__nav-button`;
442
485
  prevBtn.innerHTML = createIcon("chevron-left");
443
486
  prevBtn.onclick = (e) => {
444
487
  e.stopPropagation();
@@ -452,10 +495,10 @@ var InaUI = (() => {
452
495
  header.appendChild(spacer);
453
496
  }
454
497
  const controls = document.createElement("div");
455
- controls.className = isNextMonth ? "ina-date-picker__next-month-controls" : "ina-date-picker__header-controls";
456
- controls.className = "ina-date-picker__header-controls";
498
+ controls.className = isNextMonth ? `${PREFIX}-date-picker__next-month-controls` : `${PREFIX}-date-picker__header-controls`;
499
+ controls.className = `${PREFIX}-date-picker__header-controls`;
457
500
  const monthCont = document.createElement("div");
458
- monthCont.className = "ina-date-picker__dropdown-container";
501
+ monthCont.className = `${PREFIX}-date-picker__dropdown-container`;
459
502
  const monthPicker = createMonthPicker(month, (m) => {
460
503
  if (isNextMonth) {
461
504
  viewDate = new Date(year, m - 1, 1);
@@ -466,7 +509,7 @@ var InaUI = (() => {
466
509
  });
467
510
  monthCont.appendChild(monthPicker.element);
468
511
  const yearCont = document.createElement("div");
469
- yearCont.className = "ina-date-picker__dropdown-container";
512
+ yearCont.className = `${PREFIX}-date-picker__dropdown-container`;
470
513
  const yearPicker = createYearPicker(year, (y) => {
471
514
  if (isNextMonth) {
472
515
  viewDate = new Date(y, month - 1, 1);
@@ -482,7 +525,7 @@ var InaUI = (() => {
482
525
  if (showNextBtn) {
483
526
  const nextBtn = document.createElement("button");
484
527
  nextBtn.type = "button";
485
- nextBtn.className = "ina-date-picker__nav-button";
528
+ nextBtn.className = `${PREFIX}-date-picker__nav-button`;
486
529
  nextBtn.innerHTML = createIcon("chevron-right");
487
530
  nextBtn.onclick = (e) => {
488
531
  e.stopPropagation();
@@ -496,10 +539,10 @@ var InaUI = (() => {
496
539
  header.appendChild(spacer);
497
540
  }
498
541
  const grid = document.createElement("div");
499
- grid.className = "ina-date-picker__calendar-grid";
542
+ grid.className = `${PREFIX}-date-picker__calendar-grid`;
500
543
  DAYS_SHORT.forEach((d) => {
501
544
  const dh = document.createElement("div");
502
- dh.className = "ina-date-picker__day-header";
545
+ dh.className = `${PREFIX}-date-picker__day-header`;
503
546
  dh.textContent = d;
504
547
  grid.appendChild(dh);
505
548
  });
@@ -510,7 +553,7 @@ var InaUI = (() => {
510
553
  for (let i = firstDayOfMonth - 1; i >= 0; i--) {
511
554
  const btn = document.createElement("button");
512
555
  btn.type = "button";
513
- btn.className = "ina-date-picker__day ina-date-picker__day--other-month ina-date-picker__day--disabled";
556
+ btn.className = `${PREFIX}-date-picker__day ${PREFIX}-date-picker__day--other-month ${PREFIX}-date-picker__day--disabled`;
514
557
  btn.textContent = daysInPrevMonth - i;
515
558
  grid.appendChild(btn);
516
559
  }
@@ -518,7 +561,7 @@ var InaUI = (() => {
518
561
  const date = new Date(year, month, i);
519
562
  const btn = document.createElement("button");
520
563
  btn.type = "button";
521
- btn.className = "ina-date-picker__day";
564
+ btn.className = `${PREFIX}-date-picker__day`;
522
565
  btn.textContent = i;
523
566
  let isSelected = false;
524
567
  let isInRange = false;
@@ -536,12 +579,14 @@ var InaUI = (() => {
536
579
  isSelected = true;
537
580
  if (start && end && date > start && date < end) isInRange = true;
538
581
  }
539
- if (isSelected) btn.classList.add("ina-date-picker__day--selected");
540
- if (isInRange) btn.classList.add("ina-date-picker__day--in-range");
582
+ if (isSelected)
583
+ btn.classList.add(`${PREFIX}-date-picker__day--selected`);
584
+ if (isInRange)
585
+ btn.classList.add(`${PREFIX}-date-picker__day--in-range`);
541
586
  if (date.toDateString() === today.toDateString())
542
- btn.classList.add("ina-date-picker__day--today");
587
+ btn.classList.add(`${PREFIX}-date-picker__day--today`);
543
588
  if (!isSelected && !isInRange)
544
- btn.classList.add("ina-date-picker__day--hover");
589
+ btn.classList.add(`${PREFIX}-date-picker__day--hover`);
545
590
  btn.onclick = (e) => {
546
591
  e.stopPropagation();
547
592
  if (mode === "single") {
@@ -586,7 +631,7 @@ var InaUI = (() => {
586
631
  for (let i = 1; i <= remaining; i++) {
587
632
  const btn = document.createElement("button");
588
633
  btn.type = "button";
589
- btn.className = "ina-date-picker__day ina-date-picker__day--other-month ina-date-picker__day--disabled";
634
+ btn.className = `${PREFIX}-date-picker__day ${PREFIX}-date-picker__day--other-month ${PREFIX}-date-picker__day--disabled`;
590
635
  btn.textContent = i;
591
636
  grid.appendChild(btn);
592
637
  }
@@ -609,13 +654,13 @@ var InaUI = (() => {
609
654
  }
610
655
  function open() {
611
656
  isOpen = true;
612
- panel.classList.add("ina-date-picker__panel--open");
657
+ panel.classList.add(`${PREFIX}-date-picker__panel--open`);
613
658
  panel.style.display = "block";
614
659
  render();
615
660
  }
616
661
  function close() {
617
662
  isOpen = false;
618
- panel.classList.remove("ina-date-picker__panel--open");
663
+ panel.classList.remove(`${PREFIX}-date-picker__panel--open`);
619
664
  panel.style.display = "none";
620
665
  }
621
666
  function toggle() {
@@ -1055,41 +1100,43 @@ var InaUI = (() => {
1055
1100
 
1056
1101
  // src/js/components/stateful/timepicker.js
1057
1102
  function initTimepicker() {
1058
- document.querySelectorAll(".ina-time-picker").forEach((picker) => {
1103
+ document.querySelectorAll(`.${PREFIX}-time-picker`).forEach((picker) => {
1059
1104
  if (picker.dataset.initialized === "true") return;
1060
1105
  picker.dataset.initialized = "true";
1061
- const input = picker.querySelector(".ina-time-picker__input");
1062
- const wrapper = picker.querySelector(".ina-time-picker__wrapper");
1106
+ const input = picker.querySelector(`.${PREFIX}-time-picker__input`);
1107
+ const wrapper = picker.querySelector(`.${PREFIX}-time-picker__wrapper`);
1063
1108
  if (!input || !wrapper) return;
1064
1109
  const format = picker.dataset.format || "HH:mm";
1065
1110
  const use12Hours = picker.dataset.use12Hours === "true" || picker.getAttribute("data-use-12-hours") === "true" || /a/i.test(format);
1066
1111
  const showSecond = picker.dataset.showSecond === "true";
1067
- const disabled = picker.classList.contains("ina-time-picker--disabled");
1112
+ const disabled = picker.classList.contains(
1113
+ `${PREFIX}-time-picker--disabled`
1114
+ );
1068
1115
  const allowClear = picker.dataset.allowClear !== "false";
1069
1116
  let isOpen = false;
1070
1117
  let internalValue = input.value || "";
1071
- let panel = picker.querySelector(".ina-time-picker__panel");
1118
+ let panel = picker.querySelector(`.${PREFIX}-time-picker__panel`);
1072
1119
  if (!panel) {
1073
1120
  panel = document.createElement("div");
1074
- panel.className = "ina-time-picker__panel";
1121
+ panel.className = `${PREFIX}-time-picker__panel`;
1075
1122
  panel.style.display = "none";
1076
1123
  picker.appendChild(panel);
1077
1124
  }
1078
- let content = panel.querySelector(".ina-time-picker__content");
1125
+ let content = panel.querySelector(`.${PREFIX}-time-picker__content`);
1079
1126
  if (!content) {
1080
1127
  content = document.createElement("div");
1081
- content.className = "ina-time-picker__content";
1128
+ content.className = `${PREFIX}-time-picker__content`;
1082
1129
  panel.appendChild(content);
1083
1130
  } else {
1084
1131
  content.innerHTML = "";
1085
1132
  }
1086
- let actions = panel.querySelector(".ina-time-picker__actions");
1133
+ let actions = panel.querySelector(`.${PREFIX}-time-picker__actions`);
1087
1134
  if (!actions) {
1088
1135
  actions = document.createElement("div");
1089
- actions.className = "ina-time-picker__actions";
1136
+ actions.className = `${PREFIX}-time-picker__actions`;
1090
1137
  const confirmBtn = document.createElement("button");
1091
1138
  confirmBtn.type = "button";
1092
- confirmBtn.className = "ina-time-picker__confirm-button";
1139
+ confirmBtn.className = `${PREFIX}-time-picker__confirm-button`;
1093
1140
  confirmBtn.textContent = "Pilih";
1094
1141
  confirmBtn.onclick = (e) => {
1095
1142
  e.stopPropagation();
@@ -1137,15 +1184,15 @@ var InaUI = (() => {
1137
1184
  let currentTime = parseTime(internalValue);
1138
1185
  const renderColumn = (type, max) => {
1139
1186
  const column = document.createElement("div");
1140
- column.className = `ina-time-picker__column ina-time-picker__column--${type}`;
1187
+ column.className = `${PREFIX}-time-picker__column ${PREFIX}-time-picker__column--${type}`;
1141
1188
  const colContent = document.createElement("div");
1142
- colContent.className = "ina-time-picker__column-content";
1189
+ colContent.className = `${PREFIX}-time-picker__column-content`;
1143
1190
  column.appendChild(colContent);
1144
1191
  const start = type === "hour" && use12Hours ? 1 : 0;
1145
1192
  const end = type === "hour" && use12Hours ? 12 : max - 1;
1146
1193
  for (let i = start; i <= end; i++) {
1147
1194
  const option = document.createElement("div");
1148
- option.className = "ina-time-picker__option";
1195
+ option.className = `${PREFIX}-time-picker__option`;
1149
1196
  option.textContent = i.toString().padStart(2, "0");
1150
1197
  option.dataset.value = i;
1151
1198
  let isSelected = false;
@@ -1154,7 +1201,7 @@ var InaUI = (() => {
1154
1201
  } else if (type === "minute") isSelected = currentTime.minutes === i;
1155
1202
  else if (type === "second") isSelected = currentTime.seconds === i;
1156
1203
  if (isSelected)
1157
- option.classList.add("ina-time-picker__option--selected");
1204
+ option.classList.add(`${PREFIX}-time-picker__option--selected`);
1158
1205
  option.addEventListener("click", (e) => {
1159
1206
  e.stopPropagation();
1160
1207
  const val = parseInt(option.dataset.value, 10);
@@ -1164,10 +1211,10 @@ var InaUI = (() => {
1164
1211
  if (type === "minute") currentTime.minutes = val;
1165
1212
  if (type === "second") currentTime.seconds = val;
1166
1213
  updateInput();
1167
- colContent.querySelectorAll(".ina-time-picker__option").forEach(
1168
- (el) => el.classList.remove("ina-time-picker__option--selected")
1214
+ colContent.querySelectorAll(`.${PREFIX}-time-picker__option`).forEach(
1215
+ (el) => el.classList.remove(`${PREFIX}-time-picker__option--selected`)
1169
1216
  );
1170
- option.classList.add("ina-time-picker__option--selected");
1217
+ option.classList.add(`${PREFIX}-time-picker__option--selected`);
1171
1218
  });
1172
1219
  colContent.appendChild(option);
1173
1220
  }
@@ -1175,24 +1222,24 @@ var InaUI = (() => {
1175
1222
  };
1176
1223
  const renderPeriodColumn = () => {
1177
1224
  const column = document.createElement("div");
1178
- column.className = `ina-time-picker__column ina-time-picker__column--period`;
1225
+ column.className = `${PREFIX}-time-picker__column ${PREFIX}-time-picker__column--period`;
1179
1226
  const colContent = document.createElement("div");
1180
- colContent.className = "ina-time-picker__column-content";
1227
+ colContent.className = `${PREFIX}-time-picker__column-content`;
1181
1228
  column.appendChild(colContent);
1182
1229
  ["AM", "PM"].forEach((p) => {
1183
1230
  const option = document.createElement("div");
1184
- option.className = "ina-time-picker__option";
1231
+ option.className = `${PREFIX}-time-picker__option`;
1185
1232
  option.textContent = p;
1186
1233
  if (currentTime.period === p)
1187
- option.classList.add("ina-time-picker__option--selected");
1234
+ option.classList.add(`${PREFIX}-time-picker__option--selected`);
1188
1235
  option.addEventListener("click", (e) => {
1189
1236
  e.stopPropagation();
1190
1237
  currentTime.period = p;
1191
1238
  updateInput();
1192
- colContent.querySelectorAll(".ina-time-picker__option").forEach(
1193
- (el) => el.classList.remove("ina-time-picker__option--selected")
1239
+ colContent.querySelectorAll(`.${PREFIX}-time-picker__option`).forEach(
1240
+ (el) => el.classList.remove(`${PREFIX}-time-picker__option--selected`)
1194
1241
  );
1195
- option.classList.add("ina-time-picker__option--selected");
1242
+ option.classList.add(`${PREFIX}-time-picker__option--selected`);
1196
1243
  });
1197
1244
  colContent.appendChild(option);
1198
1245
  });
@@ -1219,7 +1266,7 @@ var InaUI = (() => {
1219
1266
  const open = () => {
1220
1267
  if (disabled) return;
1221
1268
  isOpen = true;
1222
- picker.classList.add("ina-time-picker--open");
1269
+ picker.classList.add(`${PREFIX}-time-picker--open`);
1223
1270
  panel.style.display = "block";
1224
1271
  currentTime = parseTime(input.value);
1225
1272
  buildPanel();
@@ -1229,7 +1276,7 @@ var InaUI = (() => {
1229
1276
  };
1230
1277
  const close = () => {
1231
1278
  isOpen = false;
1232
- picker.classList.remove("ina-time-picker--open");
1279
+ picker.classList.remove(`${PREFIX}-time-picker--open`);
1233
1280
  panel.style.display = "none";
1234
1281
  };
1235
1282
  const toggle = (e) => {
@@ -1246,7 +1293,9 @@ var InaUI = (() => {
1246
1293
  document.addEventListener("closeTimePicker", (e) => {
1247
1294
  if (e.detail && e.detail.exclude !== picker) close();
1248
1295
  });
1249
- const clearBtn = picker.querySelector(".ina-time-picker__clear-button");
1296
+ const clearBtn = picker.querySelector(
1297
+ `.${PREFIX}-time-picker__clear-button`
1298
+ );
1250
1299
  if (clearBtn && allowClear) {
1251
1300
  clearBtn.addEventListener("click", (e) => {
1252
1301
  e.stopPropagation();
@@ -1260,7 +1309,7 @@ var InaUI = (() => {
1260
1309
  }
1261
1310
 
1262
1311
  // src/js/index.js
1263
- var PREFIX = "ina-ss";
1312
+ var PREFIX = "ina";
1264
1313
 
1265
1314
  // src/js/components/stateful/button-group.js
1266
1315
  function initButtonGroup(rootSelector = `.${PREFIX}-btn-group`) {
package/dist/index.js CHANGED
@@ -73,14 +73,28 @@ function initToggle(rootSelector = `.${PREFIX}-toggle`) {
73
73
  // src/js/components/stateless/accordion.js
74
74
  function initAccordion(rootSelector = `.${PREFIX}-accordion-group`) {
75
75
  const accordionGroups = document.querySelectorAll(rootSelector);
76
+ console.log(
77
+ "[InaUI] initAccordion called. Selector:",
78
+ rootSelector,
79
+ "Found groups:",
80
+ accordionGroups.length
81
+ );
76
82
  accordionGroups.forEach((group) => {
77
- const isMultiple = group.dataset.multipleOpen === "true" || group.dataset.behavior === "multiple";
83
+ const isMultiple = group.getAttribute("data-multiple-open") === "true" || group.getAttribute("data-behavior") === "multiple";
78
84
  const accordions = group.querySelectorAll(`:scope > .${PREFIX}-accordion`);
85
+ console.log("[InaUI] Found direct accordions in group:", accordions.length);
79
86
  accordions.forEach((accordion, _index) => {
80
87
  const toggle = accordion.querySelector(`.${PREFIX}-accordion__toggle`);
81
88
  const body = accordion.querySelector(`.${PREFIX}-accordion__content`);
82
- if (!toggle || !body) return;
89
+ if (!toggle || !body) {
90
+ console.warn(
91
+ "[InaUI] Accordion item missing toggle or body",
92
+ accordion
93
+ );
94
+ return;
95
+ }
83
96
  toggle.addEventListener("click", (e) => {
97
+ console.log("[InaUI] Accordion toggle clicked");
84
98
  e.stopPropagation();
85
99
  const isOpen = accordion.classList.contains(
86
100
  `${PREFIX}-accordion--open`
@@ -139,6 +153,10 @@ function openItem(accordion, toggle, body) {
139
153
  const icon = toggle.querySelector(`.${PREFIX}-accordion__icon`);
140
154
  if (icon) icon.classList.add(`${PREFIX}-accordion__icon--open`);
141
155
  body.classList.add(`${PREFIX}-accordion__content--open`);
156
+ if (body) {
157
+ console.log("[InaUI] Setting maxHeight to", body.scrollHeight);
158
+ body.style.maxHeight = `${body.scrollHeight}px`;
159
+ }
142
160
  }
143
161
  function closeItem(accordion, toggle, body) {
144
162
  accordion.classList.remove(`${PREFIX}-accordion--open`);
@@ -146,30 +164,41 @@ function closeItem(accordion, toggle, body) {
146
164
  const icon = toggle.querySelector(`.${PREFIX}-accordion__icon`);
147
165
  if (icon) icon.classList.remove(`${PREFIX}-accordion__icon--open`);
148
166
  body.classList.remove(`${PREFIX}-accordion__content--open`);
167
+ if (body) {
168
+ body.style.maxHeight = null;
169
+ }
149
170
  }
150
171
 
151
172
  // src/js/components/stateful/datepicker.js
152
173
  function initDatepicker() {
153
- document.querySelectorAll(".ina-date-picker").forEach((datepicker) => {
174
+ document.querySelectorAll(`.${PREFIX}-date-picker`).forEach((datepicker) => {
154
175
  if (datepicker.dataset.initialized === "true") return;
155
176
  datepicker.dataset.initialized = "true";
156
177
  const mode = datepicker.dataset.mode || "single";
157
178
  const format = datepicker.dataset.format || "DD/MM/YYYY";
158
- const trigger = datepicker.querySelector(".ina-date-picker__trigger");
159
- const triggerText = trigger.querySelector(".ina-date-picker__trigger-text");
160
- const panel = datepicker.querySelector(".ina-date-picker__panel");
179
+ const trigger = datepicker.querySelector(`.${PREFIX}-date-picker__trigger`);
180
+ const triggerText = trigger.querySelector(
181
+ `.${PREFIX}-date-picker__trigger-text`
182
+ );
183
+ const panel = datepicker.querySelector(`.${PREFIX}-date-picker__panel`);
161
184
  panel.style.display = "none";
162
- let panelContent = panel.querySelector(".ina-date-picker__panel-content");
185
+ let panelContent = panel.querySelector(
186
+ `.${PREFIX}-date-picker__panel-content`
187
+ );
163
188
  if (!panelContent) {
164
189
  panelContent = document.createElement("div");
165
- panelContent.className = "ina-date-picker__panel-content";
190
+ panelContent.className = `${PREFIX}-date-picker__panel-content`;
166
191
  if (mode === "range" || mode === "multiple") {
167
- panelContent.classList.add("ina-date-picker__panel-content--dual");
192
+ panelContent.classList.add(
193
+ `${PREFIX}-date-picker__panel-content--dual`
194
+ );
168
195
  }
169
196
  panel.appendChild(panelContent);
170
197
  } else {
171
198
  if (mode === "range" || mode === "multiple") {
172
- panelContent.classList.add("ina-date-picker__panel-content--dual");
199
+ panelContent.classList.add(
200
+ `${PREFIX}-date-picker__panel-content--dual`
201
+ );
173
202
  }
174
203
  }
175
204
  let viewDate = /* @__PURE__ */ new Date();
@@ -217,15 +246,19 @@ function initDatepicker() {
217
246
  if (mode === "single") {
218
247
  if (selectedDate) {
219
248
  triggerText.textContent = formatDate(selectedDate);
220
- triggerText.classList.add("ina-date-picker__trigger-text--value");
249
+ triggerText.classList.add(
250
+ `${PREFIX}-date-picker__trigger-text--value`
251
+ );
221
252
  triggerText.classList.remove(
222
- "ina-date-picker__trigger-text--placeholder"
253
+ `${PREFIX}-date-picker__trigger-text--placeholder`
223
254
  );
224
255
  } else {
225
256
  triggerText.textContent = "Pilih Tanggal";
226
- triggerText.classList.remove("ina-date-picker__trigger-text--value");
257
+ triggerText.classList.remove(
258
+ `${PREFIX}-date-picker__trigger-text--value`
259
+ );
227
260
  triggerText.classList.add(
228
- "ina-date-picker__trigger-text--placeholder"
261
+ `${PREFIX}-date-picker__trigger-text--placeholder`
229
262
  );
230
263
  }
231
264
  } else if (mode === "range") {
@@ -233,32 +266,42 @@ function initDatepicker() {
233
266
  const start = formatDate(rangeDate[0]);
234
267
  const end = formatDate(rangeDate[1]);
235
268
  triggerText.textContent = `${start} - ${end}`;
236
- triggerText.classList.add("ina-date-picker__trigger-text--value");
269
+ triggerText.classList.add(
270
+ `${PREFIX}-date-picker__trigger-text--value`
271
+ );
237
272
  triggerText.classList.remove(
238
- "ina-date-picker__trigger-text--placeholder"
273
+ `${PREFIX}-date-picker__trigger-text--placeholder`
239
274
  );
240
275
  } else if (rangeDate[0]) {
241
276
  triggerText.textContent = `${formatDate(rangeDate[0])} - ...`;
242
- triggerText.classList.add("ina-date-picker__trigger-text--value");
277
+ triggerText.classList.add(
278
+ `${PREFIX}-date-picker__trigger-text--value`
279
+ );
243
280
  } else {
244
281
  triggerText.textContent = "Pilih Rentang Tanggal";
245
- triggerText.classList.remove("ina-date-picker__trigger-text--value");
282
+ triggerText.classList.remove(
283
+ `${PREFIX}-date-picker__trigger-text--value`
284
+ );
246
285
  triggerText.classList.add(
247
- "ina-date-picker__trigger-text--placeholder"
286
+ `${PREFIX}-date-picker__trigger-text--placeholder`
248
287
  );
249
288
  }
250
289
  } else if (mode === "multiple") {
251
290
  if (selectedDates.length > 0) {
252
291
  triggerText.textContent = `${selectedDates.length} Tanggal Terpilih`;
253
- triggerText.classList.add("ina-date-picker__trigger-text--value");
292
+ triggerText.classList.add(
293
+ `${PREFIX}-date-picker__trigger-text--value`
294
+ );
254
295
  triggerText.classList.remove(
255
- "ina-date-picker__trigger-text--placeholder"
296
+ `${PREFIX}-date-picker__trigger-text--placeholder`
256
297
  );
257
298
  } else {
258
299
  triggerText.textContent = "Pilih Beberapa Tanggal";
259
- triggerText.classList.remove("ina-date-picker__trigger-text--value");
300
+ triggerText.classList.remove(
301
+ `${PREFIX}-date-picker__trigger-text--value`
302
+ );
260
303
  triggerText.classList.add(
261
- "ina-date-picker__trigger-text--placeholder"
304
+ `${PREFIX}-date-picker__trigger-text--placeholder`
262
305
  );
263
306
  }
264
307
  }
@@ -272,26 +315,26 @@ function initDatepicker() {
272
315
  }
273
316
  function createMonthPicker(initialMonth, onChange) {
274
317
  const container = document.createElement("div");
275
- container.className = "ina-month-picker";
318
+ container.className = `${PREFIX}-month-picker`;
276
319
  let currentMonthIdx = initialMonth;
277
320
  let isPickerOpen = false;
278
321
  const pickerTrigger = document.createElement("button");
279
322
  pickerTrigger.type = "button";
280
- pickerTrigger.className = "ina-month-picker__trigger ina-month-picker__trigger--size-sm";
323
+ pickerTrigger.className = `${PREFIX}-month-picker__trigger ${PREFIX}-month-picker__trigger--size-sm`;
281
324
  const updateText = () => {
282
- pickerTrigger.innerHTML = `<span class="ina-month-picker__trigger-text">${MONTHS_SHORT_ID[currentMonthIdx]}</span>`;
325
+ pickerTrigger.innerHTML = `<span class="${PREFIX}-month-picker__trigger-text">${MONTHS_SHORT_ID[currentMonthIdx]}</span>`;
283
326
  };
284
327
  updateText();
285
328
  const pickerPanel = document.createElement("div");
286
- pickerPanel.className = "ina-month-picker__panel";
329
+ pickerPanel.className = `${PREFIX}-month-picker__panel`;
287
330
  const grid = document.createElement("div");
288
- grid.className = "ina-month-picker__grid";
331
+ grid.className = `${PREFIX}-month-picker__grid`;
289
332
  MONTHS_SHORT_ID.forEach((m, idx) => {
290
333
  const btn = document.createElement("button");
291
334
  btn.type = "button";
292
- btn.className = "ina-month-picker__month-option";
335
+ btn.className = `${PREFIX}-month-picker__month-option`;
293
336
  if (idx === currentMonthIdx)
294
- btn.classList.add("ina-month-picker__month-option--selected");
337
+ btn.classList.add(`${PREFIX}-month-picker__month-option--selected`);
295
338
  btn.textContent = m;
296
339
  btn.addEventListener("click", (e) => {
297
340
  e.stopPropagation();
@@ -310,10 +353,10 @@ function initDatepicker() {
310
353
  function togglePicker(show) {
311
354
  isPickerOpen = show;
312
355
  if (show) {
313
- pickerPanel.classList.add("ina-month-picker__panel--open");
356
+ pickerPanel.classList.add(`${PREFIX}-month-picker__panel--open`);
314
357
  pickerTrigger.setAttribute("aria-expanded", "true");
315
358
  } else {
316
- pickerPanel.classList.remove("ina-month-picker__panel--open");
359
+ pickerPanel.classList.remove(`${PREFIX}-month-picker__panel--open`);
317
360
  pickerTrigger.setAttribute("aria-expanded", "false");
318
361
  }
319
362
  }
@@ -330,24 +373,24 @@ function initDatepicker() {
330
373
  }
331
374
  function createYearPicker(initialYear, onChange) {
332
375
  const container = document.createElement("div");
333
- container.className = "ina-year-picker";
376
+ container.className = `${PREFIX}-year-picker`;
334
377
  let currentYearVal = initialYear;
335
378
  let isPickerOpen = false;
336
379
  let decadeStart = Math.floor(initialYear / 20) * 20;
337
380
  const pickerTrigger = document.createElement("button");
338
381
  pickerTrigger.type = "button";
339
- pickerTrigger.className = "ina-year-picker__trigger ina-year-picker__trigger--size-sm";
382
+ pickerTrigger.className = `${PREFIX}-year-picker__trigger ${PREFIX}-year-picker__trigger--size-sm`;
340
383
  const updateText = () => {
341
- pickerTrigger.innerHTML = `<span class="ina-year-picker__trigger-text">${currentYearVal}</span>`;
384
+ pickerTrigger.innerHTML = `<span class="${PREFIX}-year-picker__trigger-text">${currentYearVal}</span>`;
342
385
  };
343
386
  updateText();
344
387
  const pickerPanel = document.createElement("div");
345
- pickerPanel.className = "ina-year-picker__panel";
388
+ pickerPanel.className = `${PREFIX}-year-picker__panel`;
346
389
  const header = document.createElement("div");
347
- header.className = "ina-year-picker__header";
390
+ header.className = `${PREFIX}-year-picker__header`;
348
391
  const prevBtn = document.createElement("button");
349
392
  prevBtn.type = "button";
350
- prevBtn.className = "ina-year-picker__nav-button";
393
+ prevBtn.className = `${PREFIX}-year-picker__nav-button`;
351
394
  prevBtn.innerHTML = createIcon("chevron-left");
352
395
  prevBtn.onclick = (e) => {
353
396
  decadeStart -= 20;
@@ -355,26 +398,26 @@ function initDatepicker() {
355
398
  };
356
399
  const nextBtn = document.createElement("button");
357
400
  nextBtn.type = "button";
358
- nextBtn.className = "ina-year-picker__nav-button";
401
+ nextBtn.className = `${PREFIX}-year-picker__nav-button`;
359
402
  nextBtn.innerHTML = createIcon("chevron-right");
360
403
  nextBtn.onclick = (e) => {
361
404
  decadeStart += 20;
362
405
  renderGrid();
363
406
  };
364
407
  const rangeText = document.createElement("span");
365
- rangeText.className = "ina-year-picker__decade-range";
408
+ rangeText.className = `${PREFIX}-year-picker__decade-range`;
366
409
  header.append(prevBtn, rangeText, nextBtn);
367
410
  const grid = document.createElement("div");
368
- grid.className = "ina-year-picker__grid";
411
+ grid.className = `${PREFIX}-year-picker__grid`;
369
412
  function renderGrid() {
370
413
  grid.innerHTML = "";
371
414
  rangeText.textContent = `${decadeStart} - ${decadeStart + 19}`;
372
415
  for (let y = decadeStart; y < decadeStart + 20; y++) {
373
416
  const btn = document.createElement("button");
374
417
  btn.type = "button";
375
- btn.className = "ina-year-picker__year-option";
418
+ btn.className = `${PREFIX}-year-picker__year-option`;
376
419
  if (y === currentYearVal)
377
- btn.classList.add("ina-year-picker__year-option--selected");
420
+ btn.classList.add(`${PREFIX}-year-picker__year-option--selected`);
378
421
  btn.textContent = y;
379
422
  btn.addEventListener("click", (e) => {
380
423
  e.stopPropagation();
@@ -396,9 +439,9 @@ function initDatepicker() {
396
439
  if (show) {
397
440
  decadeStart = Math.floor(currentYearVal / 20) * 20;
398
441
  renderGrid();
399
- pickerPanel.classList.add("ina-year-picker__panel--open");
442
+ pickerPanel.classList.add(`${PREFIX}-year-picker__panel--open`);
400
443
  } else {
401
- pickerPanel.classList.remove("ina-year-picker__panel--open");
444
+ pickerPanel.classList.remove(`${PREFIX}-year-picker__panel--open`);
402
445
  }
403
446
  }
404
447
  document.addEventListener("click", (e) => {
@@ -417,16 +460,16 @@ function initDatepicker() {
417
460
  const month = baseDate.getMonth();
418
461
  const container = document.createElement("div");
419
462
  if (!isNextMonth) {
420
- container.className = "ina-date-picker__calendar-container";
463
+ container.className = `${PREFIX}-date-picker__calendar-container`;
421
464
  } else {
422
- container.className = "ina-date-picker__calendar";
465
+ container.className = `${PREFIX}-date-picker__calendar`;
423
466
  }
424
467
  const header = document.createElement("div");
425
- header.className = isNextMonth ? "ina-date-picker__next-month-header" : "ina-date-picker__calendar-header";
468
+ header.className = isNextMonth ? `${PREFIX}-date-picker__next-month-header` : `${PREFIX}-date-picker__calendar-header`;
426
469
  if (!isNextMonth) {
427
470
  const prevBtn = document.createElement("button");
428
471
  prevBtn.type = "button";
429
- prevBtn.className = "ina-date-picker__nav-button";
472
+ prevBtn.className = `${PREFIX}-date-picker__nav-button`;
430
473
  prevBtn.innerHTML = createIcon("chevron-left");
431
474
  prevBtn.onclick = (e) => {
432
475
  e.stopPropagation();
@@ -440,10 +483,10 @@ function initDatepicker() {
440
483
  header.appendChild(spacer);
441
484
  }
442
485
  const controls = document.createElement("div");
443
- controls.className = isNextMonth ? "ina-date-picker__next-month-controls" : "ina-date-picker__header-controls";
444
- controls.className = "ina-date-picker__header-controls";
486
+ controls.className = isNextMonth ? `${PREFIX}-date-picker__next-month-controls` : `${PREFIX}-date-picker__header-controls`;
487
+ controls.className = `${PREFIX}-date-picker__header-controls`;
445
488
  const monthCont = document.createElement("div");
446
- monthCont.className = "ina-date-picker__dropdown-container";
489
+ monthCont.className = `${PREFIX}-date-picker__dropdown-container`;
447
490
  const monthPicker = createMonthPicker(month, (m) => {
448
491
  if (isNextMonth) {
449
492
  viewDate = new Date(year, m - 1, 1);
@@ -454,7 +497,7 @@ function initDatepicker() {
454
497
  });
455
498
  monthCont.appendChild(monthPicker.element);
456
499
  const yearCont = document.createElement("div");
457
- yearCont.className = "ina-date-picker__dropdown-container";
500
+ yearCont.className = `${PREFIX}-date-picker__dropdown-container`;
458
501
  const yearPicker = createYearPicker(year, (y) => {
459
502
  if (isNextMonth) {
460
503
  viewDate = new Date(y, month - 1, 1);
@@ -470,7 +513,7 @@ function initDatepicker() {
470
513
  if (showNextBtn) {
471
514
  const nextBtn = document.createElement("button");
472
515
  nextBtn.type = "button";
473
- nextBtn.className = "ina-date-picker__nav-button";
516
+ nextBtn.className = `${PREFIX}-date-picker__nav-button`;
474
517
  nextBtn.innerHTML = createIcon("chevron-right");
475
518
  nextBtn.onclick = (e) => {
476
519
  e.stopPropagation();
@@ -484,10 +527,10 @@ function initDatepicker() {
484
527
  header.appendChild(spacer);
485
528
  }
486
529
  const grid = document.createElement("div");
487
- grid.className = "ina-date-picker__calendar-grid";
530
+ grid.className = `${PREFIX}-date-picker__calendar-grid`;
488
531
  DAYS_SHORT.forEach((d) => {
489
532
  const dh = document.createElement("div");
490
- dh.className = "ina-date-picker__day-header";
533
+ dh.className = `${PREFIX}-date-picker__day-header`;
491
534
  dh.textContent = d;
492
535
  grid.appendChild(dh);
493
536
  });
@@ -498,7 +541,7 @@ function initDatepicker() {
498
541
  for (let i = firstDayOfMonth - 1; i >= 0; i--) {
499
542
  const btn = document.createElement("button");
500
543
  btn.type = "button";
501
- btn.className = "ina-date-picker__day ina-date-picker__day--other-month ina-date-picker__day--disabled";
544
+ btn.className = `${PREFIX}-date-picker__day ${PREFIX}-date-picker__day--other-month ${PREFIX}-date-picker__day--disabled`;
502
545
  btn.textContent = daysInPrevMonth - i;
503
546
  grid.appendChild(btn);
504
547
  }
@@ -506,7 +549,7 @@ function initDatepicker() {
506
549
  const date = new Date(year, month, i);
507
550
  const btn = document.createElement("button");
508
551
  btn.type = "button";
509
- btn.className = "ina-date-picker__day";
552
+ btn.className = `${PREFIX}-date-picker__day`;
510
553
  btn.textContent = i;
511
554
  let isSelected = false;
512
555
  let isInRange = false;
@@ -524,12 +567,14 @@ function initDatepicker() {
524
567
  isSelected = true;
525
568
  if (start && end && date > start && date < end) isInRange = true;
526
569
  }
527
- if (isSelected) btn.classList.add("ina-date-picker__day--selected");
528
- if (isInRange) btn.classList.add("ina-date-picker__day--in-range");
570
+ if (isSelected)
571
+ btn.classList.add(`${PREFIX}-date-picker__day--selected`);
572
+ if (isInRange)
573
+ btn.classList.add(`${PREFIX}-date-picker__day--in-range`);
529
574
  if (date.toDateString() === today.toDateString())
530
- btn.classList.add("ina-date-picker__day--today");
575
+ btn.classList.add(`${PREFIX}-date-picker__day--today`);
531
576
  if (!isSelected && !isInRange)
532
- btn.classList.add("ina-date-picker__day--hover");
577
+ btn.classList.add(`${PREFIX}-date-picker__day--hover`);
533
578
  btn.onclick = (e) => {
534
579
  e.stopPropagation();
535
580
  if (mode === "single") {
@@ -574,7 +619,7 @@ function initDatepicker() {
574
619
  for (let i = 1; i <= remaining; i++) {
575
620
  const btn = document.createElement("button");
576
621
  btn.type = "button";
577
- btn.className = "ina-date-picker__day ina-date-picker__day--other-month ina-date-picker__day--disabled";
622
+ btn.className = `${PREFIX}-date-picker__day ${PREFIX}-date-picker__day--other-month ${PREFIX}-date-picker__day--disabled`;
578
623
  btn.textContent = i;
579
624
  grid.appendChild(btn);
580
625
  }
@@ -597,13 +642,13 @@ function initDatepicker() {
597
642
  }
598
643
  function open() {
599
644
  isOpen = true;
600
- panel.classList.add("ina-date-picker__panel--open");
645
+ panel.classList.add(`${PREFIX}-date-picker__panel--open`);
601
646
  panel.style.display = "block";
602
647
  render();
603
648
  }
604
649
  function close() {
605
650
  isOpen = false;
606
- panel.classList.remove("ina-date-picker__panel--open");
651
+ panel.classList.remove(`${PREFIX}-date-picker__panel--open`);
607
652
  panel.style.display = "none";
608
653
  }
609
654
  function toggle() {
@@ -1379,41 +1424,43 @@ function initRangeDatepicker() {
1379
1424
 
1380
1425
  // src/js/components/stateful/timepicker.js
1381
1426
  function initTimepicker() {
1382
- document.querySelectorAll(".ina-time-picker").forEach((picker) => {
1427
+ document.querySelectorAll(`.${PREFIX}-time-picker`).forEach((picker) => {
1383
1428
  if (picker.dataset.initialized === "true") return;
1384
1429
  picker.dataset.initialized = "true";
1385
- const input = picker.querySelector(".ina-time-picker__input");
1386
- const wrapper = picker.querySelector(".ina-time-picker__wrapper");
1430
+ const input = picker.querySelector(`.${PREFIX}-time-picker__input`);
1431
+ const wrapper = picker.querySelector(`.${PREFIX}-time-picker__wrapper`);
1387
1432
  if (!input || !wrapper) return;
1388
1433
  const format = picker.dataset.format || "HH:mm";
1389
1434
  const use12Hours = picker.dataset.use12Hours === "true" || picker.getAttribute("data-use-12-hours") === "true" || /a/i.test(format);
1390
1435
  const showSecond = picker.dataset.showSecond === "true";
1391
- const disabled = picker.classList.contains("ina-time-picker--disabled");
1436
+ const disabled = picker.classList.contains(
1437
+ `${PREFIX}-time-picker--disabled`
1438
+ );
1392
1439
  const allowClear = picker.dataset.allowClear !== "false";
1393
1440
  let isOpen = false;
1394
1441
  let internalValue = input.value || "";
1395
- let panel = picker.querySelector(".ina-time-picker__panel");
1442
+ let panel = picker.querySelector(`.${PREFIX}-time-picker__panel`);
1396
1443
  if (!panel) {
1397
1444
  panel = document.createElement("div");
1398
- panel.className = "ina-time-picker__panel";
1445
+ panel.className = `${PREFIX}-time-picker__panel`;
1399
1446
  panel.style.display = "none";
1400
1447
  picker.appendChild(panel);
1401
1448
  }
1402
- let content = panel.querySelector(".ina-time-picker__content");
1449
+ let content = panel.querySelector(`.${PREFIX}-time-picker__content`);
1403
1450
  if (!content) {
1404
1451
  content = document.createElement("div");
1405
- content.className = "ina-time-picker__content";
1452
+ content.className = `${PREFIX}-time-picker__content`;
1406
1453
  panel.appendChild(content);
1407
1454
  } else {
1408
1455
  content.innerHTML = "";
1409
1456
  }
1410
- let actions = panel.querySelector(".ina-time-picker__actions");
1457
+ let actions = panel.querySelector(`.${PREFIX}-time-picker__actions`);
1411
1458
  if (!actions) {
1412
1459
  actions = document.createElement("div");
1413
- actions.className = "ina-time-picker__actions";
1460
+ actions.className = `${PREFIX}-time-picker__actions`;
1414
1461
  const confirmBtn = document.createElement("button");
1415
1462
  confirmBtn.type = "button";
1416
- confirmBtn.className = "ina-time-picker__confirm-button";
1463
+ confirmBtn.className = `${PREFIX}-time-picker__confirm-button`;
1417
1464
  confirmBtn.textContent = "Pilih";
1418
1465
  confirmBtn.onclick = (e) => {
1419
1466
  e.stopPropagation();
@@ -1461,15 +1508,15 @@ function initTimepicker() {
1461
1508
  let currentTime = parseTime(internalValue);
1462
1509
  const renderColumn = (type, max) => {
1463
1510
  const column = document.createElement("div");
1464
- column.className = `ina-time-picker__column ina-time-picker__column--${type}`;
1511
+ column.className = `${PREFIX}-time-picker__column ${PREFIX}-time-picker__column--${type}`;
1465
1512
  const colContent = document.createElement("div");
1466
- colContent.className = "ina-time-picker__column-content";
1513
+ colContent.className = `${PREFIX}-time-picker__column-content`;
1467
1514
  column.appendChild(colContent);
1468
1515
  const start = type === "hour" && use12Hours ? 1 : 0;
1469
1516
  const end = type === "hour" && use12Hours ? 12 : max - 1;
1470
1517
  for (let i = start; i <= end; i++) {
1471
1518
  const option = document.createElement("div");
1472
- option.className = "ina-time-picker__option";
1519
+ option.className = `${PREFIX}-time-picker__option`;
1473
1520
  option.textContent = i.toString().padStart(2, "0");
1474
1521
  option.dataset.value = i;
1475
1522
  let isSelected = false;
@@ -1478,7 +1525,7 @@ function initTimepicker() {
1478
1525
  } else if (type === "minute") isSelected = currentTime.minutes === i;
1479
1526
  else if (type === "second") isSelected = currentTime.seconds === i;
1480
1527
  if (isSelected)
1481
- option.classList.add("ina-time-picker__option--selected");
1528
+ option.classList.add(`${PREFIX}-time-picker__option--selected`);
1482
1529
  option.addEventListener("click", (e) => {
1483
1530
  e.stopPropagation();
1484
1531
  const val = parseInt(option.dataset.value, 10);
@@ -1488,10 +1535,10 @@ function initTimepicker() {
1488
1535
  if (type === "minute") currentTime.minutes = val;
1489
1536
  if (type === "second") currentTime.seconds = val;
1490
1537
  updateInput();
1491
- colContent.querySelectorAll(".ina-time-picker__option").forEach(
1492
- (el) => el.classList.remove("ina-time-picker__option--selected")
1538
+ colContent.querySelectorAll(`.${PREFIX}-time-picker__option`).forEach(
1539
+ (el) => el.classList.remove(`${PREFIX}-time-picker__option--selected`)
1493
1540
  );
1494
- option.classList.add("ina-time-picker__option--selected");
1541
+ option.classList.add(`${PREFIX}-time-picker__option--selected`);
1495
1542
  });
1496
1543
  colContent.appendChild(option);
1497
1544
  }
@@ -1499,24 +1546,24 @@ function initTimepicker() {
1499
1546
  };
1500
1547
  const renderPeriodColumn = () => {
1501
1548
  const column = document.createElement("div");
1502
- column.className = `ina-time-picker__column ina-time-picker__column--period`;
1549
+ column.className = `${PREFIX}-time-picker__column ${PREFIX}-time-picker__column--period`;
1503
1550
  const colContent = document.createElement("div");
1504
- colContent.className = "ina-time-picker__column-content";
1551
+ colContent.className = `${PREFIX}-time-picker__column-content`;
1505
1552
  column.appendChild(colContent);
1506
1553
  ["AM", "PM"].forEach((p) => {
1507
1554
  const option = document.createElement("div");
1508
- option.className = "ina-time-picker__option";
1555
+ option.className = `${PREFIX}-time-picker__option`;
1509
1556
  option.textContent = p;
1510
1557
  if (currentTime.period === p)
1511
- option.classList.add("ina-time-picker__option--selected");
1558
+ option.classList.add(`${PREFIX}-time-picker__option--selected`);
1512
1559
  option.addEventListener("click", (e) => {
1513
1560
  e.stopPropagation();
1514
1561
  currentTime.period = p;
1515
1562
  updateInput();
1516
- colContent.querySelectorAll(".ina-time-picker__option").forEach(
1517
- (el) => el.classList.remove("ina-time-picker__option--selected")
1563
+ colContent.querySelectorAll(`.${PREFIX}-time-picker__option`).forEach(
1564
+ (el) => el.classList.remove(`${PREFIX}-time-picker__option--selected`)
1518
1565
  );
1519
- option.classList.add("ina-time-picker__option--selected");
1566
+ option.classList.add(`${PREFIX}-time-picker__option--selected`);
1520
1567
  });
1521
1568
  colContent.appendChild(option);
1522
1569
  });
@@ -1543,7 +1590,7 @@ function initTimepicker() {
1543
1590
  const open = () => {
1544
1591
  if (disabled) return;
1545
1592
  isOpen = true;
1546
- picker.classList.add("ina-time-picker--open");
1593
+ picker.classList.add(`${PREFIX}-time-picker--open`);
1547
1594
  panel.style.display = "block";
1548
1595
  currentTime = parseTime(input.value);
1549
1596
  buildPanel();
@@ -1553,7 +1600,7 @@ function initTimepicker() {
1553
1600
  };
1554
1601
  const close = () => {
1555
1602
  isOpen = false;
1556
- picker.classList.remove("ina-time-picker--open");
1603
+ picker.classList.remove(`${PREFIX}-time-picker--open`);
1557
1604
  panel.style.display = "none";
1558
1605
  };
1559
1606
  const toggle = (e) => {
@@ -1570,7 +1617,9 @@ function initTimepicker() {
1570
1617
  document.addEventListener("closeTimePicker", (e) => {
1571
1618
  if (e.detail && e.detail.exclude !== picker) close();
1572
1619
  });
1573
- const clearBtn = picker.querySelector(".ina-time-picker__clear-button");
1620
+ const clearBtn = picker.querySelector(
1621
+ `.${PREFIX}-time-picker__clear-button`
1622
+ );
1574
1623
  if (clearBtn && allowClear) {
1575
1624
  clearBtn.addEventListener("click", (e) => {
1576
1625
  e.stopPropagation();
@@ -1632,7 +1681,7 @@ if (typeof window !== void 0) {
1632
1681
  }
1633
1682
 
1634
1683
  // src/js/index.js
1635
- var PREFIX = "ina-ss";
1684
+ var PREFIX = "ina";
1636
1685
  function initAll() {
1637
1686
  initAccordion();
1638
1687
  initBanner();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@idds/js",
3
- "version": "1.0.50",
3
+ "version": "1.0.52",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },