@ncds/ui-admin 1.6.4 → 1.7.0

package/dist/cjs/assets/scripts/utils/unifiedBox/{UnifiedBoxController.js → unifiedBoxController.js}

@@ -26,6 +26,7 @@ var UnifiedBoxController = exports.UnifiedBoxController = /** @class */function
     this.scrollLockHandlers = null;
     // DOM 요소들
     this.optionElements = [];
+    this.handlerMap = new WeakMap();
     this.scrollPosition = 0;
     this.mouseMoveHandlerAttached = false;
     this.lastFilteredOptionsCount = 0; // 이전 필터링된 옵션 개수 (성능 최적화)
@@ -319,8 +320,10 @@ var UnifiedBoxController = exports.UnifiedBoxController = /** @class */function
       element.addEventListener('click', clickHandler);
       element.addEventListener('mouseenter', hoverHandler);
       // 나중에 제거할 수 있도록 핸들러 저장
-      element._clickHandler = clickHandler;
-      element._hoverHandler = hoverHandler;
+      _this.handlerMap.set(element, {
+        click: clickHandler,
+        hover: hoverHandler
+      });
     });
     // 마우스 이동 감지 (한 번만 등록)
     if (!this.mouseMoveHandlerAttached) {
@@ -334,16 +337,13 @@ var UnifiedBoxController = exports.UnifiedBoxController = /** @class */function
    * 옵션 이벤트 핸들러 제거
    */
   UnifiedBoxController.prototype.removeOptionEventHandlers = function () {
+    var _this = this;
     this.optionElements.forEach(function (element) {
-      var clickHandler = element._clickHandler;
-      var hoverHandler = element._hoverHandler;
-      if (clickHandler) {
-        element.removeEventListener('click', clickHandler);
-        delete element._clickHandler;
-      }
-      if (hoverHandler) {
-        element.removeEventListener('mouseenter', hoverHandler);
-        delete element._hoverHandler;
+      var handlers = _this.handlerMap.get(element);
+      if (handlers) {
+        element.removeEventListener('click', handlers.click);
+        element.removeEventListener('mouseenter', handlers.hover);
+        _this.handlerMap.delete(element);
       }
     });
   };
@@ -497,38 +497,6 @@ var UnifiedBoxController = exports.UnifiedBoxController = /** @class */function
   UnifiedBoxController.prototype.getFocusedIndex = function () {
     return this.config.model.getState().focusedIndex;
   };
-  /**
-   * DropdownUtils 호환을 위한 정적 팩토리 메서드
-   */
-  UnifiedBoxController.createFromDropdownConfig = function (config) {
-    // DropdownModel 생성
-    var model = new (require('./DropdownModel').DropdownModel)(config.options || [], false);
-    // DOMRenderer 생성
-    var renderer = new (require('./DOMRenderer').DOMRenderer)();
-    // UnifiedBoxController 생성
-    var controllerConfig = {
-      triggerElement: config.triggerElement,
-      dropdownElement: config.dropdownElement,
-      model: model,
-      renderer: renderer,
-      renderConfig: {
-        listboxId: 'dropdown-utils',
-        multiple: false,
-        maxHeight: 275,
-        size: 'md'
-      },
-      onOpen: config.onOpen,
-      onClose: config.onClose,
-      onSelectionChange: function (values) {
-        var _a, _b, _c;
-        var index = (_b = (_a = config.options) === null || _a === void 0 ? void 0 : _a.findIndex(function (opt) {
-          return opt.id === values[0];
-        })) !== null && _b !== void 0 ? _b : -1;
-        if (index >= 0) (_c = config.onOptionSelect) === null || _c === void 0 ? void 0 : _c.call(config, index);
-      }
-    };
-    return new UnifiedBoxController(controllerConfig);
-  };
   /**
    * 드롭다운 위치 조정 (화면 크기에 따라 up/down 방향 결정)
    * 단일 선택 모드에서만 적용

package/dist/cjs/assets/scripts/utils/unifiedBox/{UnifiedBoxManager.js → unifiedBoxManager.js}

@@ -4,9 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.UnifiedBoxManager = void 0;
-var _DOMRenderer = require("./DOMRenderer");
-var _DropdownModel = require("./DropdownModel");
-var _UnifiedBoxController = require("./UnifiedBoxController");
+var _debounce = require("../debounce");
+var _domRenderer = require("./domRenderer");
+var _dropdownModel = require("./dropdownModel");
+var _unifiedBoxController = require("./unifiedBoxController");
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -150,13 +151,16 @@ var UnifiedBoxManager = exports.UnifiedBoxManager = /** @class */function () {
     if (config === void 0) {
       config = {};
     }
+    var _this = this;
     var _a;
     this.lastSearchValue = ''; // 이전 검색어 추적 (API 모드에서 옵션 교체를 위해)
     this.hasInitialOptions = false; // 초기 옵션이 있는지 여부 (select 태그 등)
     this.element = element;
+    this.isComboBox = config.type === 'combobox';
+    this.baseClass = this.isComboBox ? 'ncua-combobox' : 'ncua-selectbox';
     this.config = __assign(__assign({
       options: [],
-      placeholder: config.type === 'combobox' ? '검색하세요' : '선택하세요',
+      placeholder: this.isComboBox ? '검색하세요' : '선택하세요',
       maxHeight: 275,
       disabled: false,
       size: 'md',
@@ -167,6 +171,20 @@ var UnifiedBoxManager = exports.UnifiedBoxManager = /** @class */function () {
     }, config), {
       searchDebounceMs: (_a = config.searchDebounceMs) !== null && _a !== void 0 ? _a : 500
     });
+    this.debouncedSearch = (0, _debounce.debounce)(function (value, isApiMode) {
+      var _a, _b;
+      if (isApiMode) {
+        _this.model.updateSearchValue(value);
+      } else {
+        _this.model.updateSearchAndFilter(value);
+      }
+      (_b = (_a = _this.config).onSearch) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+      if (value.trim()) {
+        _this.controller.open();
+      } else if (!_this.model.getState().showAllItems) {
+        _this.controller.close();
+      }
+    }, this.config.searchDebounceMs);
     this.initialize();
   }
   UnifiedBoxManager.prototype.initialize = function () {
@@ -174,12 +192,9 @@ var UnifiedBoxManager = exports.UnifiedBoxManager = /** @class */function () {
     this.setupElementClasses();
     // 초기 옵션이 있는지 확인 (select 태그 등에서 파싱된 옵션이 있는 경우)
     this.hasInitialOptions = this.config.options && this.config.options.length > 0 || false;
-    this.model = new _DropdownModel.DropdownModel(this.config.options || [], this.config.multiple || false);
-    // ComboBox 타입인 경우 모델에 설정
-    if (this.config.type === 'combobox') {
-      this.model.setComboBoxMode(true);
-    }
-    this.renderer = new _DOMRenderer.DOMRenderer();
+    var filterStrategy = this.isComboBox ? _dropdownModel.DropdownModel.comboBoxFilterStrategy : _dropdownModel.DropdownModel.defaultFilterStrategy;
+    this.model = new _dropdownModel.DropdownModel(this.config.options || [], this.config.multiple || false, filterStrategy);
+    this.renderer = new _domRenderer.DOMRenderer();
     this.createUI();
     this.setupController();
     if (this.config.value) {
@@ -187,17 +202,16 @@ var UnifiedBoxManager = exports.UnifiedBoxManager = /** @class */function () {
     }
   };
   UnifiedBoxManager.prototype.setupElementClasses = function () {
-    var baseClass = this.config.type === 'combobox' ? 'ncua-combobox' : 'ncua-selectbox';
-    this.element.className = "".concat(baseClass, " ").concat(baseClass, "--").concat(this.config.size);
+    this.element.className = "".concat(this.baseClass, " ").concat(this.baseClass, "--").concat(this.config.size);
     if (this.config.disabled) {
-      this.element.classList.add("".concat(baseClass, "--disabled"));
+      this.element.classList.add("".concat(this.baseClass, "--disabled"));
     }
     if (this.config.multiple) {
-      this.element.classList.add("".concat(baseClass, "--multiple"));
+      this.element.classList.add("".concat(this.baseClass, "--multiple"));
     }
   };
   UnifiedBoxManager.prototype.createUI = function () {
-    if (this.config.type === 'combobox') {
+    if (this.isComboBox) {
       this.createComboBoxUI();
     } else {
       this.createSelectBoxUI();
@@ -206,7 +220,7 @@ var UnifiedBoxManager = exports.UnifiedBoxManager = /** @class */function () {
   UnifiedBoxManager.prototype.createComboBoxUI = function () {
     var _this = this;
     // 컨텐츠 컨테이너
-    var content = _DOMRenderer.DOMRenderer.createElementWithClass('div', 'ncua-combobox__content');
+    var content = _domRenderer.DOMRenderer.createElementWithClass('div', 'ncua-combobox__content');
     this.element.appendChild(content);
     // 입력 필드 생성
     this.inputField = this.renderer.createInputField({
@@ -234,13 +248,13 @@ var UnifiedBoxManager = exports.UnifiedBoxManager = /** @class */function () {
   };
   UnifiedBoxManager.prototype.createSelectBoxUI = function () {
     // 트리거 생성
-    var trigger = _DOMRenderer.DOMRenderer.createElementWithClass('div', 'ncua-selectbox__content');
+    var trigger = _domRenderer.DOMRenderer.createElementWithClass('div', 'ncua-selectbox__content');
     trigger.setAttribute('tabindex', this.config.disabled ? '-1' : '0');
     trigger.setAttribute('role', 'combobox');
     trigger.setAttribute('aria-expanded', 'false');
     trigger.setAttribute('aria-haspopup', 'listbox');
-    var valueSpan = _DOMRenderer.DOMRenderer.createElementWithClass('span', 'ncua-selectbox__value', this.config.placeholder);
-    var arrow = _DOMRenderer.DOMRenderer.createSvgIcon('chevron-down', this.config.size === 'xs' ? 14 : 16);
+    var valueSpan = _domRenderer.DOMRenderer.createElementWithClass('span', 'ncua-selectbox__value', this.config.placeholder);
+    var arrow = _domRenderer.DOMRenderer.createSvgIcon('chevron-down', this.config.size === 'xs' ? 14 : 16);
     arrow.classList.add('ncua-selectbox__arrow');
     trigger.appendChild(valueSpan);
     trigger.appendChild(arrow);
@@ -260,7 +274,7 @@ var UnifiedBoxManager = exports.UnifiedBoxManager = /** @class */function () {
     });
     this.dropdownElement = dropdownStructure.dropdown;
     // SelectBox 단일 선택 모드일 때 특별한 클래스 추가
-    if (this.config.type === 'selectbox' && !this.config.multiple) {
+    if (!this.isComboBox && !this.config.multiple) {
       this.dropdownElement.classList.add('ncua-select-dropdown--selectbox-single');
     }
     // 다중 선택 모드일 때 클래스 추가
@@ -305,24 +319,22 @@ var UnifiedBoxManager = exports.UnifiedBoxManager = /** @class */function () {
         noResultsText: '일치하는 결과가 없습니다.'
       },
       onOpen: function () {
-        var baseClass = _this.config.type === 'combobox' ? 'ncua-combobox' : 'ncua-selectbox';
-        _this.element.classList.add("".concat(baseClass, "--open"));
+        _this.element.classList.add("".concat(_this.baseClass, "--open"));
         if (_this.triggerElement) {
           _this.triggerElement.setAttribute('aria-expanded', 'true');
         }
         // 화살표 아이콘 회전 (selectbox 타입일 때만)
-        if (_this.config.type === 'selectbox' && _this.arrowElement) {
+        if (!_this.isComboBox && _this.arrowElement) {
           _this.arrowElement.classList.add('ncua-selectbox__arrow--up');
         }
       },
       onClose: function () {
-        var baseClass = _this.config.type === 'combobox' ? 'ncua-combobox' : 'ncua-selectbox';
-        _this.element.classList.remove("".concat(baseClass, "--open"));
+        _this.element.classList.remove("".concat(_this.baseClass, "--open"));
         if (_this.triggerElement) {
           _this.triggerElement.setAttribute('aria-expanded', 'false');
         }
         // 화살표 아이콘 원래대로 (selectbox 타입일 때만)
-        if (_this.config.type === 'selectbox' && _this.arrowElement) {
+        if (!_this.isComboBox && _this.arrowElement) {
           _this.arrowElement.classList.remove('ncua-selectbox__arrow--up');
         }
       },
@@ -340,82 +352,29 @@ var UnifiedBoxManager = exports.UnifiedBoxManager = /** @class */function () {
       },
       type: this.config.type // 타입 정보 전달
     };
-    this.controller = new _UnifiedBoxController.UnifiedBoxController(controllerConfig);
-  };
-  /**
-   * 디바운싱 타이머 취소
-   */
-  UnifiedBoxManager.prototype.cancelDebounceTimer = function () {
-    if (this.searchDebounceTimer) {
-      clearTimeout(this.searchDebounceTimer);
-      this.searchDebounceTimer = undefined;
-      this.currentDebounceTimerId = undefined;
-    }
+    this.controller = new _unifiedBoxController.UnifiedBoxController(controllerConfig);
   };
   // 이벤트 핸들러들
   UnifiedBoxManager.prototype.handleInput = function (value) {
-    var _this = this;
     var _a, _b;
-    this.cancelDebounceTimer();
-    // 필터링은 즉시 업데이트 (사용자가 입력하는 동안 필터링 결과를 즉시 보여줌)
-    // 하지만 onSearch 콜백은 디바운싱 적용
-    var isApiMode = this.config.type === 'combobox' && !this.hasInitialOptions;
-    // API 모드에서는 검색어 변경 추적만 하고, 옵션은 디바운싱 후 비우기
+    this.debouncedSearch.cancel();
+    var isApiMode = this.isComboBox && !this.hasInitialOptions;
+    // API 모드에서는 검색어 변경 추적
     if (isApiMode && this.lastSearchValue !== value) {
       this.lastSearchValue = value;
     }
-    // 디바운싱이 설정되어 있으면 입력이 멈춘 후 onSearch 콜백만 실행
+    // 디바운싱이 설정되어 있으면 디바운스 유틸리티 사용
     if (this.config.searchDebounceMs > 0) {
-      // 새로운 타이머 ID 생성 (각 타이머를 고유하게 식별)
-      var timerId_1 = Date.now() + Math.random();
-      this.currentDebounceTimerId = timerId_1;
-      this.searchDebounceTimer = window.setTimeout(function () {
-        return __awaiter(_this, void 0, void 0, function () {
-          var _a, _b;
-          return __generator(this, function (_c) {
-            switch (_c.label) {
-              case 0:
-                // 타이머가 취소되었는지 확인 (다른 타이머가 시작되었으면 현재 타이머는 무시)
-                if (this.currentDebounceTimerId !== timerId_1) {
-                  return [2 /*return*/]; // 이 타이머는 취소되었으므로 실행하지 않음
-                }
-                // 타이머가 여전히 유효하면 실행
-                this.searchDebounceTimer = undefined;
-                this.currentDebounceTimerId = undefined;
-                // API 모드: 검색어만 업데이트 (필터링은 하지 않음, 서버에서 필터링된 결과를 받음)
-                // 일반 모드: 검색어 업데이트 + 로컬 필터링
-                if (isApiMode) {
-                  this.model.updateSearchValue(value);
-                } else {
-                  this.model.updateSearchAndFilter(value);
-                }
-                // onSearch 콜백 호출 및 완료 대기 (디바운싱 적용, 최종 타이머만 실행)
-                return [4 /*yield*/, (_b = (_a = this.config).onSearch) === null || _b === void 0 ? void 0 : _b.call(_a, value)];
-              case 1:
-                // onSearch 콜백 호출 및 완료 대기 (디바운싱 적용, 최종 타이머만 실행)
-                _c.sent();
-                // 텍스트가 있을 때만 드롭다운 열기
-                if (value.trim()) {
-                  this.controller.open();
-                } else if (!this.model.getState().showAllItems) {
-                  this.controller.close();
-                }
-                return [2 /*return*/];
-            }
-          });
-        });
-      }, this.config.searchDebounceMs);
+      this.debouncedSearch(value, isApiMode);
     } else {
-      // 디바운싱이 0으로 명시적으로 설정되었으면 즉시 실행
+      // 디바운싱이 0이면 즉시 실행
       this.model.updateSearchAndFilter(value);
-      // 텍스트가 있거나 옵션이 있으면 드롭다운 열기
       var hasOptions = this.model.getState().options.length > 0 || this.model.getState().filteredOptions.length > 0;
       if (value.trim() || hasOptions) {
         this.controller.open();
       } else if (!this.model.getState().showAllItems) {
         this.controller.close();
       }
-      // onSearch 콜백 호출 (디바운싱 없음)
       (_b = (_a = this.config).onSearch) === null || _b === void 0 ? void 0 : _b.call(_a, value);
     }
   };
@@ -423,7 +382,7 @@ var UnifiedBoxManager = exports.UnifiedBoxManager = /** @class */function () {
     var _a, _b;
     if (!this.config.disabled) {
       (_a = this.inputField) === null || _a === void 0 ? void 0 : _a.focus();
-      if (this.config.type === 'combobox') {
+      if (this.isComboBox) {
         var currentInputValue = ((_b = this.inputField) === null || _b === void 0 ? void 0 : _b.input.value) || '';
         if (currentInputValue.trim().length > 0 || this.model.getState().showAllItems) {
           this.controller.open();
@@ -432,7 +391,7 @@ var UnifiedBoxManager = exports.UnifiedBoxManager = /** @class */function () {
     }
   };
   UnifiedBoxManager.prototype.handleClearInput = function () {
-    this.cancelDebounceTimer();
+    this.debouncedSearch.cancel();
     // input 필드 텍스트 지우기
     if (this.inputField) {
       this.inputField.setValue('');
@@ -441,7 +400,7 @@ var UnifiedBoxManager = exports.UnifiedBoxManager = /** @class */function () {
     this.model.clearInput();
     // ComboBox 타입이고 초기 옵션이 없는 경우 (API 모드)
     // Clear 버튼 클릭 시 옵션도 완전히 비우기
-    var isApiMode = this.config.type === 'combobox' && !this.hasInitialOptions;
+    var isApiMode = this.isComboBox && !this.hasInitialOptions;
     if (isApiMode) {
       this.model.updateOptions([]);
       this.lastSearchValue = '';
@@ -477,11 +436,11 @@ var UnifiedBoxManager = exports.UnifiedBoxManager = /** @class */function () {
   };
   UnifiedBoxManager.prototype.handleSelectionChange = function (selectedValues) {
     var _a, _b;
-    this.cancelDebounceTimer();
+    this.debouncedSearch.cancel();
     var result = this.config.multiple ? selectedValues : selectedValues[0] || '';
     (_b = (_a = this.config).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, result);
     // UI 업데이트
-    if (this.config.type === 'selectbox') {
+    if (!this.isComboBox) {
       this.updateSelectBoxValue();
     }
     // 다중 선택인 경우 전체 선택 버튼 텍스트 업데이트
@@ -509,7 +468,7 @@ var UnifiedBoxManager = exports.UnifiedBoxManager = /** @class */function () {
   };
   UnifiedBoxManager.prototype.canToggleDropdown = function () {
     var _a;
-    if (this.config.type === 'combobox') {
+    if (this.isComboBox) {
       // ComboBox의 경우: 인풋에 텍스트가 있으면 항상 토글 가능
       var currentInputValue = ((_a = this.inputField) === null || _a === void 0 ? void 0 : _a.input.value) || '';
       return currentInputValue.trim().length > 0 || this.model.getState().showAllItems;
@@ -528,15 +487,15 @@ var UnifiedBoxManager = exports.UnifiedBoxManager = /** @class */function () {
   };
   UnifiedBoxManager.prototype.handleComplete = function () {
     var _a, _b, _c, _d;
-    if (this.config.multiple || this.config.type === 'combobox') {
+    if (this.config.multiple || this.isComboBox) {
       var currentValues = this.model.getValue();
       // SelectBox 타입이고 multiple 모드일 때만 onChange 콜백으로 현재 선택된 값들 전달
-      if (this.config.type === 'selectbox' && this.config.multiple && Array.isArray(currentValues)) {
+      if (!this.isComboBox && this.config.multiple && Array.isArray(currentValues)) {
         (_b = (_a = this.config).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, currentValues);
       }
       (_d = (_c = this.config).onComplete) === null || _d === void 0 ? void 0 : _d.call(_c);
       // ComboBox 타입인 경우에만 값 초기화 및 검색어 초기화
-      if (this.config.type === 'combobox') {
+      if (this.isComboBox) {
         this.model.setValue([]);
         if (this.inputField) {
           this.inputField.setValue('');
@@ -581,7 +540,7 @@ var UnifiedBoxManager = exports.UnifiedBoxManager = /** @class */function () {
     // 단일 선택 모드인 경우 첫 번째 값만 사용
     var finalIds = this.config.multiple ? ids : ids[0] || '';
     this.model.setValue(finalIds);
-    if (this.config.type === 'selectbox') {
+    if (!this.isComboBox) {
       this.updateSelectBoxValue();
     } else {
       // ComboBox의 경우 input 필드도 업데이트
@@ -604,13 +563,12 @@ var UnifiedBoxManager = exports.UnifiedBoxManager = /** @class */function () {
   UnifiedBoxManager.prototype.setDisabled = function (disabled) {
     var _a, _b;
     this.config.disabled = disabled;
-    var baseClass = this.config.type === 'combobox' ? 'ncua-combobox' : 'ncua-selectbox';
-    var disabledClass = "".concat(baseClass, "--disabled");
+    var disabledClass = "".concat(this.baseClass, "--disabled");
     this.element.classList.toggle(disabledClass, disabled);
     if (this.controller) {
       this.controller.setDisabled(disabled);
     }
-    if (this.config.type === 'combobox') {
+    if (this.isComboBox) {
       // 입력 필드 비활성화
       if ((_a = this.inputField) === null || _a === void 0 ? void 0 : _a.input) {
         this.inputField.input.disabled = disabled;
@@ -628,14 +586,14 @@ var UnifiedBoxManager = exports.UnifiedBoxManager = /** @class */function () {
   };
   UnifiedBoxManager.prototype.focus = function () {
     var _a, _b;
-    if (this.config.type === 'combobox') {
+    if (this.isComboBox) {
       (_a = this.inputField) === null || _a === void 0 ? void 0 : _a.focus();
     } else {
       (_b = this.triggerElement) === null || _b === void 0 ? void 0 : _b.focus();
     }
   };
   UnifiedBoxManager.prototype.destroy = function () {
-    this.cancelDebounceTimer();
+    this.debouncedSearch.cancel();
     this.controller.destroy();
     this.renderer.clearCache();
     this.inputField = undefined;

package/dist/cjs/src/components/badge/Badge.js

@@ -32,7 +32,7 @@ var Badge = function (_a) {
     leadingIcon = _a.leadingIcon,
     trailingIcon = _a.trailingIcon,
     _d = _a.size,
-    size = _d === void 0 ? 'sm' : _d;
+    size = _d === void 0 ? 'xs' : _d;
   return (0, _jsxRuntime.jsxs)("span", __assign({
     className: (0, _classnames.default)('ncua-badge', "ncua-badge--".concat(type), "ncua-badge--".concat(color), "ncua-badge--".concat(size), className)
   }, {

package/dist/cjs/src/components/breadcrumb/BreadCrumb.js

@@ -46,7 +46,7 @@ var BreadCrumb = function (_a) {
       })
     }, {
       children: (0, _jsxRuntime.jsx)(BreadcrumbItem, __assign({
-        href: !isLast ? item.href : undefined
+        href: isLast ? undefined : item.href
       }, {
         children: content
       }))

package/dist/cjs/src/components/button/Button.js

@@ -46,12 +46,14 @@ var dotSize = exports.dotSize = {
   sm: 'md',
   md: 'md'
 };
+var loadableHierarchies = ['primary', 'secondary', 'secondary-gray', 'destructive'];
 var Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _a = props.size,
-    size = _a === void 0 ? 'md' : _a,
+    size = _a === void 0 ? 'xs' : _a,
     children = props.children,
     onlyIcon = props.onlyIcon,
     disabled = props.disabled,
+    loading = props.loading,
     className = props.className,
     _b = props.hierarchy,
     hierarchy = _b === void 0 ? 'secondary-gray' : _b,
@@ -60,7 +62,9 @@ var Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)(function (prop
     trailingIcon = props.trailingIcon,
     _c = props.underline,
     underline = _c === void 0 ? false : _c,
-    restProps = __rest(props, ["size", "children", "onlyIcon", "disabled", "className", "hierarchy", "label", "leadingIcon", "trailingIcon", "underline"]);
+    restProps = __rest(props, ["size", "children", "onlyIcon", "disabled", "loading", "className", "hierarchy", "label", "leadingIcon", "trailingIcon", "underline"]);
+  var isLoading = loading && !onlyIcon && loadableHierarchies.includes(hierarchy);
+  var isDisabled = disabled || isLoading;
   var sideSlotRender = function (slot) {
     var _a, _b, _c;
     var iconSize = onlyIcon ? iconOnlySvgSize[size] : svgSize[size];
@@ -83,14 +87,18 @@ var Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)(function (prop
   return /*#__PURE__*/(0, _react.createElement)('button', __assign(__assign({
     className: (0, _classnames.default)('ncua-btn', "ncua-btn--".concat(size), {
       'only-icon': onlyIcon,
-      'is-disable': disabled,
+      'is-disable': isDisabled,
+      'is-loading': isLoading,
       'has-underline': underline
     }, className, hierarchy && "ncua-btn--".concat(hierarchy)),
-    disabled: disabled
+    disabled: isDisabled,
+    'aria-busy': isLoading || undefined
   }, restProps), {
     ref: ref
   }), (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [leadingIcon && sideSlotRender(leadingIcon), !onlyIcon && label && (0, _jsxRuntime.jsx)("span", __assign({
+    children: [isLoading ? (0, _jsxRuntime.jsx)("span", {
+      className: "ncua-btn__spinner"
+    }) : leadingIcon && sideSlotRender(leadingIcon), !onlyIcon && label && (0, _jsxRuntime.jsx)("span", __assign({
       className: "ncua-btn__label"
     }, {
       children: label

package/dist/cjs/src/components/button/ButtonGroup.js

@@ -9,8 +9,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _color = require("../../../constant/color");
 var _dot = require("../dot");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {

package/dist/cjs/src/components/carousel/CarouselArrow.js

@@ -18,17 +18,17 @@ var __assign = void 0 && (void 0).__assign || function () {
   };
   return __assign.apply(this, arguments);
 };
+var SIZE = 'md';
 var CarouselArrow = function (_a) {
   var _b;
   var _c = _a.type,
     type = _c === void 0 ? 'default' : _c,
     className = _a.className,
-    size = _a.size,
     chevron = _a.chevron,
     onClick = _a.onClick;
   return (0, _jsxRuntime.jsx)("button", __assign({
     type: "button",
-    className: (0, _classnames.default)('ncua-carousel-arrow', (_b = {}, _b["ncua-carousel-arrow--".concat(type)] = type, _b["ncua-carousel-arrow--".concat(size)] = size, _b["ncua-carousel-arrow--".concat(chevron)] = chevron, _b), className),
+    className: (0, _classnames.default)('ncua-carousel-arrow', (_b = {}, _b["ncua-carousel-arrow--".concat(type)] = type, _b["ncua-carousel-arrow--".concat(SIZE)] = SIZE, _b["ncua-carousel-arrow--".concat(chevron)] = chevron, _b), className),
     onClick: onClick
   }, {
     children: chevron === 'left' ? (0, _jsxRuntime.jsx)(_uiAdminIcon.ChevronLeft, {

package/dist/cjs/src/components/carousel/CarouselNumberGroup.js

@@ -17,20 +17,19 @@ var __assign = void 0 && (void 0).__assign || function () {
   };
   return __assign.apply(this, arguments);
 };
+var SIZE = 'sm';
 var CarouselNumberGroup = function (_a) {
   var _b;
   var _c = _a.framed,
     framed = _c === void 0 ? true : _c,
-    _d = _a.size,
-    size = _d === void 0 ? 'sm' : _d,
-    _e = _a.color,
-    color = _e === void 0 ? 'light' : _e,
+    _d = _a.color,
+    color = _d === void 0 ? 'light' : _d,
     currentPage = _a.currentPage,
     totalPage = _a.totalPage;
   return (0, _jsxRuntime.jsxs)("div", __assign({
     className: (0, _classnames.default)('ncua-carousel-number-group', (_b = {
       framed: framed
-    }, _b["ncua-carousel-number-group--".concat(color)] = color, _b["ncua-carousel-number-group--".concat(size)] = size, _b))
+    }, _b["ncua-carousel-number-group--".concat(color)] = color, _b["ncua-carousel-number-group--".concat(SIZE)] = SIZE, _b))
   }, {
     children: [(0, _jsxRuntime.jsx)("span", __assign({
       className: "ncua-carousel-number-group__number"

package/dist/cjs/src/components/checkbox/CheckboxInput.js

@@ -60,7 +60,7 @@ var CheckboxInput = exports.CheckboxInput = /*#__PURE__*/(0, _react.forwardRef)(
           ref.current = node;
         }
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore - ref assignment is needed for internal tracking
+        // @ts-expect-error - ref assignment is needed for internal tracking
         inputRef.current = node;
       },
       onChange: onChange,