@ncds/ui-admin 1.6.4 → 1.8.0

package/dist/esm/assets/scripts/utils/unifiedBox/unifiedBoxManager.js

@@ -0,0 +1,466 @@
+import { debounce } from '../debounce';
+import { DOMRenderer } from './domRenderer';
+import { DropdownModel } from './dropdownModel';
+import { UnifiedBoxController } from './unifiedBoxController';
+/**
+ * 통합된 UnifiedBox 클래스
+ * SelectBox와 ComboBox의 기능을 모두 포함
+ */
+export class UnifiedBoxManager {
+  constructor(element) {
+    let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    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 = {
+      options: [],
+      placeholder: this.isComboBox ? '검색하세요' : '선택하세요',
+      maxHeight: 275,
+      disabled: false,
+      size: 'md',
+      multiple: false,
+      showFooterButtons: false,
+      required: false,
+      type: 'selectbox',
+      ...config,
+      searchDebounceMs: config.searchDebounceMs ?? 500
+    };
+    this.debouncedSearch = debounce((value, isApiMode) => {
+      if (isApiMode) {
+        this.model.updateSearchValue(value);
+      } else {
+        this.model.updateSearchAndFilter(value);
+      }
+      this.config.onSearch?.(value);
+      if (value.trim()) {
+        this.controller.open();
+      } else if (!this.model.getState().showAllItems) {
+        this.controller.close();
+      }
+    }, this.config.searchDebounceMs);
+    this.initialize();
+  }
+  initialize() {
+    this.element.innerHTML = '';
+    this.setupElementClasses();
+    // 초기 옵션이 있는지 확인 (select 태그 등에서 파싱된 옵션이 있는 경우)
+    this.hasInitialOptions = this.config.options && this.config.options.length > 0 || false;
+    const filterStrategy = this.isComboBox ? DropdownModel.comboBoxFilterStrategy : DropdownModel.defaultFilterStrategy;
+    this.model = new DropdownModel(this.config.options || [], this.config.multiple || false, filterStrategy);
+    this.renderer = new DOMRenderer();
+    this.createUI();
+    this.setupController();
+    if (this.config.value) {
+      this.model.setValue(this.config.value);
+    }
+  }
+  setupElementClasses() {
+    this.element.className = `${this.baseClass} ${this.baseClass}--${this.config.size}`;
+    if (this.config.disabled) {
+      this.element.classList.add(`${this.baseClass}--disabled`);
+    }
+    if (this.config.multiple) {
+      this.element.classList.add(`${this.baseClass}--multiple`);
+    }
+  }
+  createUI() {
+    if (this.isComboBox) {
+      this.createComboBoxUI();
+    } else {
+      this.createSelectBoxUI();
+    }
+  }
+  createComboBoxUI() {
+    // 컨텐츠 컨테이너
+    const content = DOMRenderer.createElementWithClass('div', 'ncua-combobox__content');
+    this.element.appendChild(content);
+    // 입력 필드 생성
+    this.inputField = this.renderer.createInputField({
+      placeholder: this.config.placeholder || '검색하세요',
+      disabled: this.config.disabled || false,
+      size: this.config.size || 'md',
+      showSearchIcon: true,
+      onInput: value => this.handleInput(value),
+      onClick: () => this.handleInputClick(),
+      onClear: () => this.handleClearInput(),
+      onShowAll: () => this.handleShowAll()
+    });
+    content.appendChild(this.inputField.container);
+    this.triggerElement = this.inputField.input;
+    // 드롭다운 생성
+    this.createDropdown(content);
+  }
+  createSelectBoxUI() {
+    // 트리거 생성
+    const trigger = 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');
+    const valueSpan = DOMRenderer.createElementWithClass('span', 'ncua-selectbox__value', this.config.placeholder);
+    const arrow = DOMRenderer.createSvgIcon('chevron-down', this.config.size === 'xs' ? 14 : 16);
+    arrow.classList.add('ncua-selectbox__arrow');
+    trigger.appendChild(valueSpan);
+    trigger.appendChild(arrow);
+    this.element.appendChild(trigger);
+    this.triggerElement = trigger;
+    this.arrowElement = arrow;
+    // 드롭다운 생성
+    this.createDropdown(this.element);
+  }
+  createDropdown(parent) {
+    const dropdownStructure = this.renderer.createDropdownStructure({
+      maxHeight: this.config.maxHeight || 275,
+      size: this.config.size || 'md',
+      listboxId: `selectbox-${Date.now()}`,
+      noResultsText: '일치하는 결과가 없습니다.'
+    });
+    this.dropdownElement = dropdownStructure.dropdown;
+    // SelectBox 단일 선택 모드일 때 특별한 클래스 추가
+    if (!this.isComboBox && !this.config.multiple) {
+      this.dropdownElement.classList.add('ncua-select-dropdown--selectbox-single');
+    }
+    // 다중 선택 모드일 때 클래스 추가
+    if (this.config.multiple) {
+      this.dropdownElement.classList.add('ncua-select-dropdown--multiple');
+    }
+    parent.appendChild(this.dropdownElement);
+    // 푸터 버튼 추가 (필요한 경우)
+    if (this.config.multiple || this.config.showFooterButtons) {
+      this.footerElement = this.renderer.createFooter({
+        multiple: this.config.multiple,
+        showFooterButtons: this.config.showFooterButtons,
+        selectAllButtonText: this.model.getSelectAllButtonText(),
+        onSelectAll: () => this.handleSelectAll(),
+        onEdit: this.config.onEdit ? () => this.config.onEdit?.() : undefined,
+        onComplete: () => this.handleComplete()
+      });
+      this.dropdownElement.appendChild(this.footerElement);
+    }
+  }
+  setupController() {
+    if (!this.triggerElement || !this.dropdownElement) {
+      throw new Error('Trigger or dropdown element not found');
+    }
+    const controllerConfig = {
+      triggerElement: this.triggerElement,
+      dropdownElement: this.dropdownElement,
+      model: this.model,
+      renderer: this.renderer,
+      renderConfig: {
+        maxHeight: this.config.maxHeight || 275,
+        size: this.config.size || 'md',
+        listboxId: `selectbox-${Date.now()}`,
+        noResultsText: '일치하는 결과가 없습니다.'
+      },
+      onOpen: () => {
+        this.element.classList.add(`${this.baseClass}--open`);
+        if (this.triggerElement) {
+          this.triggerElement.setAttribute('aria-expanded', 'true');
+        }
+        // 화살표 아이콘 회전 (selectbox 타입일 때만)
+        if (!this.isComboBox && this.arrowElement) {
+          this.arrowElement.classList.add('ncua-selectbox__arrow--up');
+        }
+      },
+      onClose: () => {
+        this.element.classList.remove(`${this.baseClass}--open`);
+        if (this.triggerElement) {
+          this.triggerElement.setAttribute('aria-expanded', 'false');
+        }
+        // 화살표 아이콘 원래대로 (selectbox 타입일 때만)
+        if (!this.isComboBox && this.arrowElement) {
+          this.arrowElement.classList.remove('ncua-selectbox__arrow--up');
+        }
+      },
+      onSelectionChange: selectedValues => {
+        this.handleSelectionChange(selectedValues);
+      },
+      onSearch: searchValue => {
+        this.config.onSearch?.(searchValue);
+      },
+      onScrollBottom: this.config.onScrollBottom,
+      disabled: this.config.disabled || false,
+      canToggle: () => this.canToggleDropdown(),
+      type: this.config.type // 타입 정보 전달
+    };
+    this.controller = new UnifiedBoxController(controllerConfig);
+  }
+  // 이벤트 핸들러들
+  handleInput(value) {
+    this.debouncedSearch.cancel();
+    const isApiMode = this.isComboBox && !this.hasInitialOptions;
+    // API 모드에서는 검색어 변경 추적
+    if (isApiMode && this.lastSearchValue !== value) {
+      this.lastSearchValue = value;
+    }
+    // 디바운싱이 설정되어 있으면 디바운스 유틸리티 사용
+    if (this.config.searchDebounceMs > 0) {
+      this.debouncedSearch(value, isApiMode);
+    } else {
+      // 디바운싱이 0이면 즉시 실행
+      this.model.updateSearchAndFilter(value);
+      const 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();
+      }
+      this.config.onSearch?.(value);
+    }
+  }
+  handleInputClick() {
+    if (!this.config.disabled) {
+      this.inputField?.focus();
+      if (this.isComboBox) {
+        const currentInputValue = this.inputField?.input.value || '';
+        if (currentInputValue.trim().length > 0 || this.model.getState().showAllItems) {
+          this.controller.open();
+        }
+      }
+    }
+  }
+  handleClearInput() {
+    this.debouncedSearch.cancel();
+    // input 필드 텍스트 지우기
+    if (this.inputField) {
+      this.inputField.setValue('');
+    }
+    // 모델의 검색값도 초기화
+    this.model.clearInput();
+    // ComboBox 타입이고 초기 옵션이 없는 경우 (API 모드)
+    // Clear 버튼 클릭 시 옵션도 완전히 비우기
+    const isApiMode = this.isComboBox && !this.hasInitialOptions;
+    if (isApiMode) {
+      this.model.updateOptions([]);
+      this.lastSearchValue = '';
+    }
+    this.controller.close();
+  }
+  async handleShowAll() {
+    if (!this.config.disabled) {
+      this.inputField?.focus();
+      this.inputField?.setValue('');
+      this.model.updateSearchAndFilter('', true);
+      // onSearchAll 콜백 호출 (async 함수일 경우를 대비해 Promise.resolve로 감싸서 처리)
+      await Promise.resolve(this.config.onSearchAll?.());
+      const hasOptions = this.model.getState().options.length > 0 || this.model.getState().filteredOptions.length > 0;
+      if (hasOptions) {
+        this.controller.open();
+      }
+    }
+  }
+  handleSelectionChange(selectedValues) {
+    this.debouncedSearch.cancel();
+    const result = this.config.multiple ? selectedValues : selectedValues[0] || '';
+    this.config.onChange?.(result);
+    // UI 업데이트
+    if (!this.isComboBox) {
+      this.updateSelectBoxValue();
+    }
+    // 다중 선택인 경우 전체 선택 버튼 텍스트 업데이트
+    if (this.config.multiple) {
+      this.updateSelectAllButtonText();
+    }
+    // 단일 선택 시 드롭다운 닫기
+    if (!this.config.multiple && !this.config.showFooterButtons) {
+      this.controller.close();
+    }
+  }
+  updateSelectBoxValue() {
+    const valueSpan = this.element.querySelector('.ncua-selectbox__value');
+    if (valueSpan) {
+      if (this.config.multiple) {
+        // Multiple 모드일 때는 항상 placeholder 표시
+        valueSpan.textContent = this.config.placeholder || '';
+      } else {
+        // Single 모드일 때는 선택된 옵션 또는 placeholder 표시
+        const selectedOptions = this.model.getSelectedOptions();
+        const selectedOption = selectedOptions[0];
+        valueSpan.textContent = selectedOption ? selectedOption.label : this.config.placeholder || '';
+      }
+    }
+  }
+  canToggleDropdown() {
+    if (this.isComboBox) {
+      // ComboBox의 경우: 인풋에 텍스트가 있으면 항상 토글 가능
+      const currentInputValue = this.inputField?.input.value || '';
+      return currentInputValue.trim().length > 0 || this.model.getState().showAllItems;
+    }
+    return true; // SelectBox는 항상 토글 가능
+  }
+  // 푸터 버튼 핸들러들
+  handleSelectAll() {
+    if (this.config.multiple) {
+      this.model.toggleSelectAll();
+      this.updateSelectAllButtonText();
+      // 외부 콜백 호출
+      this.config.onSelectAll?.();
+    }
+  }
+  handleComplete() {
+    if (this.config.multiple || this.isComboBox) {
+      const currentValues = this.model.getValue();
+      // SelectBox 타입이고 multiple 모드일 때만 onChange 콜백으로 현재 선택된 값들 전달
+      if (!this.isComboBox && this.config.multiple && Array.isArray(currentValues)) {
+        this.config.onChange?.(currentValues);
+      }
+      this.config.onComplete?.();
+      // ComboBox 타입인 경우에만 값 초기화 및 검색어 초기화
+      if (this.isComboBox) {
+        this.model.setValue([]);
+        if (this.inputField) {
+          this.inputField.setValue('');
+        }
+        this.model.clearInput();
+        const isApiMode = !this.hasInitialOptions;
+        if (isApiMode) {
+          this.model.updateOptions([]);
+          this.lastSearchValue = '';
+        }
+      }
+      this.controller.close();
+    }
+  }
+  updateSelectAllButtonText() {
+    if (!this.config.multiple || !this.footerElement) return;
+    this.renderer.updateSelectAllButtonText(this.footerElement, this.model.getSelectAllButtonText());
+  }
+  // Public API
+  getValues() {
+    const selectedIds = this.model.getValue();
+    const allOptions = this.getOptions();
+    // selectedIds가 배열이 아닌 경우 배열로 변환
+    const ids = Array.isArray(selectedIds) ? selectedIds : selectedIds ? [selectedIds] : [];
+    // 선택된 id에 해당하는 옵션 객체들을 찾아서 반환
+    return ids.map(id => allOptions.find(opt => opt.id === id)).filter(opt => opt !== undefined);
+  }
+  getOptions() {
+    return this.config.options || [];
+  }
+  setValues(value) {
+    // 옵션 객체 배열에서 id 배열로 변환
+    const ids = value.map(option => option.id);
+    // 단일 선택 모드인 경우 첫 번째 값만 사용
+    const finalIds = this.config.multiple ? ids : ids[0] || '';
+    this.model.setValue(finalIds);
+    if (!this.isComboBox) {
+      this.updateSelectBoxValue();
+    } else {
+      // ComboBox의 경우 input 필드도 업데이트
+      if (this.inputField) {
+        const isEmpty = value.length === 0;
+        if (isEmpty) {
+          // 빈 값으로 설정할 때 input 필드와 검색값 모두 비우기
+          this.inputField.setValue('');
+          this.model.updateSearchAndFilter('');
+        }
+      }
+    }
+  }
+  updateOptions(newOptions) {
+    // config.options도 업데이트 (getOptions()가 이를 반환하므로)
+    this.config.options = [...newOptions];
+    this.model.updateOptions(newOptions);
+    this.controller.updateOptions(newOptions);
+  }
+  setDisabled(disabled) {
+    this.config.disabled = disabled;
+    const disabledClass = `${this.baseClass}--disabled`;
+    this.element.classList.toggle(disabledClass, disabled);
+    if (this.controller) {
+      this.controller.setDisabled(disabled);
+    }
+    if (this.isComboBox) {
+      // 입력 필드 비활성화
+      if (this.inputField?.input) {
+        this.inputField.input.disabled = disabled;
+        this.inputField.container?.classList.toggle('is-disabled', disabled);
+      }
+    } else if (this.triggerElement) {
+      this.triggerElement.setAttribute('tabindex', disabled ? '-1' : '0');
+    }
+  }
+  open() {
+    this.controller.open();
+  }
+  close() {
+    this.controller.close();
+  }
+  focus() {
+    if (this.isComboBox) {
+      this.inputField?.focus();
+    } else {
+      this.triggerElement?.focus();
+    }
+  }
+  destroy() {
+    this.debouncedSearch.cancel();
+    this.controller.destroy();
+    this.renderer.clearCache();
+    this.inputField = undefined;
+  }
+  // Multiple 모드 전용 메서드들
+  selectAll() {
+    if (this.config.multiple) {
+      const allOptionIds = this.config.options?.map(option => option.id) || [];
+      this.model.setValue(allOptionIds);
+    }
+  }
+  deselectAll() {
+    if (this.config.multiple) {
+      this.model.setValue([]);
+    }
+  }
+  isMultiple() {
+    return this.config.multiple || false;
+  }
+  toggleSelectAll() {
+    if (!this.config.multiple) return;
+    const currentValues = this.model.getValue();
+    const allOptionIds = this.config.options?.map(option => option.id) || [];
+    if (Array.isArray(currentValues) && currentValues.length === allOptionIds.length) {
+      // 모든 옵션이 선택되어 있으면 전체 해제
+      this.deselectAll();
+    } else {
+      // 일부만 선택되어 있거나 아무것도 선택되지 않았으면 전체 선택
+      this.selectAll();
+    }
+  }
+  // 디버깅용
+  getDebugInfo() {
+    return {
+      config: this.config,
+      modelState: this.model.getDebugInfo(),
+      isOpen: this.model.getState().isOpen
+    };
+  }
+  /**
+   * 드롭다운을 스크롤의 바닥으로 이동
+   * 전체 선택 시 추가 데이터 로드를 트리거하기 위해 사용
+   */
+  scrollToBottom() {
+    if (!this.dropdownElement) return;
+    const optionsList = this.dropdownElement.querySelector('.ncua-select-dropdown__options');
+    if (!optionsList) return;
+    // 스크롤을 바닥으로 이동
+    optionsList.scrollTop = optionsList.scrollHeight;
+  }
+  /**
+   * 전체 선택 버튼의 텍스트를 외부에서 변경
+   * @param text 버튼에 표시할 텍스트
+   */
+  setSelectAllButtonText(text) {
+    if (!this.config.multiple || !this.footerElement) return;
+    this.renderer.updateSelectAllButtonText(this.footerElement, text);
+  }
+  /**
+   * 특정 인덱스의 옵션으로 포커스 이동
+   * @param index 포커스를 이동할 옵션의 인덱스
+   */
+  setFocusIndex(index) {
+    this.controller.setFocus(index);
+  }
+}

