@ncds/ui-admin 1.6.4 → 1.8.0

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

@@ -0,0 +1,482 @@
+import { debounce } from '../debounce';
+import { DOMRenderer } from './domRenderer';
+import { DropdownModel } from './dropdownModel';
+import { UnifiedBoxController } from './unifiedBoxController';
+/**
+ * 통합된 UnifiedBox 클래스
+ * SelectBox와 ComboBox의 기능을 모두 포함
+ */
+export class UnifiedBoxManager {
+    constructor(element, config = {}) {
+        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/temp/constant/color.d.ts

@@ -0,0 +1,36 @@
+export declare const COLOR: {
+    gray100: string;
+    gray200: string;
+    gray300: string;
+    gray400: string;
+    gray500: string;
+    gray600: string;
+    gray700: string;
+    blue500: string;
+    blue600: string;
+    red500: string;
+    red600: string;
+    orange500: string;
+    orange600: string;
+    green500: string;
+    green600: string;
+    pink100: string;
+    pink600: string;
+    yellow600: string;
+    violet300: string;
+    violet600: string;
+    white: string;
+    currentColor: string;
+    black: string;
+    'secondary-gray-blue-50': string;
+    'secondary-gray-blue-100': string;
+    'secondary-gray-blue-200': string;
+    'secondary-gray-blue-300': string;
+    'secondary-gray-blue-400': string;
+    'secondary-gray-blue-450': string;
+    'secondary-gray-blue-500': string;
+    'secondary-gray-blue-600': string;
+    'secondary-gray-blue-700': string;
+};
+export type ColorKeyType = keyof typeof COLOR;
+export type ColorTone = 'neutral' | 'error' | 'warning' | 'success' | 'blue' | 'pink' | 'disabled' | 'info';

package/dist/temp/constant/color.js

@@ -0,0 +1,34 @@
+export const COLOR = {
+    gray100: '#EAECF0',
+    gray200: '#D0D5DD',
+    gray300: '#98A2B3',
+    gray400: '#667085',
+    gray500: '#344054',
+    gray600: '#475467',
+    gray700: '#0C111D',
+    blue500: '#1570EF',
+    blue600: '#1849a9',
+    red500: '#ec1d31',
+    red600: '#dc0a2b',
+    orange500: '#e4501e',
+    orange600: '#b93815',
+    green500: '#099250',
+    green600: '#087443',
+    pink100: '#fce7f6',
+    pink600: '#c11574',
+    yellow600: '#c27004',
+    violet300: '#C3B5FD',
+    violet600: '#5720B7',
+    white: '#fff',
+    currentColor: 'currentColor',
+    black: '',
+    'secondary-gray-blue-50': '#f8f9fc',
+    'secondary-gray-blue-100': '#eaecf5',
+    'secondary-gray-blue-200': '#d5d9eb',
+    'secondary-gray-blue-300': '#b3b8db',
+    'secondary-gray-blue-400': '#717bbc',
+    'secondary-gray-blue-450': '#4e5ba6',
+    'secondary-gray-blue-500': '#3e4784',
+    'secondary-gray-blue-600': '#363f72',
+    'secondary-gray-blue-700': '#293056',
+};

package/dist/temp/constant/size.d.ts

@@ -0,0 +1 @@
+export type Size = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';

package/dist/temp/constant/size.js

@@ -0,0 +1 @@
+export {};

package/dist/temp/index.d.ts

@@ -0,0 +1,2 @@
+export * from './src/components';
+export * from './src/hooks';

package/dist/temp/index.js

@@ -0,0 +1,2 @@
+export * from './src/components';
+export * from './src/hooks';

package/dist/temp/src/components/badge/Badge.d.ts

@@ -0,0 +1,18 @@
+import type { ColorTone } from '../../../constant/color';
+import type { Size } from '../../../constant/size';
+import type { SideSlotType } from '../../types/side-slot';
+type BadgeType = 'pill-outline' | 'pill-dark-color';
+type BadgeColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success' | 'blue' | 'pink' | 'disabled'>;
+type BadgeSize = Extract<Size, 'xs' | 'sm' | 'md'>;
+type BadgeProps = {
+    label: string;
+    type?: BadgeType;
+    color?: BadgeColor;
+    className?: string;
+    leadingIcon?: SideSlotType;
+    trailingIcon?: SideSlotType;
+    size?: BadgeSize;
+};
+declare const Badge: ({ label, type, color, className, leadingIcon, trailingIcon, size, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export { Badge };
+export type { BadgeType, BadgeColor, BadgeSize, BadgeProps };

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { sideSlotRender } from './utils';
+/**
+ * 뱃지 컴포넌트의 아이콘은 디자인 시스템에서 12px 고정으로 정의되어 있습니다.
+ */
+const BADGE_ICON_SIZE = 12;
+const Badge = ({ label, type = 'pill-outline', color = 'neutral', className, leadingIcon, trailingIcon, size = 'xs', }) => {
+    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", { className: "ncua-badge__label", children: label }), trailingIcon && sideSlotRender({ slot: trailingIcon, defaultIconSize: BADGE_ICON_SIZE })] }));
+};
+export { Badge };

package/dist/temp/src/components/badge/index.d.ts

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

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

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

package/dist/temp/src/components/badge/utils.d.ts

@@ -0,0 +1,8 @@
+import type { SideSlotType } from '../../types/side-slot';
+type SideSlotRenderProps = {
+    slot: SideSlotType;
+    defaultIconSize: number;
+};
+declare const sideSlotRender: ({ slot, defaultIconSize }: SideSlotRenderProps) => string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export { sideSlotRender };
+export type { SideSlotRenderProps };

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { COLOR } from '../../../constant/color';
+import { Dot } from '../dot/Dot';
+const DEFAULT_DOT_COLOR = 'neutral';
+const sideSlotRender = ({ slot, defaultIconSize }) => {
+    if (slot.type === 'icon') {
+        const Icon = slot.icon;
+        return (_jsx(Icon, { height: slot.size ?? defaultIconSize, width: slot.size ?? defaultIconSize, color: slot.color ? COLOR[slot.color] : undefined }));
+    }
+    if (slot.type === 'dot') {
+        return _jsx(Dot, { color: slot.color ?? DEFAULT_DOT_COLOR, size: (slot.size ?? 'sm') });
+    }
+    return slot.children;
+};
+export { sideSlotRender };

package/dist/temp/src/components/badge-group/BadgeGroup.d.ts

@@ -0,0 +1,18 @@
+import type { ColorTone } from '../../../constant/color';
+import type { Size } from '../../../constant/size';
+import type { SideSlotType } from '../../types/side-slot';
+import { type BadgeProps } from '../badge';
+type BadgeGroupSize = Extract<Size, 'xs' | 'sm'>;
+type BadgeGroupColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success'>;
+type BadgeGroupProps = Omit<BadgeProps, 'type' | 'size' | 'color'> & {
+    groupLabel: string;
+    groupIcon?: SideSlotType;
+    groupClassName?: string;
+    size?: BadgeGroupSize;
+    color?: BadgeGroupColor;
+    href?: string;
+    target?: string;
+};
+declare const BadgeGroup: ({ groupLabel, groupIcon, groupClassName, color, size, href, target, ...props }: BadgeGroupProps) => import("react/jsx-runtime").JSX.Element;
+export { BadgeGroup };
+export type { BadgeGroupSize, BadgeGroupColor, BadgeGroupProps };

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

@@ -0,0 +1,13 @@
+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 = ({ groupLabel, groupIcon, groupClassName, color = 'neutral', size = 'sm', href, target = '_blank', ...props }) => {
+    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/temp/src/components/badge-group/index.d.ts

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

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

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