@ncds/ui-admin 1.8.1 → 1.8.3

package/dist/temp/src/components/overlays/modal/Modal.d.ts

@@ -0,0 +1,79 @@
+import { type ReactNode } from 'react';
+import type { SlotIconComponent } from '../../../types/side-slot';
+import { type FeaturedIconColor, type FeaturedIconTheme } from '../../image-and-icons/featured-icon';
+type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type ModalHeaderAlign = 'left' | 'center' | 'horizontal';
+type ModalActionsAlign = 'left' | 'center' | 'right' | 'stretch';
+type ModalActionsLayout = 'vertical' | 'horizontal' | 'checkbox';
+type ModalProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    size?: ModalSize;
+    children: ReactNode;
+    closeOnBackdropClick?: boolean;
+    closeOnEsc?: boolean;
+    className?: string;
+    zIndex?: number;
+};
+declare const Modal: {
+    ({ isOpen, onClose, children, size, closeOnBackdropClick, closeOnEsc, className, zIndex, ...restProps }: ModalProps): import("react").ReactPortal | null;
+    Header({ children, onClose, featuredIcon, title, subtitle, align, showDivider, hideCloseButton, }: ModalHeaderProps): import("react/jsx-runtime").JSX.Element;
+    Content({ children, className }: ModalContentProps): import("react/jsx-runtime").JSX.Element;
+    /**
+     * Modal.Actions - The actions area of the modal
+     *
+     * Examples:
+     *
+     * 1. Vertical layout (buttons stacked):
+     * <Modal.Actions layout="vertical" align="stretch">
+     *   <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
+     *   <Button size="sm" label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
+     * </Modal.Actions>
+     *
+     * 2. Horizontal layout (buttons side by side):
+     * <Modal.Actions layout="horizontal" align="stretch">
+     *   <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
+     *   <Button size="sm" label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
+     * </Modal.Actions>
+     *
+     * 3. Checkbox layout (checkbox on left, buttons on right):
+     * <Modal.Actions layout="checkbox" align="stretch" checkboxContent={
+     *   <>
+     *     <Checkbox text="Never show again" />
+     *     <a href="#">Settings</a>
+     *   </>
+     * }>
+     *   <Button size="sm" label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
+     *   <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
+     * </Modal.Actions>
+     */
+    Actions({ children, layout, showDivider, align, checkboxContent, className, }: ModalActionsProps): import("react/jsx-runtime").JSX.Element;
+};
+type ModalHeaderProps = {
+    children?: ReactNode;
+    onClose: () => void;
+    featuredIcon?: {
+        icon: SlotIconComponent;
+        color: FeaturedIconColor;
+        theme: FeaturedIconTheme;
+    };
+    align?: ModalHeaderAlign;
+    title?: string | ReactNode;
+    subtitle?: string | ReactNode;
+    showDivider?: boolean;
+    hideCloseButton?: boolean;
+};
+type ModalContentProps = {
+    children: ReactNode;
+    className?: string;
+};
+type ModalActionsProps = {
+    className?: string;
+    children: ReactNode;
+    layout?: ModalActionsLayout;
+    showDivider?: boolean;
+    align?: ModalActionsAlign;
+    checkboxContent?: ReactNode;
+};
+export type { ModalSize, ModalHeaderAlign, ModalActionsAlign, ModalActionsLayout, ModalProps, ModalHeaderProps, ModalContentProps, ModalActionsProps, };
+export { Modal };

