@ncds/ui-admin 1.8.1 → 1.8.3

package/dist/temp/src/components/empty-state/EmptyState.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '../button/Button';
-const EmptyState = ({ title, description, buttons }) => {
-    const emptyStateButtons = buttons ? (Array.isArray(buttons) ? buttons : [buttons]) : [];
-    return (_jsxs("div", { className: "ncua-empty-state", children: [_jsx("p", { className: "ncua-empty-state__title", children: title }), _jsx("span", { className: "ncua-empty-state__description", children: description }), emptyStateButtons.length > 0 && (_jsx("div", { className: "ncua-empty-state__button-group", children: emptyStateButtons.map(({ size, label, ...rest }) => (_jsx(Button, { size: size ?? 'xs', label: label, ...rest }, label))) }))] }));
-};
-export { EmptyState };

package/dist/temp/src/components/featured-icon/FeaturedIcon.d.ts

@@ -1,15 +0,0 @@
-import { type ComponentPropsWithoutRef } from 'react';
-import type { SlotIconComponent } from '../../types/side-slot';
-type FeaturedIconTheme = 'light-circle' | 'dark-circle' | 'outline-circle' | 'square-outline';
-type FeaturedIconColor = 'neutral' | 'error' | 'warning' | 'success';
-type FeaturedIconSize = 'sm' | 'md' | 'lg' | 'xl';
-interface FeaturedIconProps extends Omit<ComponentPropsWithoutRef<'div'>, 'color'> {
-    icon: SlotIconComponent;
-    theme?: FeaturedIconTheme;
-    color?: FeaturedIconColor;
-    size?: FeaturedIconSize;
-    className?: string;
-}
-declare const FeaturedIcon: import("react").ForwardRefExoticComponent<FeaturedIconProps & import("react").RefAttributes<HTMLDivElement>>;
-export type { FeaturedIconTheme, FeaturedIconColor, FeaturedIconSize, FeaturedIconProps };
-export { FeaturedIcon };

package/dist/temp/src/components/file-input/FileInput.js

