@ncds/ui-admin 1.6.4 → 1.8.0

package/dist/{types/src/components/input → temp/src/components/input-base}/InputBase.d.ts

@@ -32,6 +32,7 @@ interface InputBaseCommonProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     hintText?: string;
     size?: Extract<Size, 'xs' | 'sm'>;
     disabled?: boolean;
+    fullWidth?: boolean;
     validation?: boolean;
     destructive?: boolean;
     leadingElement?: InputLeadingSlotType;
@@ -48,7 +49,7 @@ interface ClearableInputBaseProps extends InputBaseCommonProps {
     clearText: boolean;
     onClearText: () => void;
 }
-export type InputBaseProps = NoneClearableInputBaseProps | ClearableInputBaseProps;
-export declare const InputBase: React.ForwardRefExoticComponent<InputBaseProps & React.RefAttributes<HTMLInputElement>>;
-export {};
-//# sourceMappingURL=InputBase.d.ts.map
+type InputBaseProps = NoneClearableInputBaseProps | ClearableInputBaseProps;
+declare const InputBase: React.ForwardRefExoticComponent<InputBaseProps & React.RefAttributes<HTMLInputElement>>;
+export type { InputBaseProps };
+export { InputBase };

package/dist/temp/src/components/input-base/InputBase.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckCircle, HelpCircle, InfoCircle, X } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { COLOR } from '../../../constant/color';
+import { HintText } from '../shared/hintText/HintText';
+import { Label } from '../shared/label/Label';
+const validationSvgSize = {
+    xs: 14,
+    sm: 16,
+};
+const generalSvgSize = {
+    xs: 14,
+    sm: 20,
+};
+const InputBase = forwardRef(({ size = 'xs', required, label, hintText, disabled, fullWidth = false, validation, destructive, leadingElement, trailingElement, showHelpIcon, maxLength, showTextCount, className, ...props }, ref) => {
+    const inputRef = useRef(null);
+    const [textCount, setTextCount] = useState(0);
+    useEffect(() => {
+        if (inputRef.current && showTextCount) {
+            setTextCount(inputRef.current.value.length);
+            const handleInput = () => {
+                setTextCount(inputRef.current?.value.length ?? 0);
+            };
+            inputRef.current.addEventListener('input', handleInput);
+            return () => {
+                inputRef.current?.removeEventListener('input', handleInput);
+            };
+        }
+    }, [showTextCount]);
+    const renderOutsideSlot = (slot) => {
+        if (slot.type === 'custom' && slot.placement !== 'outside') {
+            return null;
+        }
+        switch (slot.type) {
+            case 'button':
+                return (_jsx("button", { type: slot.isSubmit ? 'submit' : 'button', className: classNames('ncua-input__button', `ncua-input__button--${size}`), onClick: slot.onClick, children: slot.label }));
+            case 'text':
+                return (_jsx("span", { className: classNames('ncua-input__leading-text', `ncua-input__leading-text--${size}`), children: slot.text }));
+            case 'custom':
+                return slot.children;
+            default:
+                return null;
+        }
+    };
+    const renderInsideSlot = (slot, position) => {
+        switch (slot.type) {
+            case 'icon': {
+                const SlotIcon = slot.icon;
+                return (_jsx("div", { className: "ncua-input__icon-wrap", children: _jsx(SlotIcon, { className: classNames(`ncua-input__${position}-icon`, slot.className), color: slot.color ? COLOR[slot.color] : undefined, width: slot.size ?? generalSvgSize[size], height: slot.size ?? generalSvgSize[size] }) }));
+            }
+            case 'custom':
+                if (slot.placement !== 'inside') {
+                    return null;
+                }
+                return slot.children;
+            default:
+                return null;
+        }
+    };
+    const renderClearButton = () => {
+        if (!props.clearText)
+            return null;
+        return (_jsx("button", { type: "button", className: classNames('ncua-input__icon-wrap', 'ncua-input__right-icon', 'ncua-input__clear'), onClick: props.onClearText, children: _jsx(X, { className: "ncua-input__clear-icon", width: validationSvgSize[size], height: validationSvgSize[size] }) }));
+    };
+    const renderStatusIcon = () => {
+        if (destructive) {
+            return (_jsx("div", { className: "ncua-input__icon-wrap ncua-input__right-icon", children: _jsx(InfoCircle, { className: "ncua-input__destructive-icon", width: validationSvgSize[size], height: validationSvgSize[size] }) }));
+        }
+        if (validation) {
+            return (_jsx("div", { className: "ncua-input__icon-wrap ncua-input__right-icon", children: _jsx(CheckCircle, { className: "ncua-input__validation-icon", width: validationSvgSize[size], height: validationSvgSize[size] }) }));
+        }
+        return null;
+    };
+    const renderLabel = () => {
+        if (!label)
+            return null;
+        return (_jsxs("div", { className: classNames('ncua-input__label', `ncua-input__label--${size}`), children: [_jsx(Label, { isRequired: required, htmlFor: props.id, children: label }), showHelpIcon && _jsx(HelpCircle, { className: "ncua-input__help-icon" })] }));
+    };
+    return (_jsxs("div", { className: classNames('ncua-input', `ncua-input--${size}`, {
+            destructive: destructive,
+            'is-disabled': disabled,
+            'full-width': fullWidth,
+            'ncua-input__trailing-button': trailingElement?.type === 'button',
+            'ncua-input__leading-text-wrap': leadingElement?.type === 'text',
+        }, className), children: [renderLabel(), _jsxs("div", { className: "ncua-input__content-wrap", children: [_jsxs("div", { className: "ncua-input__content", children: [leadingElement && renderOutsideSlot(leadingElement), _jsxs("div", { className: classNames('ncua-input__field', `ncua-input__field--${size}`), children: [leadingElement && renderInsideSlot(leadingElement, 'left'), _jsx("input", { ref: (node) => {
+                                            if (typeof ref === 'function') {
+                                                ref(node);
+                                            }
+                                            else if (ref) {
+                                                ref.current = node;
+                                            }
+                                            inputRef.current = node;
+                                        }, type: "text", disabled: disabled, maxLength: maxLength, ...props }), renderClearButton(), renderStatusIcon(), trailingElement && renderInsideSlot(trailingElement, 'right')] }), trailingElement && renderOutsideSlot(trailingElement)] }), showTextCount && maxLength && (_jsxs("div", { className: "ncua-input__field-text-count", children: [_jsx("output", { className: "ncua-input__field-text-count-current", children: textCount }), _jsxs("span", { children: ["/", maxLength] })] }))] }), hintText && (_jsx(HintText, { className: "ncua-input__hint-text", destructive: destructive, children: hintText }))] }));
+});
+export { InputBase };