package/dist/temp/src/components/overlays/modal/Modal.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import classnames from 'classnames';
+import { useEffect, useRef } from 'react';
+import ReactDOM from 'react-dom';
+import { ButtonCloseX } from '../../action/button/ButtonCloseX';
+import { FeaturedIcon } from '../../image-and-icons/featured-icon';
+const Modal = ({ isOpen, onClose, children, size = 'md', closeOnBackdropClick = false, closeOnEsc = true, className, zIndex, ...restProps }) => {
+    const modalRef = useRef(null);
+    const handleBackdropClick = (e) => {
+        if (closeOnBackdropClick && e.target === e.currentTarget) {
+            onClose();
+        }
+    };
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (isOpen && closeOnEsc && e.key === 'Escape') {
+                onClose();
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('keydown', handleKeyDown);
+            document.body.style.overflow = 'hidden';
+        }
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+            document.body.style.overflow = '';
+        };
+    }, [isOpen, closeOnEsc, onClose]);
+    if (!isOpen)
+        return null;
+    const modalContent = (_jsx("div", { className: classnames('ncua-modal-backdrop', className), onClick: handleBackdropClick, ref: modalRef, style: zIndex ? { zIndex } : undefined, ...restProps, children: _jsx("div", { className: classnames('ncua-modal', `ncua-modal--${size}`), children: children }) }));
+    return ReactDOM.createPortal(modalContent, document.body);
+};
+Modal.Header = ({ children, onClose, featuredIcon, title, subtitle, align = 'left', showDivider = false, hideCloseButton = false, }) => {
+    return (_jsxs(_Fragment, { children: [_jsxs("header", { className: classnames('ncua-modal__header', `ncua-modal__header--${align}`, {
+                    'ncua-modal__header--close-button': !hideCloseButton,
+                }), children: [featuredIcon && (_jsx(FeaturedIcon, { icon: featuredIcon.icon, color: featuredIcon.color, theme: featuredIcon.theme, size: "sm" })), _jsxs("div", { className: "ncua-modal__title", children: [_jsx("div", { className: "ncua-modal__title-text", children: title }), subtitle && _jsx("div", { className: "ncua-modal__title-subtitle", children: subtitle })] }), children, !hideCloseButton && (_jsx(ButtonCloseX, { className: "ncua-modal__close-button", size: "sm", theme: "light", onClick: onClose }))] }), showDivider && _jsx("div", { className: "ncua-modal__header-divider" })] }));
+};
+Modal.Content = ({ children, className }) => {
+    return _jsx("div", { className: classnames('ncua-modal__content', className), children: children });
+};
+/**
+ * Modal.Actions - The actions area of the modal
+ *
+ * Examples:
+ *
+ * 1. Vertical layout (buttons stacked):
+ * <Modal.Actions layout="vertical" align="stretch">
+ *   <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
+ *   <Button size="sm" label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
+ * </Modal.Actions>
+ *
+ * 2. Horizontal layout (buttons side by side):
+ * <Modal.Actions layout="horizontal" align="stretch">
+ *   <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
+ *   <Button size="sm" label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
+ * </Modal.Actions>
+ *
+ * 3. Checkbox layout (checkbox on left, buttons on right):
+ * <Modal.Actions layout="checkbox" align="stretch" checkboxContent={
+ *   <>
+ *     <Checkbox text="Never show again" />
+ *     <a href="#">Settings</a>
+ *   </>
+ * }>
+ *   <Button size="sm" label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
+ *   <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
+ * </Modal.Actions>
+ */
+Modal.Actions = ({ children, layout = 'vertical', showDivider = false, align = 'stretch', checkboxContent, className, }) => {
+    return (_jsxs(_Fragment, { children: [showDivider && _jsx("div", { className: "ncua-modal__actions-divider" }), _jsxs("div", { className: classnames('ncua-modal__actions-wrapper', className, {
+                    'ncua-modal__actions-wrapper--checkbox': layout === 'checkbox',
+                }), children: [layout === 'checkbox' && (_jsx("div", { className: "ncua-modal__actions-checkbox", children: _jsx("div", { className: "ncua-modal__actions-checkbox-content", children: checkboxContent }) })), _jsx("div", { className: classnames('ncua-modal__actions', `ncua-modal__actions--${layout}`, `ncua-modal__actions--${align}`), children: children })] })] }));
+};
+export { Modal };