@@ -1,87 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { HelpCircle, Upload01 } from '@ncds/ui-admin-icon';
-import classNames from 'classnames';
-import { forwardRef, useEffect, useRef, useState } from 'react';
-import { Button } from '../button';
-import { HintText, Label } from '../shared';
-import { Tag } from '../tag/Tag';
-export var FileInputErrorType;
-(function (FileInputErrorType) {
-    FileInputErrorType["ALREADY_UPLOADED"] = "ALREADY_UPLOADED";
-    FileInputErrorType["EXCEED_MAX_FILE_SIZE"] = "EXCEED_MAX_FILE_SIZE";
-    FileInputErrorType["EXCEED_MAX_FILE_COUNT"] = "EXCEED_MAX_FILE_COUNT";
-})(FileInputErrorType || (FileInputErrorType = {}));
-export const FileInput = forwardRef(({ size = 'xs', accept, multiple = false, maxFileSize, maxFileCount, value, onChange, onFileSelect, onFail, buttonLabel = '파일 찾기', disabled, label, hintItems, validation, destructive, isRequired, showHelpIcon, hintText, ...props }, _ref) => {
-    const fileInputRef = useRef(null);
-    const [internalFiles, setInternalFiles] = useState([]);
-    // Determine if component is controlled or uncontrolled
-    const isControlled = value !== undefined;
-    const files = isControlled ? value : internalFiles;
-    // Sync internal state with controlled value
-    useEffect(() => {
-        if (isControlled && value) {
-            setInternalFiles(value);
-        }
-    }, [isControlled, value]);
-    const updateFiles = (newFiles) => {
-        if (isControlled) {
-            onChange?.(newFiles);
-        }
-        else {
-            setInternalFiles(newFiles);
-            onFileSelect?.(newFiles);
-        }
-    };
-    const handleFileChange = (event) => {
-        const selectedFiles = event.target.files;
-        if (!selectedFiles || selectedFiles.length === 0)
-            return;
-        const { validFiles, invalidFiles } = validateFiles(Array.from(selectedFiles));
-        const nextFiles = [...files, ...validFiles];
-        updateFiles(nextFiles);
-        if (onFail && invalidFiles.length > 0) {
-            onFail(invalidFiles);
-        }
-    };
-    const validateFiles = (fileList) => {
-        const validFiles = [];
-        const invalidFiles = [];
-        for (const file of fileList) {
-            if (files.some((f) => f.name === file.name && f.size === file.size)) {
-                invalidFiles.push({ ...file, errorType: FileInputErrorType.ALREADY_UPLOADED });
-                continue;
-            }
-            if (!!maxFileSize && file.size > maxFileSize) {
-                invalidFiles.push({ ...file, errorType: FileInputErrorType.EXCEED_MAX_FILE_SIZE });
-                continue;
-            }
-            if (!!maxFileCount && files.length + validFiles.length >= maxFileCount) {
-                invalidFiles.push({ ...file, errorType: FileInputErrorType.EXCEED_MAX_FILE_COUNT });
-                continue;
-            }
-            validFiles.push(file);
-        }
-        return { validFiles, invalidFiles };
-    };
-    const handleBrowseClick = () => {
-        if (fileInputRef.current && !disabled) {
-            fileInputRef.current.click();
-        }
-    };
-    const handleRemoveFile = (index) => {
-        const newFiles = [...files];
-        newFiles.splice(index, 1);
-        updateFiles(newFiles);
-    };
-    const renderFileTagList = () => {
-        if (files.length === 0)
-            return null;
-        return (_jsx("div", { className: "ncua-file-input__file-tags", children: files.map((file, index) => (_jsxs("div", { className: "ncua-file-input__file-tag-container", children: [_jsx(Tag, { text: file.name, size: size === 'xs' ? 'sm' : 'md', close: true, onButtonClick: () => handleRemoveFile(index) }), file.type.startsWith('image/') && (_jsx("img", { className: "ncua-file-input__file-image", src: URL.createObjectURL(file), alt: file.name }))] }, `${file.name}-${index}`))) }));
-    };
-    const renderHintList = () => {
-        if (!hintItems || hintItems.length === 0)
-            return null;
-        return (_jsx("ul", { className: "ncua-file-input__hint-list", children: hintItems.map((hint) => (_jsx("li", { className: "ncua-file-input__hint-item", children: hint }, hint))) }));
-    };
-    return (_jsxs("div", { className: classNames('ncua-file-input', `ncua-file-input--${size}`), children: [_jsx("input", { hidden: true, ref: fileInputRef, type: "file", accept: accept, multiple: multiple, onChange: handleFileChange, tabIndex: -1, "aria-hidden": "true", ...props }), _jsxs("div", { className: "ncua-file-input__input-container", children: [_jsxs("div", { className: "ncua-file-input__label", children: [_jsx(Label, { isRequired: isRequired, children: label }), showHelpIcon && _jsx(HelpCircle, { className: "ncua-input__help-icon" })] }), _jsx(Button, { size: size, onClick: handleBrowseClick, disabled: disabled, leadingIcon: { type: 'icon', icon: Upload01 }, label: buttonLabel }), hintText && _jsx(HintText, { destructive: destructive, children: hintText })] }), renderHintList(), renderFileTagList()] }));
-});

package/dist/temp/src/components/horizontal-tab/HorizontalTab.d.ts

@@ -1,12 +0,0 @@
-import { type TabButtonProps, type TabSize, type TabType } from '../tab/TabButton';
-type HorizontalTabProps = {
-    type?: Exclude<TabType, 'line-vertical'>;
-    size?: TabSize;
-    activeTab?: string;
-    fullWidth?: boolean;
-    menus?: TabButtonProps[];
-    className?: string;
-};
-declare const HorizontalTab: ({ type, size, activeTab, fullWidth, menus, className, }: HorizontalTabProps) => import("react/jsx-runtime").JSX.Element | null;
-export type { HorizontalTabProps };
-export { HorizontalTab };

package/dist/temp/src/components/horizontal-tab/HorizontalTab.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import classNames from 'classnames';
-import { uniqueId } from 'lodash-es';
-import { Swiper, SwiperSlide } from 'swiper/react';
-import { TabButton } from '../tab/TabButton';
-const UNDERLINE_GAP = 16;
-const DEFAULT_GAP = 8;
-const HorizontalTab = ({ type = 'button-primary', size = 'sm', activeTab, fullWidth = false, menus = [], className, }) => {
-    const getTabGap = (type) => {
-        const gap = {
-            underline: UNDERLINE_GAP,
-        };
-        return gap[type] ?? DEFAULT_GAP;
-    };
-    if (!menus.length)
-        return null;
-    return (_jsx("div", { className: classNames('ncua-horizontal-tab', `ncua-horizontal-tab--${type}`, `ncua-horizontal-tab--${size}`, {
-            'full-width': fullWidth,
-        }, className), children: _jsx(Swiper, { slidesPerView: "auto", spaceBetween: getTabGap(type), children: menus.map((menu) => {
-                const isActive = 'href' in menu && menu.href ? menu.href === activeTab : menu.id === activeTab;
-                return (_jsx(SwiperSlide, { className: "ncua-horizontal-tab__item", children: _jsx(TabButton, { ...menu, isActive: isActive, tabButtonType: type, size: size }) }, uniqueId('horizontal-tab')));
-            }) }) }));
-};
-export { HorizontalTab };

