@ncds/ui-admin 1.8.3 → 1.8.5

package/dist/temp/src/components/forms-and-input/combo-box/ComboBox.d.ts

@@ -21,6 +21,14 @@ interface ComboBoxProps extends Omit<ComponentPropsWithRef<'div'>, 'size' | 'onC
     required?: boolean;
     multiple?: boolean;
     showFooterButtons?: boolean;
+    /**
+     * 최대 선택 가능 개수 (multiple=true에서만 유효).
+     *  - `0` 이상의 정수: 제한 활성 → footer의 "전체선택" Link 미노출 (DES-SPEC-009 §3.10.1).
+     *    - `0`은 모든 새 선택을 차단한다.
+     *    - 양수는 도달 후 추가 선택을 무시한다 (이미 선택된 항목 해제는 정상).
+     *  - 음수 / 비정수 / `null` / `undefined`: 제한 없음.
+     */
+    maxSelection?: number | null;
     onEdit?: () => void;
 }
 declare const ComboBox: import("react").ForwardRefExoticComponent<Omit<ComboBoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/temp/src/components/forms-and-input/combo-box/ComboBox.js

@@ -10,13 +10,6 @@ import { SelectDropdown } from '../../select-dropdown';
 import { HintText } from '../../shared/hintText/HintText';
 import { InputBase } from '../input-base/InputBase';
 const defaultMaxHeight = 275;