package/dist/temp/src/components/overlays/notification/FloatingNotification.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertCircle, AlertTriangle, CheckCircle, Pin02 } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { MEDIA_QUERY } from '../../../constant/breakpoint';
+import { useMediaQuery } from '../../../hooks/useMediaQuery';
+import { Button } from '../../action/button';
+import { ButtonCloseX } from '../../action/button/ButtonCloseX';
+import { FeaturedIcon, } from '../../image-and-icons/featured-icon/FeaturedIcon';
+const iconMap = {
+    neutral: Pin02,
+    error: AlertTriangle,
+    warning: AlertCircle,
+    success: CheckCircle,
+    // info는 floating에서는 지원하지 않음
+};
+const FloatingNotification = forwardRef(({ title, supportingText, color = 'neutral', onClose, className, actions, autoClose = 0, ...rest }, ref) => {
+    const [shouldRemove, setShouldRemove] = useState(false);
+    const iconColor = color;
+    const featuredIconProps = {
+        icon: iconMap[color] || Pin02,
+        size: 'sm',
+        color: iconColor,
+        theme: 'dark-circle',
+    };
+    const isMobile = useMediaQuery(MEDIA_QUERY.mobile, {
+        onMatched: onClose,
+    });
+    // autoClose 타이머 관리
+    const timerRef = useRef(null);
+    useEffect(() => {
+        // autoClose가 0보다 크면 무조건 타이머 설정
+        if (autoClose > 0) {
+            timerRef.current = setTimeout(() => {
+                if (onClose) {
+                    onClose();
+                }
+                // DOM에서 바로 제거
+                setShouldRemove(true);
+            }, autoClose);
+        }
+        // cleanup 함수: 컴포넌트 언마운트 시 타이머 정리
+        return () => {
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+                timerRef.current = null;
+            }
+        };
+    }, [autoClose, onClose]);
+    // DOM에서 완전히 제거
+    if (shouldRemove) {
+        return null;
+    }
+    return (_jsxs("div", { ref: ref, className: classNames('ncua-floating-notification', `ncua-floating-notification--${color}`, className), role: "alert", ...rest, children: [_jsx("div", { className: "ncua-floating-notification__content", children: _jsxs("div", { className: "ncua-floating-notification__container", children: [iconMap[color] && _jsx(FeaturedIcon, { ...featuredIconProps, size: isMobile ? 'md' : 'sm' }), _jsxs("div", { className: "ncua-floating-notification__text-container", children: [_jsx("div", { className: "ncua-floating-notification__title-wrapper", children: _jsx("span", { className: "ncua-floating-notification__title", children: title }) }), supportingText && _jsx("span", { className: "ncua-floating-notification__supporting-text", children: supportingText }), actions && (_jsx("div", { className: "ncua-floating-notification__actions", children: actions.map((action) => (_jsx(Button, { size: "xs", hierarchy: action.hierarchy || 'text', label: action.label, onClick: action?.onClick }, `${action.label}-${action.hierarchy}`))) }))] })] }) }), onClose && (_jsx(ButtonCloseX, { theme: "light", className: "ncua-floating-notification__close-button", size: isMobile ? 'sm' : 'xs', onClick: onClose }))] }));
+});
+export { FloatingNotification };

