@ncds/ui-admin 1.8.1 → 1.8.3

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

@@ -1,482 +0,0 @@
-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/src/components/badge/Badge.d.ts

@@ -1,18 +0,0 @@
-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/index.d.ts

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

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

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

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

@@ -1,8 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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/button/Button.d.ts

@@ -1,35 +0,0 @@
-import { type ComponentProps, type ReactNode } from 'react';
-import type { Size } from '../../../constant/size';
-import type { SideSlotType } from '../../types/side-slot';
-import { type DotProps } from '../dot';
-export type ButtonProps = Omit<ComponentProps<'button'>, 'ref'> & {
-    label: ReactNode;
-    className?: string;
-    hierarchy?: ButtonTheme;
-    disabled?: boolean;
-    loading?: boolean;
-    leadingIcon?: SideSlotType;
-    trailingIcon?: SideSlotType;
-    onlyIcon?: boolean;
-    size?: ButtonSize;
-    children?: ReactNode;
-    underline?: boolean;
-};
-export type ButtonTheme = 'primary' | 'secondary' | 'secondary-gray' | 'tertiary-gray' | 'tertiary' | 'text' | 'text-gray' | 'text-red' | 'destructive';
-export type ButtonSize = Extract<Size, 'xxs' | 'xs' | 'sm' | 'md'>;
-export declare const svgSize: Record<ButtonSize, number>;
-export declare const iconOnlySvgSize: Record<ButtonSize, number>;
-export declare const dotSize: Record<ButtonSize, DotProps['size']>;
-export declare const Button: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    label: ReactNode;
-    className?: string | undefined;
-    hierarchy?: ButtonTheme | undefined;
-    disabled?: boolean | undefined;
-    loading?: boolean | undefined;
-    leadingIcon?: SideSlotType | undefined;
-    trailingIcon?: SideSlotType | undefined;
-    onlyIcon?: boolean | undefined;
-    size?: ButtonSize | undefined;
-    children?: ReactNode;
-    underline?: boolean | undefined;
-} & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -1,52 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import classnames from 'classnames';
-import { createElement, forwardRef } from 'react';
-import { COLOR } from '../../../constant/color';
-import { Dot } from '../dot';
-export const svgSize = {
-    xxs: 12,
-    xs: 14,
-    sm: 16,
-    md: 20,
-};
-export const iconOnlySvgSize = {
-    xxs: 14,
-    xs: 16,
-    sm: 20,
-    md: 20,
-};
-export const dotSize = {
-    xxs: 'sm',
-    xs: 'sm',
-    sm: 'md',
-    md: 'md',
-};
-const loadableHierarchies = ['primary', 'secondary', 'secondary-gray', 'destructive'];
-export const Button = forwardRef((props, ref) => {
-    const { size = 'xs', children, onlyIcon, disabled, loading, className, hierarchy = 'secondary-gray', label, leadingIcon, trailingIcon, underline = false, ...restProps } = props;
-    const isLoading = loading && !onlyIcon && loadableHierarchies.includes(hierarchy);
-    const isDisabled = disabled || isLoading;
-    const sideSlotRender = (slot) => {
-        const iconSize = onlyIcon ? iconOnlySvgSize[size] : svgSize[size];
-        if (slot.type === 'icon') {
-            const Icon = slot.icon;
-            return (_jsx(Icon, { height: slot.size ?? iconSize, width: slot.size ?? iconSize, color: slot.color ? COLOR[slot.color] : undefined }));
-        }
-        if (slot.type === 'dot') {
-            return _jsx(Dot, { color: slot.color, size: slot.size ?? dotSize[size] });
-        }
-        return slot.children;
-    };
-    return createElement('button', {
-        className: classnames('ncua-btn', `ncua-btn--${size}`, {
-            'only-icon': onlyIcon,
-            'is-disable': isDisabled,
-            'is-loading': isLoading,
-            'has-underline': underline,
-        }, className, hierarchy && `ncua-btn--${hierarchy}`),
-        disabled: isDisabled,
-        'aria-busy': isLoading || undefined,
-        ...restProps,
-        ref,
-    }, _jsxs(_Fragment, { children: [isLoading ? _jsx("span", { className: "ncua-btn__spinner" }) : leadingIcon && sideSlotRender(leadingIcon), !onlyIcon && label && _jsx("span", { className: "ncua-btn__label", children: label }), children, trailingIcon && sideSlotRender(trailingIcon)] }));
-});

package/dist/temp/src/components/button/ButtonCloseX.d.ts

@@ -1,10 +0,0 @@
-import type { Size } from '../../../constant/size';
-type ButtonCloseXProps = {
-    size: Extract<Size, 'xs' | 'sm' | 'md' | 'lg'>;
-    theme?: 'dark' | 'light';
-    onClick?: () => void;
-    className?: string;
-};
-declare const ButtonCloseX: ({ size, theme, className, onClick }: ButtonCloseXProps) => import("react/jsx-runtime").JSX.Element;
-export { ButtonCloseX };
-export type { ButtonCloseXProps };

package/dist/temp/src/components/button/ButtonStepper.d.ts

@@ -1,9 +0,0 @@
-import type { Size } from '../../../constant/size';
-export type ButtonStepperProps = {
-    size: Extract<Size, 'xs' | 'sm'>;
-    direction: 'up' | 'down';
-    disabled?: boolean;
-    onClick?: () => void;
-    className?: string;
-};
-export declare const ButtonStepper: ({ size, direction, disabled, onClick, className }: ButtonStepperProps) => import("react/jsx-runtime").JSX.Element;