-const toggleMultiSelectValue = (currentValue, optionId) => {
-    const currentValues = Array.isArray(currentValue) ? currentValue : [];
-    if (currentValues.includes(optionId)) {
-        return currentValues.filter((v) => v !== optionId);
-    }
-    return [...currentValues, optionId];
-};
 const notifyFormChange = (register, multiple, newValue) => {
     if (register?.onChange) {
         register.onChange({
@@ -27,7 +20,7 @@ const notifyFormChange = (register, multiple, newValue) => {
         });
     }
 };
-const ComboBox = forwardRef(({ placeholder = '검색하세요', id, className, hintText, children, size = 'xs', destructive = false, value, optionItems = [], onChange, onSearch, disabled = false, register, maxHeight = defaultMaxHeight, searchValue = '', label, required = false, multiple = false, showFooterButtons = false, onEdit, ...props }, ref) => {
+const ComboBox = forwardRef(({ placeholder = '검색하세요', id, className, hintText, children, size = 'xs', destructive = false, value, optionItems = [], onChange, onSearch, disabled = false, register, maxHeight = defaultMaxHeight, searchValue = '', label, required = false, multiple = false, showFooterButtons = false, maxSelection, onEdit, ...props }, ref) => {
     const internalRef = useRef(null);
     const dropdownRef = useRef(null);
     const inputRef = useRef(null);
@@ -38,7 +31,9 @@ const ComboBox = forwardRef(({ placeholder = '검색하세요', id, className, h
         if (disabled)
             return;
         if (multiple) {
-            const newValue = toggleMultiSelectValue(value ?? [], option.id);
+            const newValue = tryToggle(option.id, Array.isArray(value) ? value : []);
+            if (newValue === null)
+                return;
             onChange?.(newValue);
             notifyFormChange(register, multiple, newValue);
             return;
@@ -103,6 +98,7 @@ const ComboBox = forwardRef(({ placeholder = '검색하세요', id, className, h
         // 나머지는 useDropdown 훅에서 처리
         dropdownHandleKeyDown(e);
     };
+    // biome-ignore lint/style/noNonNullAssertion: forwardRef 패턴에서 internalRef는 첫 렌더 후 항상 존재
     useImperativeHandle(ref, () => internalRef.current, []);
     const trailingElement = {
         type: 'custom',
@@ -116,7 +112,7 @@ const ComboBox = forwardRef(({ placeholder = '검색하세요', id, className, h
         color: 'gray300',
     };
     const currentSelectedValues = multiple && Array.isArray(value) ? value : [];
-    const { buttonText: selectAllButtonText, toggleSelectAll, getSelectedTagsData, removeTag, } = useMultiSelect(currentSelectedValues, optionItems);
+    const { buttonText: selectAllButtonText, toggleSelectAll, getSelectedTagsData, removeTag, isMaxSelectionActive, tryToggle, } = useMultiSelect(currentSelectedValues, optionItems, { maxSelection });
     const handleSelectAll = () => {
         if (!multiple || !onChange)
             return;
@@ -160,7 +156,7 @@ const ComboBox = forwardRef(({ placeholder = '검색하세요', id, className, h
                 }, className), ...props, children: [_jsxs("div", { className: "ncua-combobox__content", children: [_jsx(InputBase, { ref: inputRef, size: size, label: label, required: required, placeholder: placeholder, value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onClick: handleInputClick, disabled: disabled, destructive: destructive, leadingElement: leadingElement, trailingElement: trailingElement, role: "combobox", "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-controls": comboboxId, "aria-disabled": disabled, autoComplete: "off", clearText: !!inputValue, onClearText: () => {
                                     setInputValue('');
                                     onSearch?.('');
-                                } }), _jsxs(SelectDropdown, { ref: dropdownRef, isOpen: isOpen, direction: dropdownDirection, size: size, options: displayedOptions, value: value, focusedIndex: focusedIndex, maxHeight: maxHeight, listboxId: comboboxId, onOptionSelect: handleDropdownSelect, onMouseMove: handleMouseMove, isKeyboardNavigation: isKeyboardNavigation, multiple: multiple, showFooterButtons: showFooter, selectAllButtonText: selectAllButtonText, onSelectAll: handleSelectAll, onEdit: handleEdit, onComplete: handleComplete, componentType: "combobox", children: [showNoResults ? _jsx("li", { className: "ncua-select-dropdown__no-results", children: "\uC77C\uCE58\uD558\uB294 \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }) : null, children] })] }), register && _jsx("input", { type: "hidden", ...register, value: hiddenInputValue }), hintText && _jsx(HintText, { destructive: destructive, children: hintText })] }), hasTags && (_jsx("div", { className: "ncua-combobox__tags", children: selectedTags.map((tag) => (_jsx(Tag, { text: tag.label, size: "sm", close: true, onButtonClick: () => handleRemoveTag(tag.id) }, tag.id))) }))] }));
+                                } }), _jsxs(SelectDropdown, { ref: dropdownRef, isOpen: isOpen, direction: dropdownDirection, size: size, options: displayedOptions, value: value, focusedIndex: focusedIndex, maxHeight: maxHeight, listboxId: comboboxId, onOptionSelect: handleDropdownSelect, onMouseMove: handleMouseMove, isKeyboardNavigation: isKeyboardNavigation, multiple: multiple, showFooterButtons: showFooter, selectAllButtonText: selectAllButtonText, showSelectAllAction: !isMaxSelectionActive, onSelectAll: handleSelectAll, onEdit: handleEdit, onComplete: handleComplete, componentType: "combobox", children: [showNoResults ? _jsx("li", { className: "ncua-select-dropdown__no-results", children: "\uC77C\uCE58\uD558\uB294 \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }) : null, children] })] }), register && _jsx("input", { type: "hidden", ...register, value: hiddenInputValue }), hintText && _jsx(HintText, { destructive: destructive, children: hintText })] }), hasTags && (_jsx("div", { className: "ncua-combobox__tags", children: selectedTags.map((tag) => (_jsx(Tag, { text: tag.label, size: "sm", close: true, onButtonClick: () => handleRemoveTag(tag.id) }, tag.id))) }))] }));
 });
 ComboBox.displayName = 'ComboBox';
 export { defaultMaxHeight, ComboBox };

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

@@ -85,7 +85,7 @@ export const ImageFileInput = forwardRef(({ size = 'sm', accept, multiple = fals
     };
     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" })] }))] }));
+        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 }), _jsx(Tooltip, { content: imagePreviewTooltipLabel, position: "bottom", tooltipType: "black", forceVisible: isButtonHovered && !disabled, disablePortal: true })] }))] }));
     };
     const renderHintList = () => {
         if (!hintItems || hintItems.length === 0)

package/dist/temp/src/components/forms-and-input/select-box/SelectBox.d.ts

@@ -19,8 +19,21 @@ type SelectBoxProps = Omit<ComponentPropsWithRef<'div'>, 'size' | 'onChange'> &
     register?: UseFormRegisterReturn;
     maxHeight?: number;
     multiple?: boolean;
+    /**
+     * 최대 선택 가능 개수 (multiple=true에서만 유효).
+     *  - `0` 이상의 정수: 제한 활성 → footer "전체선택" Link 미노출.
+     *    - `0`은 모든 새 선택을 차단한다.
+     *    - 양수는 도달 후 추가 선택을 무시한다 (이미 선택된 항목 해제는 정상).
+     *  - 음수 / 비정수 / `null` / `undefined`: 제한 없음.
+     */
+    maxSelection?: number | null;
     onEdit?: () => void;
     align?: 'left' | 'right';
+    /**
+     * 옵션 패널을 React Portal로 body에 렌더한다.
+     * 미지정 시 FloatingContext.preferPortal 값을 따른다 (DataGrid.Table horizontalScroll 내부에서는 자동 true).
+     */
+    usePortal?: boolean;
 };
 declare const SelectBox: import("react").ForwardRefExoticComponent<Omit<SelectBoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export type { SelectBoxProps };

package/dist/temp/src/components/forms-and-input/select-box/SelectBox.js

@@ -2,8 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { ChevronDown } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef, useCallback, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { createPortal } from 'react-dom';
 import { COLOR } from '../../../../constant/color';
 import { useDropdown, useScrollLock } from '../../../hooks/dropdown';
+import { useFloatingPosition } from '../../../hooks/useFloatingPosition';
+import { usePortalState } from '../../../hooks/usePortalState';
 import { useMultiSelect } from '../../../utils/dropdown/multiSelect';
 import { Tag } from '../../feedback-and-status/tag';
 import { SelectDropdown } from '../../select-dropdown';
@@ -37,9 +40,12 @@ function DisplayValue({ displayValue }) {
     }
     return (_jsxs("div", { className: "ncua-selectbox__value-container", children: [displayValue.icon && (_jsx("span", { className: "ncua-selectbox__value-icon", children: _jsx(displayValue.icon, { width: 16, height: 16 }) })), _jsx("span", { className: "ncua-selectbox__value-text", children: displayValue.label })] }));
 }
-const SelectBox = forwardRef(({ placeholder = '선택하세요', disabledPlaceholder = false, hintText, size = 'xs', type = 'default', autoWidth = true, destructive = false, value, optionItems = [], disabled = false, maxHeight = DEFAULT_MAX_HEIGHT, multiple = false, align = 'left', id, className, children, register, onChange, onEdit, ...props }, ref) => {
+const SelectBox = forwardRef(({ placeholder = '선택하세요', disabledPlaceholder = false, hintText, size = 'xs', type = 'default', autoWidth = true, destructive = false, value, optionItems = [], disabled = false, maxHeight = DEFAULT_MAX_HEIGHT, multiple = false, maxSelection, align = 'left', usePortal, id, className, children, register, onChange, onEdit, ...props }, ref
+// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: 옵션/멀티/태그/포탈 등 필수 분기 통합
+) => {
     const internalRef = useRef(null);
     const dropdownRef = useRef(null);
+    const { shouldPortal, portalContainer } = usePortalState(usePortal);
     const [selectedTags, setSelectedTags] = useState([]);
     const selectedOption = useMemo(() => {
         if (multiple)
@@ -55,6 +61,14 @@ const SelectBox = forwardRef(({ placeholder = '선택하세요', disabledPlaceho
     const handleOptionSelect = (option) => {
         if (disabled)
             return;
+        if (multiple) {
+            const newValue = tryToggle(option.id, Array.isArray(value) ? value : []);
+            if (newValue === null)
+                return;
+            onChange?.(newValue);
+            notifyRegister(register, newValue, multiple);
+            return;
+        }
         const newValue = computeNewValue(option, value, multiple);
         onChange?.(newValue);
         notifyRegister(register, newValue, multiple);
@@ -82,7 +96,7 @@ const SelectBox = forwardRef(({ placeholder = '선택하세요', disabledPlaceho
     }, [handleMouseMove, setFocusedIndex]);
     // Multiple select 관련 로직
     const currentSelectedValues = multiple && Array.isArray(value) ? value : [];
-    const { buttonText: selectAllButtonText, toggleSelectAll, getSelectedTagsData, removeTag, } = useMultiSelect(currentSelectedValues, optionItems);
+    const { buttonText: selectAllButtonText, toggleSelectAll, getSelectedTagsData, removeTag, isMaxSelectionActive, tryToggle, } = useMultiSelect(currentSelectedValues, optionItems, { maxSelection });
     const handleSelectAll = () => {
         if (!multiple || !onChange)
             return;
@@ -109,13 +123,26 @@ const SelectBox = forwardRef(({ placeholder = '선택하세요', disabledPlaceho
         }
     };
     useScrollLock(isOpen, dropdownRef);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: optionItems 변경 시 너비 재계산 필요
     useLayoutEffect(() => {
         if (autoWidth && isOpen && dropdownRef.current && internalRef.current) {
             const dropdownWidth = dropdownRef.current.offsetWidth;
             internalRef.current.style.width = `${dropdownWidth}px`;
         }
     }, [autoWidth, isOpen, optionItems]);
+    const floatingStyle = useFloatingPosition({
+        enabled: shouldPortal,
+        isOpen,
+        triggerRef: internalRef,
+        floatingRef: dropdownRef,
+        direction: dropdownDirection,
+        align,
+        matchTriggerWidth: true,
+    });
+    // biome-ignore lint/style/noNonNullAssertion: forwardRef 패턴에서 internalRef는 항상 존재
     useImperativeHandle(ref, () => internalRef.current, []);
+    const selectDropdownNode = (_jsx(SelectDropdown, { ref: dropdownRef, isOpen: isOpen, direction: dropdownDirection, size: size, options: optionItems, value: value, focusedIndex: focusedIndex, maxHeight: maxHeight, listboxId: `selectbox-options-${id || 'default'}`, multiple: multiple, showFooterButtons: multiple, selectAllButtonText: selectAllButtonText, showSelectAllAction: !isMaxSelectionActive, componentType: "selectbox", isKeyboardNavigation: isKeyboardNavigation, activeDescendantId: activeDescendantId, align: align, className: shouldPortal ? 'ncua-select-dropdown--portal' : undefined, style: shouldPortal && floatingStyle ? floatingStyle : undefined, onOptionSelect: handleDropdownSelect, onMouseMove: handleMouseMove, onOptionHover: handleOptionHover, onSelectAll: handleSelectAll, onEdit: handleEdit, onComplete: handleComplete, children: children }));
+    const portaledDropdown = shouldPortal && portalContainer && isOpen ? createPortal(selectDropdownNode, portalContainer) : null;
     return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: internalRef, className: classNames('ncua-selectbox', `ncua-selectbox--${size}`, {
                     'ncua-selectbox--open': isOpen,
                     'ncua-selectbox--disabled': disabled,
@@ -124,7 +151,7 @@ const SelectBox = forwardRef(({ placeholder = '선택하세요', disabledPlaceho
                     destructive: destructive,
                 }, className), ...props, children: [_jsxs("div", { className: classNames('ncua-selectbox__content'), onClick: toggleDropdown, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, role: "combobox", "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-controls": `selectbox-options-${id || 'default'}`, "aria-disabled": disabled, "aria-label": selectedOption ? selectedOption.label : placeholder, "aria-activedescendant": activeDescendantId, children: [_jsxs("div", { className: "ncua-selectbox__content-inner", children: [_jsx("div", { className: "ncua-selectbox__value", children: _jsx(DisplayValue, { displayValue: displayValue }) }), _jsx(ChevronDown, { width: size === 'xs' ? ICON_SIZE_XS : ICON_SIZE_SM, height: size === 'xs' ? ICON_SIZE_XS : ICON_SIZE_SM, color: disabled ? COLOR.gray300 : COLOR.gray500, className: classNames('ncua-selectbox__arrow', {
                                             'ncua-selectbox__arrow--up': isOpen,
-                                        }) })] }), _jsx(SelectDropdown, { ref: dropdownRef, isOpen: isOpen, direction: dropdownDirection, size: size, options: optionItems, value: value, focusedIndex: focusedIndex, maxHeight: maxHeight, listboxId: `selectbox-options-${id || 'default'}`, multiple: multiple, showFooterButtons: multiple, selectAllButtonText: selectAllButtonText, componentType: "selectbox", isKeyboardNavigation: isKeyboardNavigation, activeDescendantId: activeDescendantId, align: align, onOptionSelect: handleDropdownSelect, onMouseMove: handleMouseMove, onOptionHover: handleOptionHover, onSelectAll: handleSelectAll, onEdit: handleEdit, onComplete: handleComplete, children: children })] }), hintText && (_jsx(HintText, { destructive: destructive, className: "ncua-hint-text", children: hintText })), register && (_jsx("input", { type: "hidden", ...register, value: multiple ? JSON.stringify(value || []) : String(value || '') }))] }), selectedTags.length > 0 && (_jsx("div", { className: "ncua-selectbox__tags", children: selectedTags.map((tag) => (_jsx(Tag, { text: tag.label, size: "sm", close: true, onButtonClick: () => handleRemoveTag(tag.id) }, tag.id))) }))] }));
+                                        }) })] }), !shouldPortal && selectDropdownNode] }), hintText && (_jsx(HintText, { destructive: destructive, className: "ncua-hint-text", children: hintText })), register && (_jsx("input", { type: "hidden", ...register, value: multiple ? JSON.stringify(value || []) : String(value || '') }))] }), selectedTags.length > 0 && (_jsx("div", { className: "ncua-selectbox__tags", children: selectedTags.map((tag) => (_jsx(Tag, { text: tag.label, size: "sm", close: true, onButtonClick: () => handleRemoveTag(tag.id) }, tag.id))) })), portaledDropdown] }));
 });
 SelectBox.displayName = 'SelectBox';
 export { DEFAULT_MAX_HEIGHT, SelectBox };

package/dist/temp/src/components/index.d.ts

@@ -31,7 +31,10 @@ export * from './forms-and-input/textarea';
 export * from './forms-and-input/toggle';
 export * from './image-and-icons/dot';
 export * from './image-and-icons/featured-icon';
+export * from './layout/block-container';
+export * from './layout/block-header';
 export * from './layout/divider';
+export * from './layout/page-title';
 export * from './navigation/bread-crumb';
 export * from './navigation/horizontal-tab';
 export * from './navigation/pagination';

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

@@ -36,7 +36,10 @@ export * from './forms-and-input/toggle';
 export * from './image-and-icons/dot';
 export * from './image-and-icons/featured-icon';
 // Layout
+export * from './layout/block-container';
+export * from './layout/block-header';
 export * from './layout/divider';
+export * from './layout/page-title';
 // Navigation
 export * from './navigation/bread-crumb';
 export * from './navigation/horizontal-tab';

package/dist/temp/src/components/layout/block-container/BlockContainer.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+interface BlockContainerProps extends ComponentPropsWithoutRef<'section'> {
+    children: ReactNode;
+    className?: string;
+}
+interface BlockContainerBodyProps extends ComponentPropsWithoutRef<'div'> {
+    children: ReactNode;
+    className?: string;
+}
+export declare const BlockContainer: {
+    ({ children, className, ...rest }: BlockContainerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Body: {
+        ({ children, className, ...rest }: BlockContainerBodyProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export type { BlockContainerProps, BlockContainerBodyProps };

package/dist/temp/src/components/layout/block-container/BlockContainer.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+const BlockContainerBase = ({ children, className, ...rest }) => {
+    return (_jsx("section", { className: classNames('ncua-block-container', className), ...rest, children: children }));
+};
+BlockContainerBase.displayName = 'BlockContainer';
+const Body = ({ children, className, ...rest }) => {
+    return (_jsx("div", { className: classNames('ncua-block-container__body', className), ...rest, children: children }));
+};
+Body.displayName = 'BlockContainer.Body';
+export const BlockContainer = Object.assign(BlockContainerBase, { Body });

package/dist/temp/src/components/layout/block-container/index.d.ts

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

package/dist/temp/src/components/layout/block-container/index.js

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

package/dist/temp/src/components/layout/block-header/BlockHeader.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+interface BlockHeaderProps extends Omit<ComponentPropsWithoutRef<'header'>, 'title' | 'children'> {
+    title: ReactNode;
+    tooltip?: string;
+    action?: ReactNode;
+    showDivider?: boolean;
+    badge?: ReactNode;
+    description?: string;
+    collapsible?: {
+        expanded: boolean;
+        onToggle: () => void;
+    };
+    showRequiredNotice?: boolean;
+    controlStrip?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+}
+declare const BlockHeader: {
+    ({ title, tooltip, action, showDivider, badge, description, collapsible, showRequiredNotice, controlStrip, children, className, ...rest }: BlockHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { BlockHeader };
+export type { BlockHeaderProps };

package/dist/temp/src/components/layout/block-header/BlockHeader.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronUp } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { Tooltip } from '../../overlays/tooltip/Tooltip';
+const ICON_SIZE = 24;
+const CollapsibleButton = ({ expanded, onToggle }) => (_jsx("button", { type: "button", className: "ncua-block-header__collapsible-btn", onClick: onToggle, "aria-expanded": expanded, children: expanded ? (_jsx(ChevronUp, { width: ICON_SIZE, height: ICON_SIZE, color: "var(--gray-300)" })) : (_jsx(ChevronDown, { width: ICON_SIZE, height: ICON_SIZE, color: "var(--gray-300)" })) }));
+const BlockHeader = ({ title, tooltip, action, showDivider = true, badge, description, collapsible, showRequiredNotice = false, controlStrip, children, className, ...rest }) => {
+    const hasColumnLayout = !!description;
+    const hasTabChildren = !!children;
+    const hasControlStrip = !!controlStrip;
+    const isCollapsed = !!collapsible && !collapsible.expanded;
+    return (_jsxs("header", { className: classNames('ncua-block-header', {
+            'ncua-block-header--column': hasColumnLayout,
+            'ncua-block-header--no-divider': !showDivider || hasTabChildren || isCollapsed,
+            'ncua-block-header--has-tab': hasTabChildren && !isCollapsed,
+            'ncua-block-header--has-control-strip': hasControlStrip,
+            'ncua-block-header--is-required': showRequiredNotice,
+        }, className), ...rest, children: [_jsxs("div", { className: "ncua-block-header__row", children: [_jsxs("div", { className: "ncua-block-header__title-area", children: [_jsx("span", { className: "ncua-block-header__title", children: title }), tooltip && _jsx(Tooltip, { content: tooltip, size: "sm", position: "top", hideArrow: true, iconType: "fill" }), badge && _jsx("span", { className: "ncua-block-header__badge", children: badge })] }), _jsxs("div", { className: "ncua-block-header__action-area", children: [showRequiredNotice && (_jsxs("span", { className: "ncua-block-header__required-notice", children: [_jsx("span", { className: "ncua-block-header__required-notice--red", children: "* \uB294 \uD544\uC218 \uC785\uB825" }), _jsx("span", { className: "ncua-block-header__required-notice--gray", children: " \uD56D\uBAA9\uC785\uB2C8\uB2E4." })] })), action, collapsible && _jsx(CollapsibleButton, { ...collapsible })] })] }), hasColumnLayout && _jsx("p", { className: "ncua-block-header__description", children: description }), hasControlStrip && _jsx("div", { className: "ncua-block-header__control-strip", children: controlStrip }), hasTabChildren && !isCollapsed && _jsx("div", { className: "ncua-block-header__tabs", children: children })] }));
+};
+BlockHeader.displayName = 'BlockHeader';
+export { BlockHeader };

package/dist/temp/src/components/layout/block-header/SubTitle.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import type { Size } from '../../../../constant/size';
+type SubTitleSize = 'middle' | Extract<Size, 'sm' | 'xs'>;
+interface SubTitleProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+    title: ReactNode;
+    size?: SubTitleSize;
+    tooltip?: string;
+    description?: string;
+    error?: string;
+    action?: ReactNode;
+    required?: boolean;
+    className?: string;
+}
+declare const SubTitle: {
+    ({ title, size, tooltip, description, error, action, required, className, ...rest }: SubTitleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { SubTitle };
+export type { SubTitleProps, SubTitleSize };

package/dist/temp/src/components/layout/block-header/SubTitle.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { Tooltip } from '../../overlays/tooltip/Tooltip';
+const SubTitle = ({ title, size = 'sm', tooltip, description, error, action, required = false, className, ...rest }) => {
+    return (_jsxs("div", { className: classNames('ncua-sub-title', `ncua-sub-title--${size}`, className), ...rest, children: [_jsxs("div", { className: "ncua-sub-title__title-row", children: [_jsxs("div", { className: "ncua-sub-title__title-area", children: [required && _jsx("span", { className: "ncua-sub-title__required-marker", children: "*" }), _jsx("span", { className: "ncua-sub-title__title", children: title }), tooltip && _jsx(Tooltip, { content: tooltip, size: "sm", position: "right", hideArrow: true })] }), action && _jsx("div", { className: "ncua-sub-title__action", children: action })] }), description && _jsx("p", { className: "ncua-sub-title__description", children: description }), error && _jsx("p", { className: "ncua-sub-title__error", children: error })] }));
+};
+SubTitle.displayName = 'BlockHeader.SubTitle';
+export { SubTitle };

package/dist/temp/src/components/layout/block-header/index.d.ts

@@ -0,0 +1,2 @@
+export * from './BlockHeader';
+export * from './SubTitle';

package/dist/temp/src/components/layout/block-header/index.js

@@ -0,0 +1,2 @@
+export * from './BlockHeader';
+export * from './SubTitle';

package/dist/temp/src/components/layout/page-title/PageTitle.d.ts

@@ -0,0 +1,22 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+type PageTitleVariant = 'default' | 'detail' | 'fixed' | 'fixed-detail';
+interface PageTitleBreadcrumbItem {
+    label: string;
+    href?: string;
+}
+interface PageTitleProps extends ComponentPropsWithoutRef<'header'> {
+    title: string;
+    variant?: PageTitleVariant;
+    breadcrumbItems?: PageTitleBreadcrumbItem[];
+    onBack?: () => void;
+    guideButton?: ReactNode;
+    primaryAction?: ReactNode;
+    secondaryAction?: ReactNode;
+    className?: string;
+}
+declare const PageTitle: {
+    ({ title, variant, breadcrumbItems, onBack, guideButton, primaryAction, secondaryAction, className, ...rest }: PageTitleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { PageTitle };
+export type { PageTitleProps, PageTitleVariant, PageTitleBreadcrumbItem };

package/dist/temp/src/components/layout/page-title/PageTitle.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { Fragment } from 'react';
+import { Button } from '../../action/button/Button';
+const renderBreadcrumb = (items) => (_jsx("nav", { className: "ncua-page-title__breadcrumb", "aria-label": "breadcrumb", children: items.map((item, i) => (
+    // biome-ignore lint/suspicious/noArrayIndexKey: breadcrumb items may have duplicate labels
+    _jsx(Fragment, { children: i < items.length - 1 ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "ncua-page-title__breadcrumb-item", children: item.href ? _jsx("a", { href: item.href, children: item.label }) : item.label }), _jsx(ChevronRight, { className: "ncua-page-title__breadcrumb-separator" })] })) : (_jsx("span", { className: "ncua-page-title__breadcrumb-current", children: item.label })) }, i))) }));
+const renderBackButton = (onBack) => (_jsx(Button, { label: "", hierarchy: "secondary-gray", size: "xs", onlyIcon: true, leadingIcon: { type: 'icon', icon: ChevronLeft }, onClick: onBack, "aria-label": "\uC774\uC804 \uD398\uC774\uC9C0\uB85C \uB3CC\uC544\uAC00\uAE30", className: "ncua-page-title__back-btn" }));
+const PageTitle = ({ title, variant = 'default', breadcrumbItems, onBack, guideButton, primaryAction, secondaryAction, className, ...rest }) => {
+    const isFixed = variant === 'fixed' || variant === 'fixed-detail';
+    const isDetail = variant === 'detail' || variant === 'fixed-detail';
+    const hasBreadcrumb = !isFixed && breadcrumbItems && breadcrumbItems.length > 0;
+    return (_jsx("header", { className: classNames('ncua-page-title', { 'ncua-page-title--fixed': isFixed }, className), ...rest, children: _jsx("div", { className: "ncua-page-title__page-header", children: _jsxs("div", { className: classNames('ncua-page-title__header', {
+                    'ncua-page-title__header--has-breadcrumb': hasBreadcrumb,
+                }), children: [_jsxs("div", { className: "ncua-page-title__container", children: [hasBreadcrumb && renderBreadcrumb(breadcrumbItems), _jsxs("div", { className: "ncua-page-title__title-row", children: [isDetail && onBack && renderBackButton(onBack), _jsx("h1", { className: "ncua-page-title__title", children: title }), guideButton && _jsx("div", { className: "ncua-page-title__guide-btn", children: guideButton })] })] }), (secondaryAction || primaryAction) && (_jsxs("div", { className: "ncua-page-title__actions", children: [secondaryAction, primaryAction] }))] }) }) }));
+};
+PageTitle.displayName = 'PageTitle';
+export { PageTitle };

package/dist/temp/src/components/layout/page-title/index.d.ts

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

package/dist/temp/src/components/layout/page-title/index.js

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

package/dist/temp/src/components/overlays/dropdown/Dropdown.d.ts

@@ -49,6 +49,11 @@ export type DropdownBaseProps = {
     className?: string;
     opened?: boolean;
     closeOnClickOutside?: boolean;
+    /**
+     * 메뉴를 React Portal로 body에 렌더한다.
+     * 미지정 시 FloatingContext.preferPortal 값을 따른다 (DataGrid.Table horizontalScroll 내부에서는 자동 true).
+     */
+    usePortal?: boolean;
 };
 export type ActionDropdownProps = DropdownBaseProps & {
     variant?: 'action';

package/dist/temp/src/components/overlays/dropdown/Dropdown.js

@@ -7,6 +7,9 @@ import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-sc
 import { attachClosestEdge, extractClosestEdge, } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { DotsGrid02, DotsVertical, Eye, EyeOff } from '@ncds/ui-admin-icon';
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useFloatingPosition } from '../../../hooks/useFloatingPosition';
+import { usePortalState } from '../../../hooks/usePortalState';
 import { Button } from '../../action/button';
 import { applyDraftToItems, arrayReorderByEdge, hasDraftChanged, initDraftState } from './utils';
 const DROPDOWN_ID_RADIX = 36;
@@ -82,14 +85,25 @@ const SortableConfigItem = ({ item, isVisible, showVisibilityToggle, sortable, d
                     }
                 }, children: _jsx(DotsGrid02, {}) })), _jsx("div", { className: "ncua-dropdown__item-content", children: _jsxs("div", { className: "ncua-dropdown__item-text-group", children: [ItemIcon && _jsx(ItemIcon, { className: "ncua-dropdown__item-icon" }), _jsx("span", { className: "ncua-dropdown__item-text", children: item.text })] }) }), showVisibilityToggle && (_jsx("button", { type: "button", className: "ncua-dropdown__item-visibility", "aria-label": `${item.text} 노출`, "aria-pressed": isVisible, onClick: () => onToggleVisibility(item.id), children: isVisible ? _jsx(Eye, {}) : _jsx(EyeOff, {}) }))] }));
 };
+// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: 액션/설정 두 variant 통합 + drag-and-drop 필수 분기
 export const Dropdown = (props) => {
-    const { trigger, align = 'left', header, groups, className, opened = false, closeOnClickOutside = true } = props;
+    const { trigger, align = 'left', header, groups, className, opened = false, closeOnClickOutside = true, usePortal, } = props;
     const variant = props.variant ?? 'action';
     const closeOnClickItem = variant === 'action' ? (props.closeOnClickItem ?? true) : false;
     const [isOpen, setIsOpen] = useState(opened);
     const dropdownRef = useRef(null);
     const triggerRef = useRef(null);
+    const menuRef = useRef(null);
     const menuItemsRef = useRef(null);
+    const { shouldPortal, portalContainer } = usePortalState(usePortal);
+    const floatingStyle = useFloatingPosition({
+        enabled: shouldPortal,
+        isOpen,
+        triggerRef,
+        floatingRef: menuRef,
+        direction: 'down',
+        align,
+    });
     const dropdownIdRef = useRef(`ncua-dropdown-${Math.random().toString(DROPDOWN_ID_RADIX).slice(DROPDOWN_ID_SLICE_START, DROPDOWN_ID_SLICE_END)}`);
     const dropdownId = dropdownIdRef.current;
     useEffect(() => {
@@ -144,7 +158,10 @@ export const Dropdown = (props) => {
         triggerRef.current?.focus();
     };
     const handleClickOutside = (event) => {
-        if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        const target = event.target;
+        const insideContainer = dropdownRef.current?.contains(target) ?? false;
+        const insidePortaledMenu = menuRef.current?.contains(target) ?? false;
+        if (!insideContainer && !insidePortaledMenu) {
             setIsOpen(false);
         }
     };
@@ -156,6 +173,7 @@ export const Dropdown = (props) => {
             }
         }
     };
+    // biome-ignore lint/correctness/useExhaustiveDependencies: handleClickOutside는 안정적 참조
     useEffect(() => {
         if (closeOnClickOutside) {
             document.addEventListener('mousedown', handleClickOutside);
@@ -165,6 +183,7 @@ export const Dropdown = (props) => {
         }
     }, [closeOnClickOutside]);
     // ESC 키로 닫고 trigger로 포커스 복귀
+    // biome-ignore lint/correctness/useExhaustiveDependencies: closeAndRestoreFocus는 안정적 참조
     useEffect(() => {
         if (!isOpen)
             return;
@@ -261,13 +280,18 @@ export const Dropdown = (props) => {
     const dropdownClasses = ['ncua-dropdown', className, align === 'right' ? 'ncua-dropdown--right' : '']
         .filter(Boolean)
         .join(' ');
-    return (_jsxs("div", { className: dropdownClasses, ref: dropdownRef, children: [renderTrigger(), isOpen && (_jsxs("div", { className: "ncua-dropdown__menu", role: variant === 'config' ? 'dialog' : 'menu', "aria-label": variant === 'config' ? '설정' : undefined, children: [renderHeader(), _jsx("div", { ref: menuItemsRef, className: "ncua-dropdown__menu-items", children: groups.map((group) => {
-                            // config variant uses draft.order to drive the rendered order
-                            const orderedItems = variant === 'config' && draft
-                                ? draft.order
-                                    .map((id) => group.items.find((i) => i.id === id))
-                                    .filter((i) => i !== undefined)
-                                : group.items;
-                            return (_jsx("div", { className: "ncua-dropdown__group", children: orderedItems.map((item) => variant === 'config' ? renderConfigItem(item, group.sortable === true) : renderActionItem(item)) }, group.items[0]?.id));
-                        }) }), renderFooter()] }))] }));
+    const menuClasses = ['ncua-dropdown__menu', shouldPortal ? 'ncua-dropdown__menu--portal' : '']
+        .filter(Boolean)
+        .join(' ');
+    const menuNode = isOpen ? (_jsxs("div", { ref: menuRef, className: menuClasses, role: variant === 'config' ? 'dialog' : 'menu', "aria-label": variant === 'config' ? '설정' : undefined, style: shouldPortal && floatingStyle ? floatingStyle : undefined, children: [renderHeader(), _jsx("div", { ref: menuItemsRef, className: "ncua-dropdown__menu-items", children: groups.map((group) => {
+                    // config variant uses draft.order to drive the rendered order
+                    const orderedItems = variant === 'config' && draft
+                        ? draft.order
+                            .map((id) => group.items.find((i) => i.id === id))
+                            .filter((i) => i !== undefined)
+                        : group.items;
+                    return (_jsx("div", { className: "ncua-dropdown__group", children: orderedItems.map((item) => variant === 'config' ? renderConfigItem(item, group.sortable === true) : renderActionItem(item)) }, group.items[0]?.id));
+                }) }), renderFooter()] })) : null;
+    const portaledMenu = shouldPortal && portalContainer && menuNode ? createPortal(menuNode, portalContainer) : null;
+    return (_jsxs("div", { className: dropdownClasses, ref: dropdownRef, children: [renderTrigger(), !shouldPortal && menuNode, portaledMenu] }));
 };

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

@@ -0,0 +1,9 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import type { NotificationColor } from './Notification';
+interface CalloutNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+    color?: NotificationColor;
+    title?: ReactNode;
+}
+declare const CalloutNotification: import("react").ForwardRefExoticComponent<CalloutNotificationProps & import("react").RefAttributes<HTMLDivElement>>;
+export type { CalloutNotificationProps };
+export { CalloutNotification };

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+const CalloutNotification = forwardRef(({ color = 'neutral', className, title, ...rest }, ref) => (_jsx("div", { ref: ref, className: classNames('ncua-callout-notification', `ncua-callout-notification--${color}`, className), ...rest, children: title })));
+CalloutNotification.displayName = 'CalloutNotification';
+export { CalloutNotification };

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

@@ -31,6 +31,21 @@ interface FloatingNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>
      * @default 0
      */
     autoClose?: number;
+    /**
+     * Portal 마운트 여부.
+     *
+     * - `false` (기본값): 부모 JSX 트리 안에 카드로 그대로 렌더된다.
+     *   특정 컨테이너 안에서 표시하거나, 인라인 미리보기 (docs/스토리북) 용도.
+     *
+     * - `true`: document.body의 `.ncua-floating-notification-host` 싱글톤에
+     *   `createPortal`로 마운트되어 우측 상단에 노출. 다중 발생 시 최신 토스트가
+     *   상단에 노출되고 이전 토스트들이 아래로 12px씩 겹쳐 쌓인다 (LIFO,
+     *   `--ncua-floating-notification-stack-overlap` 변수로 조정 가능).
+     *   Vanilla(CDN) 측 `new ncua.Notification({type:'floating'}).show()` 와 동일한 동작.
+     *
+     * @default false
+     */
+    portal?: boolean;
 }
 declare const FloatingNotification: import("react").ForwardRefExoticComponent<FloatingNotificationProps & import("react").RefAttributes<HTMLDivElement>>;
 export type { FloatingNotificationProps };