@ncds/ui-admin 1.8.1 → 1.8.3

package/dist/esm/src/components/overlays/notification/MessageNotification.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertCircle, AlertTriangle, CheckCircle, Pin02, XClose } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+import { COLOR } from '../../../../constant/color';
+import { Button } from '../../action/button';
+import { FeaturedIcon } from '../../image-and-icons/featured-icon/FeaturedIcon';
+const iconMap = {
+  neutral: Pin02,
+  error: AlertTriangle,
+  warning: AlertCircle,
+  success: CheckCircle
+};
+const iconColorMap = {
+  neutral: 'gray700',
+  error: 'red500',
+  warning: 'orange500',
+  success: 'green600'
+};
+const MessageNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    title,
+    supportingText,
+    icon: Icon,
+    color = 'neutral',
+    onClose,
+    className,
+    actions,
+    onHidePermanently,
+    ...rest
+  } = _ref;
+  // message 타입은 neutral, error, warning, success 4가지 색상만 지원
+  const validColor = color === 'info' ? 'neutral' : color;
+  const iconColor = validColor;
+  const featuredIconProps = {
+    icon: Icon || iconMap[validColor] || Pin02,
+    size: 'lg',
+    color: iconColor,
+    theme: 'light-circle'
+  };
+  const closeIconColor = COLOR[iconColorMap[validColor] || 'gray700'];
+  return _jsx("div", {
+    ref: ref,
+    className: classNames('ncua-message-notification', `ncua-message-notification--${validColor}`, className),
+    role: "alert",
+    ...rest,
+    children: _jsx("div", {
+      className: "ncua-message-notification__container",
+      children: _jsxs("div", {
+        className: "ncua-message-notification__content",
+        children: [_jsxs("div", {
+          className: "ncua-message-notification__content-wrapper",
+          children: [iconMap[validColor] && _jsx(FeaturedIcon, {
+            ...featuredIconProps,
+            className: "ncua-message-notification__icon"
+          }), _jsxs("div", {
+            className: "ncua-message-notification__text-container",
+            children: [_jsx("span", {
+              className: "ncua-message-notification__title",
+              children: title
+            }), supportingText && _jsx("span", {
+              className: "ncua-message-notification__supporting-text",
+              children: supportingText
+            })]
+          })]
+        }), _jsx("div", {
+          className: "ncua-message-notification__actions-container",
+          children: actions && _jsx("div", {
+            className: "ncua-message-notification__actions",
+            children: actions.map(action => _jsx(Button, {
+              size: "xs",
+              hierarchy: action.hierarchy || 'text',
+              label: action.label,
+              onClick: action?.onClick
+            }, `${action.label}-${action.hierarchy}`))
+          })
+        }), _jsxs("div", {
+          className: "ncua-message-notification__footer-container",
+          children: [onHidePermanently && _jsx("button", {
+            type: "button",
+            className: classNames('ncua-notification__action-button', 'ncua-notification__action-button--link', 'ncua-message-notification__hide-link'),
+            onClick: onHidePermanently,
+            children: "\uB2E4\uC2DC \uBCF4\uC9C0 \uC54A\uAE30"
+          }), onClose && _jsx("button", {
+            type: "button",
+            className: "ncua-message-notification__close-button",
+            onClick: onClose,
+            "aria-label": "\uC54C\uB9BC \uB2EB\uAE30",
+            children: _jsx(XClose, {
+              width: 20,
+              height: 20,
+              color: closeIconColor
+            })
+          })]
+        })]
+      })
+    })
+  });
+});
+MessageNotification.displayName = 'MessageNotification';
+export { MessageNotification };

package/dist/esm/src/components/overlays/tooltip/Tooltip.js