package/dist/temp/src/components/image-file-input/ImageFileInput.js

@@ -1,96 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { HelpCircle, Upload01 } from '@ncds/ui-admin-icon';
-import classNames from 'classnames';
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { Button } from '../button';
-import { FileInputErrorType as ImageFileInputErrorType } from '../file-input/FileInput';
-import { HintText, Label } from '../shared';
-import { Tooltip } from '../tooltip';
-import { ImagePreview } from './components/ImagePreview';
-export const ImageFileInput = forwardRef(({ size = 'sm', accept, multiple = false, maxFileSize, maxFileCount, value, onChange, onFileSelect, onFail, buttonLabel = '파일 찾기', imagePreviewTooltipLabel = '이미지 업로드', disabled, label, hintItems, validation, destructive, isRequired, showHelpIcon, hintText, showFileTagList = true, showHintText = true, showFileInput = true, ...props }, ref) => {
-    const fileInputRef = useRef(null);
-    useImperativeHandle(ref, () => fileInputRef.current);
-    const [internalFiles, setInternalFiles] = useState([]);
-    const [isButtonHovered, setIsButtonHovered] = useState(false);
-    // Determine if component is controlled or uncontrolled
-    const isControlled = value !== undefined;
-    const files = isControlled ? value : internalFiles;
-    // Sync internal state with controlled value
-    useEffect(() => {
-        if (isControlled && value) {
-            setInternalFiles(value);
-        }
-    }, [isControlled, value]);
-    const updateFiles = (newFiles) => {
-        if (isControlled) {
-            onChange?.(newFiles);
-        }
-        else {
-            setInternalFiles(newFiles);
-            onFileSelect?.(newFiles);
-        }
-    };
-    const handleFileChange = (event) => {
-        const selectedFiles = event.target.files;
-        if (!selectedFiles || selectedFiles.length === 0)
-            return;
-        const { validFiles, invalidFiles } = validateFiles(Array.from(selectedFiles));
-        // Replace existing file if maxFileCount is 1
-        const nextFiles = maxFileCount === 1 ? validFiles : [...files, ...validFiles];
-        updateFiles(nextFiles);
-        if (onFail && invalidFiles.length > 0) {
-            onFail(invalidFiles);
-        }
-        event.target.value = '';
-    };
-    const validateFiles = (fileList) => {
-        const validFiles = [];
-        const invalidFiles = [];
-        for (const file of fileList) {
-            if (files.some((f) => f.name === file.name && f.size === file.size)) {
-                invalidFiles.push({
-                    ...file,
-                    errorType: ImageFileInputErrorType.ALREADY_UPLOADED,
-                });
-                continue;
-            }
-            if (!!maxFileSize && file.size > maxFileSize) {
-                invalidFiles.push({
-                    ...file,
-                    errorType: ImageFileInputErrorType.EXCEED_MAX_FILE_SIZE,
-                });
-                continue;
-            }
-            // Skip max count check if maxFileCount is 1 (allow replacement)
-            if (!!maxFileCount && maxFileCount !== 1 && files.length + validFiles.length >= maxFileCount) {
-                invalidFiles.push({
-                    ...file,
-                    errorType: ImageFileInputErrorType.EXCEED_MAX_FILE_COUNT,
-                });
-                continue;
-            }
-            validFiles.push(file);
-        }
-        return { validFiles, invalidFiles };
-    };
-    const handleBrowseClick = () => {
-        if (fileInputRef.current && !disabled) {
-            fileInputRef.current.click();
-        }
-    };
-    const handleRemoveFile = (index) => {
-        const newFiles = [...files];
-        newFiles.splice(index, 1);
-        updateFiles(newFiles);
-    };
-    const renderImagePreview = (files = []) => {
-        const showEmptySlot = maxFileCount ? files.length < maxFileCount : files.length === 0;
-        return (_jsxs("div", { className: "ncua-image-file-input__previews", children: [files.map((file, index) => (_jsx(ImagePreview, { file: file, onRemove: () => handleRemoveFile(index) }, `${file.name}-${index}`))), showEmptySlot && (_jsxs("div", { className: "ncua-image-file-input__empty-slot-wrapper", onMouseEnter: () => !disabled && setIsButtonHovered(true), onMouseLeave: () => setIsButtonHovered(false), onClick: handleBrowseClick, children: [_jsx(Button, { onlyIcon: true, size: size, className: classNames('ncua-image-file-input__preview-container'), onClick: handleBrowseClick, disabled: disabled, label: imagePreviewTooltipLabel }), isButtonHovered && !disabled && _jsx(Tooltip, { content: imagePreviewTooltipLabel, position: "bottom" })] }))] }));
-    };
-    const renderHintList = () => {
-        if (!hintItems || hintItems.length === 0)
-            return null;
-        return (_jsx("ul", { className: "ncua-file-input__hint-list", children: hintItems.map((hint) => (_jsx("li", { className: "ncua-file-input__hint-item", children: hint }, hint))) }));
-    };
-    return (_jsxs("div", { className: classNames('ncua-image-file-input', `ncua-image-file-input--${size}`, { destructive: destructive }), children: [renderImagePreview(files), showFileInput && (_jsxs("div", { className: classNames('ncua-file-input', `ncua-file-input--${size}`), children: [_jsx("input", { hidden: true, ref: fileInputRef, type: "file", accept: accept, multiple: multiple, onChange: handleFileChange, tabIndex: -1, "aria-hidden": "true", ...props }), _jsxs("div", { className: "ncua-file-input__input-container", children: [_jsxs("div", { className: "ncua-file-input__label", children: [_jsx(Label, { isRequired: isRequired, children: label }), showHelpIcon && _jsx(HelpCircle, { className: "ncua-input__help-icon" })] }), _jsx(Button, { size: "xs", onClick: handleBrowseClick, disabled: disabled, leadingIcon: { type: 'icon', icon: Upload01 }, label: buttonLabel }), showHintText && hintText && _jsx(HintText, { destructive: destructive, children: hintText })] }), showHintText && renderHintList()] }))] }));
-});