package/dist/temp/src/components/input-base/index.d.ts

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

package/dist/temp/src/components/input-base/index.js

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

package/dist/temp/src/components/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 '../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/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 '../button/ButtonCloseX';
+import { FeaturedIcon } from '../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/modal/index.d.ts

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

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

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

package/dist/temp/src/components/notification/FloatingNotification.d.ts

@@ -0,0 +1,37 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import type { NotificationAction, NotificationColor } from './Notification';
+interface FloatingNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+    /**
+     * 알림 제목 텍스트
+     */
+    title: ReactNode;
+    /**
+     * 알림 본문 텍스트 (선택사항)
+     */
+    supportingText?: ReactNode;
+    /**
+     * 알림 색상 스타일
+     * @default 'neutral'
+     */
+    color?: NotificationColor;
+    /**
+     * 닫기 버튼 클릭 이벤트 핸들러
+     */
+    onClose?: () => void;
+    /**
+     * 추가 CSS 클래스
+     */
+    className?: string;
+    /**
+     * 버튼 영역 (선택사항)
+     */
+    actions?: NotificationAction[];
+    /**
+     * 자동 닫기 시간 (밀리초 단위, 0이면 자동으로 닫히지 않음)
+     * @default 0
+     */
+    autoClose?: number;
+}
+declare const FloatingNotification: import("react").ForwardRefExoticComponent<FloatingNotificationProps & import("react").RefAttributes<HTMLDivElement>>;
+export type { FloatingNotificationProps };
+export { FloatingNotification };

package/dist/temp/src/components/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 '../button';
+import { ButtonCloseX } from '../button/ButtonCloseX';
+import { FeaturedIcon } from '../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/notification/FullWidthNotification.d.ts

@@ -0,0 +1,46 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import type { NotificationAction, NotificationColor } from './Notification';
+interface FullWidthNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+    /**
+     * 알림 제목 텍스트
+     */
+    title: ReactNode;
+    /**
+     * 알림 본문 텍스트 (선택사항)
+     */
+    supportingText?: ReactNode;
+    /**
+     * 알림 색상 스타일 (neutral, error, warning, success, info)
+     * @default 'neutral'
+     */
+    color?: NotificationColor;
+    /**
+     * 닫기 버튼 클릭 이벤트 핸들러
+     */
+    onClose?: () => void;
+    /**
+     * 추가 CSS 클래스
+     */
+    className?: string;
+    /**
+     * 버튼 영역 (선택사항)
+     */
+    actions?: NotificationAction[];
+    /**
+     * 자동 닫기 시간 (밀리초 단위, 0이면 자동으로 닫히지 않음)
+     * full-width 타입에서는 일반적으로 사용하지 않음 (중요한 공지사항이므로)
+     * @default 0
+     */
+    autoClose?: number;
+    /**
+     * info 링크 영역 (선택사항)
+     */
+    supportTextLink?: string;
+    /**
+     * 다시보지 않기 이벤트 핸들러 (선택사항)
+     */
+    onHidePermanently?: () => void;
+}
+declare const FullWidthNotification: import("react").ForwardRefExoticComponent<FullWidthNotificationProps & import("react").RefAttributes<HTMLDivElement>>;
+export type { FullWidthNotificationProps };
+export { FullWidthNotification };

package/dist/temp/src/components/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/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/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 '../button';
+import { FeaturedIcon } from '../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/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 '../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 };