@@ -0,0 +1,222 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AlertCircle, AlertCircleFill, HelpCircle, HelpCircleFill } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { ButtonCloseX } from '../../action/button/ButtonCloseX';
+const ICON_SIZE_SM = 14;
+const ICON_SIZE_DEFAULT = 16;
+// HTML 구현체(assets/scripts/tooltip)와 동일한 상수
+const TOOLTIP_OFFSET = 6;
+const VIEWPORT_MARGIN = 8;
+const EDGE_ALIGN_OFFSET = 12;
+const OFFSCREEN = -99999;
+// HTML 구현체(TooltipLayerManager)가 body에 만드는 `#tooltip-global-layer`와 동일 id.
+// 둘 중 한쪽만 바뀌면 포털이 body로 fallback되며 사일런트 동작 이상이 날 수 있으므로 함께 유지한다.
+const GLOBAL_LAYER_ID = 'tooltip-global-layer';
+// body 하위의 전역 레이어를 찾거나 없으면 body로 fallback
+const resolvePortalTarget = () => {
+  if (typeof document === 'undefined') return null;
+  return document.getElementById(GLOBAL_LAYER_ID) ?? document.body;
+};
+// 앵커 rect와 패널 rect를 기반으로 viewport 고정 좌표 계산
+const computePanelCoords = (prefer, anchor, panel) => {
+  let resolved = prefer;
+  if (resolved === 'auto') {
+    const enoughTop = anchor.top - TOOLTIP_OFFSET - panel.height >= VIEWPORT_MARGIN;
+    resolved = enoughTop ? 'top' : 'bottom';
+  }
+  let top = 0;
+  let left = 0;
+  let calculatedPosition = 'bottom';
+  if (resolved === 'bottom') {
+    top = anchor.bottom + TOOLTIP_OFFSET;
+    left = anchor.left + anchor.width / 2 - panel.width / 2;
+    calculatedPosition = 'bottom';
+  } else if (resolved === 'top') {
+    top = anchor.top - panel.height - TOOLTIP_OFFSET;
+    left = anchor.left + anchor.width / 2 - panel.width / 2;
+    calculatedPosition = 'top';
+  } else if (resolved === 'left') {
+    top = anchor.top + anchor.height / 2 - panel.height / 2;
+    left = anchor.left - panel.width - TOOLTIP_OFFSET;
+    calculatedPosition = 'left';
+  } else if (resolved === 'right') {
+    top = anchor.top + anchor.height / 2 - panel.height / 2;
+    left = anchor.right + TOOLTIP_OFFSET;
+    calculatedPosition = 'right';
+  } else if (resolved === 'top-left') {
+    top = anchor.top - panel.height - TOOLTIP_OFFSET;
+    left = anchor.left - EDGE_ALIGN_OFFSET;
+    calculatedPosition = 'top-left';
+  } else if (resolved === 'top-right') {
+    top = anchor.top - panel.height - TOOLTIP_OFFSET;
+    left = anchor.right - panel.width + EDGE_ALIGN_OFFSET;
+    calculatedPosition = 'top-right';
+  } else if (resolved === 'bottom-left') {
+    top = anchor.bottom + TOOLTIP_OFFSET;
+    left = anchor.left - EDGE_ALIGN_OFFSET;
+    calculatedPosition = 'bottom-left';
+  } else if (resolved === 'bottom-right') {
+    top = anchor.bottom + TOOLTIP_OFFSET;
+    left = anchor.right - panel.width + EDGE_ALIGN_OFFSET;
+    calculatedPosition = 'bottom-right';
+  }
+  left = Math.max(VIEWPORT_MARGIN, Math.min(left, window.innerWidth - panel.width - VIEWPORT_MARGIN));
+  top = Math.max(VIEWPORT_MARGIN, Math.min(top, window.innerHeight - panel.height - VIEWPORT_MARGIN));
+  return {
+    top: Math.round(top),
+    left: Math.round(left),
+    calculatedPosition
+  };
+};
+export const Tooltip = _ref => {
+  let {
+    tooltipType = 'white',
+    iconType = 'stroke',
+    position = 'auto',
+    size = 'sm',
+    title,
+    content,
+    hideArrow = false,
+    type = 'short',
+    iconColor = 'var(--gray-300)',
+    iconStyle = 'help-circle',
+    className,
+    zIndex
+  } = _ref;
+  const iconSize = size === 'sm' ? ICON_SIZE_SM : ICON_SIZE_DEFAULT;
+  const anchorRef = useRef(null);
+  const panelRef = useRef(null);
+  const rafIdRef = useRef(null);
+  const [mounted, setMounted] = useState(false);
+  const [coords, setCoords] = useState({
+    top: OFFSCREEN,
+    left: OFFSCREEN
+  });
+  const [calculatedPosition, setCalculatedPosition] = useState(position === 'auto' ? 'bottom' : position);
+  const [isVisible, setIsVisible] = useState(false);
+  const [isManuallyClose, setIsManuallyClose] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+    return () => {
+      if (rafIdRef.current !== null) {
+        cancelAnimationFrame(rafIdRef.current);
+        rafIdRef.current = null;
+      }
+    };
+  }, []);
+  const updatePosition = useCallback(() => {
+    if (!anchorRef.current || !panelRef.current) return;
+    const anchor = anchorRef.current.getBoundingClientRect();
+    const panel = panelRef.current.getBoundingClientRect();
+    const next = computePanelCoords(position, anchor, panel);
+    setCoords({
+      top: next.top,
+      left: next.left
+    });
+    setCalculatedPosition(next.calculatedPosition);
+  }, [position]);
+  useEffect(() => {
+    if (!isVisible) return;
+    updatePosition();
+    window.addEventListener('resize', updatePosition, {
+      passive: true
+    });
+    window.addEventListener('scroll', updatePosition, {
+      passive: true,
+      capture: true
+    });
+    return () => {
+      window.removeEventListener('resize', updatePosition);
+      window.removeEventListener('scroll', updatePosition, {
+        capture: true
+      });
+    };
+  }, [isVisible, updatePosition]);
+  const handleMouseEnter = useCallback(() => {
+    if (isManuallyClose) return;
+    // opacity 전환 전에 좌표 확정 (ref 가드는 updatePosition 내부)
+    updatePosition();
+    // 웹폰트 로드·max-content 재계산 등 비동기 layout 안정화 후 한 번 더 보정
+    // 빠른 hover in/out 시 이전 프레임 요청은 취소해 중복/unmount 후 실행 방지
+    if (rafIdRef.current !== null) cancelAnimationFrame(rafIdRef.current);
+    rafIdRef.current = requestAnimationFrame(() => {
+      rafIdRef.current = null;
+      updatePosition();
+    });
+    setIsVisible(true);
+  }, [isManuallyClose, updatePosition]);
+  const handleMouseLeave = useCallback(() => {
+    if (type === 'short') {
+      setIsVisible(false);
+    }
+    setIsManuallyClose(false);
+  }, [type]);
+  const handleCloseClick = useCallback(() => {
+    setIsVisible(false);
+    setIsManuallyClose(true);
+  }, []);
+  const finalPosition = position === 'auto' ? calculatedPosition : position;
+  const tooltipClassName = useMemo(() => classNames('ncua-tooltip', `ncua-tooltip--${size}`, `ncua-tooltip--${type}`, {
+    'ncua-tooltip--hidden-arrow': hideArrow,
+    'ncua-tooltip--stroke': iconType === 'stroke',
+    'ncua-tooltip--auto': position === 'auto'
+  }, className), [size, type, hideArrow, iconType, position, className]);
+  const panelClassName = useMemo(() => classNames('ncua-tooltip-panel', 'ncua-tooltip__bg', `ncua-tooltip__bg--${tooltipType}`, `ncua-tooltip__bg--${finalPosition}`, {
+    'ncua-tooltip__bg--visible': isVisible,
+    'ncua-tooltip__bg--force-hidden': isManuallyClose
+  }), [tooltipType, finalPosition, isVisible, isManuallyClose]);
+  const panelStyle = {
+    top: `${coords.top}px`,
+    left: `${coords.left}px`,
+    opacity: isVisible ? 1 : 0,
+    ...(zIndex && {
+      zIndex
+    })
+  };
+  const portalTarget = mounted ? resolvePortalTarget() : null;
+  const panel = _jsxs("span", {
+    ref: panelRef,
+    className: panelClassName,
+    style: panelStyle,
+    children: [title && _jsx("span", {
+      className: "ncua-tooltip__title",
+      children: title
+    }), content && _jsx("span", {
+      className: "ncua-tooltip__content",
+      children: content
+    }), type === 'long' && _jsx(ButtonCloseX, {
+      className: "ncua-tooltip__close-button",
+      size: "xs",
+      theme: tooltipType === 'white' ? 'dark' : 'light',
+      onClick: handleCloseClick,
+      "aria-label": "\uD234\uD301 \uB2EB\uAE30"
+    })]
+  });
+  return _jsxs(_Fragment, {
+    children: [_jsxs("span", {
+      ref: anchorRef,
+      className: tooltipClassName,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: [iconStyle === 'help-circle' && (iconType === 'stroke' ? _jsx(HelpCircle, {
+        width: iconSize,
+        height: iconSize,
+        color: iconColor
+      }) : _jsx(HelpCircleFill, {
+        width: iconSize,
+        height: iconSize,
+        color: iconColor
+      })), iconStyle === 'alert-circle' && (iconType === 'stroke' ? _jsx(AlertCircle, {
+        width: iconSize,
+        height: iconSize,
+        color: iconColor
+      }) : _jsx(AlertCircleFill, {
+        width: iconSize,
+        height: iconSize,
+        color: iconColor
+      }))]
+    }), portalTarget && /*#__PURE__*/createPortal(panel, portalTarget)]
+  });
+};