package/dist/esm/constant/color.js

@@ -1,4 +1,4 @@
-export var COLOR = {
+export const COLOR = {
   gray100: '#EAECF0',
   gray200: '#D0D5DD',
   gray300: '#98A2B3',

package/dist/esm/index.js

@@ -1,29 +1,2 @@
-export * from './src/components/badge';
-export * from './src/components/breadcrumb';
-export * from './src/components/button';
-export * from './src/components/carousel';
-export * from './src/components/checkbox';
-export * from './src/components/date-picker';
-export * from './src/components/divider';
-export * from './src/components/dropdown';
-export * from './src/components/empty-state';
-export * from './src/components/featured-icon';
-export * from './src/components/input';
-export * from './src/components/modal';
-export * from './src/components/notification';
-export * from './src/components/pagination';
-export * from './src/components/progress-bar';
-export * from './src/components/progress-circle';
-export * from './src/components/radio';
-export * from './src/components/select';
-export * from './src/components/shared/hintText';
-export * from './src/components/shared/label';
-export * from './src/components/shared';
-export * from './src/components/slider';
-export * from './src/components/spinner';
-export * from './src/components/tab';
-export * from './src/components/tag';
-export * from './src/components/toggle';
-export * from './src/components/tooltip';
 export * from './src/components';
 export * from './src/hooks';

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

@@ -1,44 +1,32 @@
-var __assign = this && this.__assign || function () {
-  __assign = Object.assign || function (t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-    }
-    return t;
-  };
-  return __assign.apply(this, arguments);
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { sideSlotRender } from './utils';
 /**
  * 뱃지 컴포넌트의 아이콘은 디자인 시스템에서 12px 고정으로 정의되어 있습니다.
  */
-var BADGE_ICON_SIZE = 12;
-export var Badge = function (_a) {
-  var label = _a.label,
-    _b = _a.type,
-    type = _b === void 0 ? 'pill-outline' : _b,
-    _c = _a.color,
-    color = _c === void 0 ? 'neutral' : _c,
-    className = _a.className,
-    leadingIcon = _a.leadingIcon,
-    trailingIcon = _a.trailingIcon,
-    _d = _a.size,
-    size = _d === void 0 ? 'sm' : _d;
-  return _jsxs("span", __assign({
-    className: classNames('ncua-badge', "ncua-badge--".concat(type), "ncua-badge--".concat(color), "ncua-badge--".concat(size), className)
-  }, {
+const BADGE_ICON_SIZE = 12;
+const Badge = _ref => {
+  let {
+    label,
+    type = 'pill-outline',
+    color = 'neutral',
+    className,
+    leadingIcon,
+    trailingIcon,
+    size = 'xs'
+  } = _ref;
+  return _jsxs("span", {
+    className: classNames('ncua-badge', `ncua-badge--${type}`, `ncua-badge--${color}`, `ncua-badge--${size}`, className),
     children: [leadingIcon && sideSlotRender({
       slot: leadingIcon,
       defaultIconSize: BADGE_ICON_SIZE
-    }), _jsx("span", __assign({
-      className: "ncua-badge__label"
-    }, {
+    }), _jsx("span", {
+      className: "ncua-badge__label",
       children: label
-    })), trailingIcon && sideSlotRender({
+    }), trailingIcon && sideSlotRender({
       slot: trailingIcon,
       defaultIconSize: BADGE_ICON_SIZE
     })]
-  }));
-};
+  });
+};
+export { Badge };

package/dist/esm/src/components/badge/index.js

@@ -1,2 +1 @@
-export * from './Badge';
-export * from './BadgeGroup';
+export * from './Badge';

package/dist/esm/src/components/badge/utils.js

@@ -1,24 +1,26 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { COLOR } from '../../../constant/color';
 import { Dot } from '../dot/Dot';
-var DEFAULT_DOT_COLOR = 'neutral';
-export var sideSlotRender = function (_a) {
-  var _b, _c, _d, _e;
-  var slot = _a.slot,
-    defaultIconSize = _a.defaultIconSize;
+const DEFAULT_DOT_COLOR = 'neutral';
+const sideSlotRender = _ref => {
+  let {
+    slot,
+    defaultIconSize
+  } = _ref;
   if (slot.type === 'icon') {
-    var Icon = slot.icon;
+    const Icon = slot.icon;
     return _jsx(Icon, {
-      height: (_b = slot.size) !== null && _b !== void 0 ? _b : defaultIconSize,
-      width: (_c = slot.size) !== null && _c !== void 0 ? _c : defaultIconSize,
+      height: slot.size ?? defaultIconSize,
+      width: slot.size ?? defaultIconSize,
       color: slot.color ? COLOR[slot.color] : undefined
     });
   }
   if (slot.type === 'dot') {
     return _jsx(Dot, {
-      color: (_d = slot.color) !== null && _d !== void 0 ? _d : DEFAULT_DOT_COLOR,
-      size: (_e = slot.size) !== null && _e !== void 0 ? _e : 'sm'
+      color: slot.color ?? DEFAULT_DOT_COLOR,
+      size: slot.size ?? 'sm'
     });
   }
   return slot.children;
-};
+};
+export { sideSlotRender };

package/dist/esm/src/components/badge-group/BadgeGroup.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { Badge } from '../badge';
+import { sideSlotRender } from '../badge/utils';
+const DEFAULT_GROUP_ICON_SIZE = 14;
+const BadgeGroup = _ref => {
+  let {
+    groupLabel,
+    groupIcon,
+    groupClassName,
+    color = 'neutral',
+    size = 'sm',
+    href,
+    target = '_blank',
+    ...props
+  } = _ref;
+  return _jsxs("a", {
+    className: classNames('ncua-badge-group', `ncua-badge-group--${color}`, `ncua-badge-group--${size}`, groupClassName),
+    href: href,
+    target: target,
+    children: [_jsx(Badge, {
+      type: "pill-dark-color",
+      color: color,
+      size: size,
+      ...props
+    }), _jsx("span", {
+      className: "ncua-badge-group__label",
+      children: groupLabel
+    }), groupIcon && sideSlotRender({
+      slot: groupIcon,
+      defaultIconSize: DEFAULT_GROUP_ICON_SIZE
+    })]
+  });
+};
+export { BadgeGroup };

package/dist/esm/src/components/badge-group/index.js

@@ -0,0 +1 @@
+export * from './BadgeGroup';