package/dist/temp/src/components/overlays/notification/FullWidthNotification.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertTriangle, CheckCircle, InfoCircle, MessageChatSquare, XClose } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { COLOR } from '../../../../constant/color';
+const iconMap = {
+    neutral: MessageChatSquare,
+    error: AlertTriangle,
+    warning: AlertTriangle,
+    success: CheckCircle,
+    info: InfoCircle,
+};
+const iconColorMap = {
+    neutral: 'gray700',
+    error: 'red500',
+    warning: 'orange500',
+    success: 'green600',
+    info: 'violet600',
+};
+const FullWidthNotification = forwardRef(({ title, supportingText, color = 'neutral', onClose, className, actions, autoClose = 0, supportTextLink, onHidePermanently, ...rest }, ref) => {
+    const [shouldRemove, setShouldRemove] = useState(false);
+    const closeIconSize = {
+        width: 20,
+        height: 20,
+    };
+    // autoClose 타이머 관리
+    const timerRef = useRef(null);
+    useEffect(() => {
+        // autoClose가 0보다 크면 무조건 타이머 설정
+        if (autoClose > 0) {
+            timerRef.current = setTimeout(() => {
+                if (onClose) {
+                    onClose();
+                }
+                // DOM에서 바로 제거
+                setShouldRemove(true);
+            }, autoClose);
+        }
+        // cleanup 함수: 컴포넌트 언마운트 시 타이머 정리
+        return () => {
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+                timerRef.current = null;
+            }
+        };
+    }, [autoClose, onClose]);
+    // DOM에서 완전히 제거
+    if (shouldRemove) {
+        return null;
+    }
+    return (_jsx("div", { ref: ref, className: classNames('ncua-full-width-notification', `ncua-full-width-notification--${color}`, className), role: "alert", ...rest, children: _jsx("div", { className: "ncua-full-width-notification__container", children: _jsxs("div", { className: "ncua-full-width-notification__content", children: [_jsxs("div", { className: "ncua-full-width-notification__content-wrapper", children: [(() => {
+                                const IconComponent = iconMap[color];
+                                return (_jsx(IconComponent, { width: 16, height: 16, color: COLOR[iconColorMap[color]], className: "ncua-full-width-notification__icon" }));
+                            })(), _jsxs("div", { className: "ncua-full-width-notification__text-container", children: [_jsx("span", { className: "ncua-full-width-notification__title", children: title }), !supportTextLink && supportingText && (_jsx("span", { className: "ncua-full-width-notification__supporting-text", children: supportingText })), supportTextLink && supportingText && (_jsx("a", { href: supportTextLink, className: "ncua-full-width-notification__link", children: _jsx("span", { className: "ncua-full-width-notification__supporting-text", children: supportingText }) }))] })] }), _jsxs("div", { className: "ncua-full-width-notification__actions-container", children: [actions && (_jsx("div", { className: "ncua-full-width-notification__actions", children: actions.map((action) => (_jsx("button", { onClick: action.onClick, className: classNames('ncua-notification__action-button', `ncua-notification__action-button--${action.hierarchy || 'text'}`), children: action.label }, `${action.label}-${action.hierarchy}`))) })), onHidePermanently && (_jsx("button", { type: "button", className: classNames('ncua-notification__action-button', 'ncua-notification__action-button--text', 'ncua-full-width-notification__link'), onClick: onHidePermanently, children: "\uB2E4\uC2DC\uBCF4\uC9C0 \uC54A\uAE30" })), onClose && (_jsx("button", { type: "button", className: "ncua-full-width-notification__close-button", onClick: onClose, "aria-label": "\uC54C\uB9BC \uB2EB\uAE30", children: _jsx(XClose, { ...closeIconSize, color: COLOR[iconColorMap[color]] }) }))] })] }) }) }));
+});
+export { FullWidthNotification };

package/dist/temp/src/components/overlays/notification/MessageNotification.d.ts

@@ -0,0 +1,41 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import type { SlotIconComponent } from '../../../types/side-slot';
+import type { NotificationAction, NotificationColor } from './Notification';
+interface MessageNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+    /**
+     * 알림 제목 텍스트
+     */
+    title: ReactNode;
+    /**
+     * 알림 본문 텍스트 (선택사항)
+     */
+    supportingText?: ReactNode;
+    /**
+     * 알림 아이콘 컴포넌트 (지정하지 않으면 color에 따라 기본 아이콘 사용)
+     */
+    icon?: SlotIconComponent;
+    /**
+     * 알림 색상 스타일
+     * @default 'neutral'
+     */
+    color?: NotificationColor;
+    /**
+     * 닫기 버튼 클릭 이벤트 핸들러
+     */
+    onClose?: () => void;
+    /**
+     * 추가 CSS 클래스
+     */
+    className?: string;
+    /**
+     * 액션 버튼 영역 (선택사항)
+     */
+    actions?: NotificationAction[];
+    /**
+     * 다시보지 않기 이벤트 핸들러 (선택사항)
+     */
+    onHidePermanently?: () => void;
+}
+declare const MessageNotification: import("react").ForwardRefExoticComponent<MessageNotificationProps & import("react").RefAttributes<HTMLDivElement>>;
+export type { MessageNotificationProps };
+export { MessageNotification };

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