package/dist/esm/src/components/select-dropdown/SelectDropdown.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { forwardRef } from 'react';
-import { Button } from '../button';
+import { Button } from '../action/button';
 const SelectDropdown = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     isOpen,

package/dist/esm/src/components/select-dropdown/index.js

@@ -1 +1 @@
-export { SelectDropdown } from './SelectDropdown';
+export * from './SelectDropdown';

package/dist/esm/src/components/tab/TabButton.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { XClose } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
-import { Badge } from '../badge/Badge';
+import { Badge } from '../feedback-and-status/badge/Badge';
 const TabButton = _ref => {
   let {
     id,

package/dist/esm/src/hooks/dropdown/index.js

@@ -1,6 +1,6 @@
-export { useDropdown } from './useDropdown';
-export { useDropdownKeyboard } from './useDropdownKeyboard';
-export { useDropdownPosition } from './useDropdownPosition';
-export { useOutsideClick } from './useOutsideClick';
-export { useScrollLock } from './useScrollLock';
-export { useWindowResize } from './useWindowResize';
+export * from './useDropdown';
+export * from './useDropdownKeyboard';
+export * from './useDropdownPosition';
+export * from './useOutsideClick';
+export * from './useScrollLock';
+export * from './useWindowResize';

package/dist/esm/src/hooks/index.js

@@ -1,6 +1,6 @@
 // 기존 공통 hooks
 // 드롭다운 관련 hooks
 export * from './dropdown';
-export { useCallbackRef } from './useCallbackRef';
-export { useMediaQuery } from './useMediaQuery';
-export { useMergeRefs } from './useMergeRefs';
+export * from './useCallbackRef';
+export * from './useMediaQuery';
+export * from './useMergeRefs';

package/dist/esm/src/types/component-meta.js

@@ -0,0 +1,2 @@
+/** AI 에이전트용 컴포넌트 메타데이터 타입 */
+export {};

package/dist/esm/vitest.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vitest/config';
+export default defineConfig({
+  test: {
+    include: ['scripts/**/__tests__/**/*.test.ts', 'src/**/__tests__/**/*.test.ts', 'assets/scripts/**/__tests__/**/*.test.ts'],
+    environment: 'node'
+  }
+});

package/dist/temp/assets/scripts/slider.js

@@ -1,3 +1,7 @@
+const DEFAULT_MIN = 0;
+const DEFAULT_MAX = 100;
+const DEFAULT_STEP = 1;
+const PERCENT = 100;
 export class Slider {
     constructor(element, options) {
         this.activeHandle = null;
@@ -40,17 +44,19 @@ export class Slider {
             this.isDragging = false;
         };
         this.element = element;
-        this.options = Object.assign({
-            min: 0,
-            max: 100,
-            step: 1,
-            value: 0,
-            disabled: false,
-        }, options);
+        // 화이트리스트 기반 옵션 복사. SliderOptions에 정의된 키만 받아들여
+        // __proto__, constructor, prototype 같은 위험 키가 외부 입력으로 들어와도
+        // Object.prototype을 오염시킬 수 없다 (CWE-1321 Prototype Pollution 차단).
+        this.options = {
+            min: Number(options.min ?? DEFAULT_MIN),
+            max: Number(options.max ?? DEFAULT_MAX),
+            step: Number(options.step ?? DEFAULT_STEP),
+            value: options.value ?? DEFAULT_MIN,
+            onChange: options.onChange,
+            labelPosition: options.labelPosition,
+            disabled: options.disabled ?? false,
+        };
         this.value = this.options.value;
-        this.options.min = Number(this.options.min);
-        this.options.max = Number(this.options.max);
-        this.options.step = Number(this.options.step);
         this.init();
     }
     init() {
@@ -105,19 +111,20 @@ export class Slider {
         });
         if (this.options.labelPosition === 'bottom') {
             const label = document.createElement('div');
-            label.className = `ncua-slider__label`;
+            label.className = 'ncua-slider__label';
             label.textContent = `${value}%`;
             handle.appendChild(label);
         }
         if (this.options.labelPosition === 'top-floating') {
             const label = document.createElement('div');
-            label.className = `ncua-slider__label ncua-slider__label--tooltip`;
+            label.className = 'ncua-slider__label ncua-slider__label--tooltip';
             label.textContent = `${value}%`;
             handle.appendChild(label);
         }
         this.element.appendChild(handle);
         this.handleElements[index] = handle;
     }
+    // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: 단일/range 분기와 라벨/progress 업데이트를 한 함수에 묶는 기존 구조 유지. 분리 리팩토링은 별도 작업 범위.
     updateHandlePositions() {
         if (Array.isArray(this.value)) {
             // Range slider
@@ -181,14 +188,15 @@ export class Slider {
         }
     }
     getPositionFromValue(value) {
-        return ((value - this.options.min) / (this.options.max - this.options.min)) * 100;
+        return ((value - this.options.min) / (this.options.max - this.options.min)) * PERCENT;
     }
     getValueFromPosition(position) {
-        const percentage = Math.min(Math.max(position, 0), 100);
-        const exactValue = this.options.min + (percentage / 100) * (this.options.max - this.options.min);
+        const percentage = Math.min(Math.max(position, 0), PERCENT);
+        const exactValue = this.options.min + (percentage / PERCENT) * (this.options.max - this.options.min);
         const steppedValue = Math.round(exactValue / this.options.step) * this.options.step;
         return Math.min(Math.max(steppedValue, this.options.min), this.options.max);
     }
+    // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: 핸들/트랙 클릭 분기와 가까운 핸들 결정 로직을 한 함수에 묶는 기존 구조 유지. 분리 리팩토링은 별도 작업 범위.
     handleInteractionStart(clientX, target) {
         // 슬라이더 영역 내부를 클릭/터치한 경우
         if (target.closest('.ncua-slider')) {
@@ -202,13 +210,13 @@ export class Slider {
                     this.activeHandle = 1;
                 }
                 else {
-                    this.activeHandle = parseInt(handleElement.dataset.index || '0', 10);
+                    this.activeHandle = Number.parseInt(handleElement.dataset.index || '0', 10);
                 }
             }
             else {
                 // 슬라이더 트랙을 클릭/터치한 경우, 가장 가까운 핸들을 결정
                 const rect = this.element.getBoundingClientRect();
-                const position = ((clientX - rect.left) / rect.width) * 100;
+                const position = ((clientX - rect.left) / rect.width) * PERCENT;
                 if (Array.isArray(this.value)) {
                     const [leftValue, rightValue] = this.value;
                     const leftPosition = this.getPositionFromValue(leftValue);
@@ -237,7 +245,7 @@ export class Slider {
         if (!this.element || this.activeHandle === null)
             return;
         const rect = this.element.getBoundingClientRect();
-        const position = ((clientX - rect.left) / rect.width) * 100;
+        const position = ((clientX - rect.left) / rect.width) * PERCENT;
         const newValue = this.getValueFromPosition(position);
         const prevValue = this.value;
         if (Array.isArray(this.value)) {

package/dist/temp/src/components/action/button/Button.d.ts

@@ -0,0 +1,35 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import type { Size } from '../../../../constant/size';
+import type { SideSlotType } from '../../../types/side-slot';
+import { type DotProps } from '../../image-and-icons/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/action/button/Button.js

@@ -0,0 +1,52 @@
+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 '../../image-and-icons/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/action/button/ButtonCloseX.d.ts

@@ -0,0 +1,10 @@
+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/action/button/ButtonStepper.d.ts

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