package/dist/temp/src/components/image-file-input/components/ImagePreview.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Trash03 } from '@ncds/ui-admin-icon';
-import { Button } from '../../button';
-export const ImagePreview = ({ file, onRemove }) => {
-    return (_jsxs("div", { className: "ncua-image-file-input__preview-container", children: [_jsx("img", { className: "ncua-image-file-input__preview-image", src: URL.createObjectURL(file), alt: file.name }), _jsx(Button, { size: "sm", hierarchy: "text", onlyIcon: true, leadingIcon: { type: 'icon', icon: Trash03, color: 'gray200' }, label: "Remove image", onClick: onRemove, className: "ncua-image-file-input__preview-remove-button" })] }));
-};

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

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

package/dist/temp/src/components/image-file-input/index.js

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

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

@@ -1,55 +0,0 @@
-import type React from 'react';
-import { COLOR } from '../../../constant/color';
-import type { Size } from '../../../constant/size';
-import type { SlotIconComponent } from '../../types/side-slot';
-interface InputSideButtonSlot {
-    type: 'button';
-    label: string;
-    isSubmit?: boolean;
-    onClick: () => void;
-}
-interface InputSideTextSlot {
-    type: 'text';
-    text: string;
-}
-interface InputSideIconSlot {
-    type: 'icon';
-    icon: SlotIconComponent;
-    size?: number;
-    color?: keyof typeof COLOR;
-    className?: string;
-}
-interface InputSideCustomSlot {
-    type: 'custom';
-    children: React.ReactNode;
-    placement?: 'inside' | 'outside';
-}
-type InputLeadingSlotType = InputSideTextSlot | InputSideIconSlot | InputSideCustomSlot;
-type InputTrailingSlotType = InputSideButtonSlot | InputSideIconSlot | InputSideCustomSlot;
-interface InputBaseCommonProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
-    required?: boolean;
-    label?: string;
-    hintText?: string;
-    size?: Extract<Size, 'xs' | 'sm'>;
-    disabled?: boolean;
-    fullWidth?: boolean;
-    validation?: boolean;
-    destructive?: boolean;
-    leadingElement?: InputLeadingSlotType;
-    trailingElement?: InputTrailingSlotType;
-    showHelpIcon?: boolean;
-    showTextCount?: boolean;
-    maxLength?: number;
-}
-interface NoneClearableInputBaseProps extends InputBaseCommonProps {
-    clearText?: never;
-    onClearText?: never;
-}
-interface ClearableInputBaseProps extends InputBaseCommonProps {
-    clearText: boolean;
-    onClearText: () => void;
-}
-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

@@ -1,96 +0,0 @@
-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/modal/Modal.d.ts

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

@@ -1,75 +0,0 @@
-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/notification/FloatingNotification.js

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