@@ -0,0 +1,34 @@
+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 = forwardRef(({ 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/temp/src/components/overlays/notification/Notification.d.ts

@@ -0,0 +1,72 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import type { ColorTone } from '../../../../constant/color';
+import type { SlotIconComponent } from '../../../types/side-slot';
+import type { ButtonTheme } from '../../action/button';
+type NotificationType = 'floating' | 'full-width' | 'message';
+type NotificationColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success' | 'info'>;
+type NotificationSize = 'desktop' | 'mobile';
+interface NotificationAction {
+    /**
+     * 액션 버튼 텍스트
+     */
+    label: string;
+    /**
+     * 액션 버튼 클릭 이벤트 핸들러
+     */
+    onClick?: () => void;
+    /**
+     * 액션 버튼 색상 (3가지만 지원)
+     */
+    hierarchy?: Extract<ButtonTheme, 'text' | 'text-gray'>;
+}
+interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+    /**
+     * 알림 유형 (floating: 측면에 표시되는 알림, full-width: 전체 너비 알림)
+     * @default 'floating'
+     */
+    type?: NotificationType;
+    /**
+     * 알림 제목 텍스트
+     */
+    title: ReactNode;
+    /**
+     * 알림 본문 텍스트 (선택사항)
+     */
+    supportingText?: ReactNode;
+    /**
+     * 알림 아이콘 컴포넌트 (지정하지 않으면 variant에 따라 기본 아이콘 사용)
+     */
+    icon?: SlotIconComponent;
+    /**
+     * 알림 색상 스타일
+     * @default 'neutral'
+     */
+    color?: NotificationColor;
+    /**
+     * 닫기 버튼 클릭 이벤트 핸들러
+     */
+    onClose?: () => void;
+    /**
+     * 추가 CSS 클래스
+     */
+    className?: string;
+    /**
+     * 액션 버튼 영역 (선택사항)
+     * NotificationAction[]
+     */
+    actions?: NotificationAction[];
+    /**
+     * 자동 닫기 시간 (밀리초 단위, 0이면 자동으로 닫히지 않음)
+     * floating 타입에서만 동작
+     * @default 0
+     */
+    autoClose?: number;
+    /**
+     * 다시보지 않기 이벤트 핸들러 (선택사항)
+     * message, full-width 타입에서 사용 가능
+     */
+    onHidePermanently?: () => void;
+}
+declare const Notification: import("react").ForwardRefExoticComponent<NotificationProps & import("react").RefAttributes<HTMLDivElement>>;
+export type { NotificationType, NotificationColor, NotificationSize, NotificationAction, NotificationProps };
+export { Notification };

package/dist/temp/src/components/overlays/tooltip/Tooltip.d.ts

@@ -0,0 +1,17 @@
+type CalculatedPosition = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+interface TooltipProps {
+    tooltipType?: 'white' | 'black';
+    iconType?: 'stroke' | 'fill';
+    position?: CalculatedPosition | 'auto';
+    size?: 'sm' | 'md';
+    hideArrow?: boolean;
+    title?: string;
+    content?: React.ReactNode;
+    type?: 'long' | 'short';
+    className?: string;
+    iconColor?: string;
+    iconStyle?: 'help-circle' | 'alert-circle';
+    zIndex?: number;
+}
+export declare const Tooltip: ({ tooltipType, iconType, position, size, title, content, hideArrow, type, iconColor, iconStyle, className, zIndex, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,162 @@
+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 = ({ tooltipType = 'white', iconType = 'stroke', position = 'auto', size = 'sm', title, content, hideArrow = false, type = 'short', iconColor = 'var(--gray-300)', iconStyle = 'help-circle', className, zIndex, }) => {
+    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 && createPortal(panel, portalTarget)] }));
+};

package/dist/temp/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 = forwardRef(({ isOpen, direction = 'down', size = 'xs', options, value, focusedIndex, maxHeight, listboxId = 'selectbox-options-default', onOptionSelect, onMouseMove, isKeyboardNavigation, onOptionHover, children, multiple = false, showFooterButtons = false, selectAllButtonText = '전체 선택', onSelectAll, onEdit, onComplete, className, activeDescendantId, componentType, align = 'left', ...props }, ref) => {
     if (!isOpen)
         return null;

package/dist/temp/src/components/select-dropdown/index.d.ts

@@ -1 +1 @@
-export { type DropdownDirection, SelectDropdown, type SelectDropdownProps } from './SelectDropdown';
+export * from './SelectDropdown';

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

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

package/dist/temp/src/components/tab/TabButton.d.ts

@@ -1,5 +1,5 @@
 import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
-import { type BadgeProps } from '../badge/Badge';
+import { type BadgeProps } from '../feedback-and-status/badge/Badge';
 type TabSize = 'sm' | 'md' | 'lg';
 type TabType = 'button-primary' | 'button-white' | 'underline' | 'underline-fill' | 'line-vertical';
 type BaseTabButtonProps = {

package/dist/temp/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 = ({ id, label, size = 'sm', tabButtonType, type, isActive = false, badgeInfo, className, children, ...props }) => {
     const componentClassName = classNames('ncua-tab-button', { 'is-active': isActive }, className);
     if ('href' in props && props.href) {