@ncds/ui-admin 1.6.4-alpha.1 → 1.7.0

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

@@ -0,0 +1,121 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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';
+var validationSvgSize = {
+    xs: 14,
+    sm: 16,
+};
+var generalSvgSize = {
+    xs: 14,
+    sm: 20,
+};
+var InputBase = forwardRef(function (_a, ref) {
+    var _b = _a.size, size = _b === void 0 ? 'xs' : _b, required = _a.required, label = _a.label, hintText = _a.hintText, disabled = _a.disabled, validation = _a.validation, destructive = _a.destructive, leadingElement = _a.leadingElement, trailingElement = _a.trailingElement, showHelpIcon = _a.showHelpIcon, maxLength = _a.maxLength, showTextCount = _a.showTextCount, className = _a.className, props = __rest(_a, ["size", "required", "label", "hintText", "disabled", "validation", "destructive", "leadingElement", "trailingElement", "showHelpIcon", "maxLength", "showTextCount", "className"]);
+    var inputRef = useRef(null);
+    var _c = useState(0), textCount = _c[0], setTextCount = _c[1];
+    useEffect(function () {
+        if (inputRef.current && showTextCount) {
+            setTextCount(inputRef.current.value.length);
+            var handleInput_1 = function () {
+                var _a, _b;
+                setTextCount((_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value.length) !== null && _b !== void 0 ? _b : 0);
+            };
+            inputRef.current.addEventListener('input', handleInput_1);
+            return function () {
+                var _a;
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('input', handleInput_1);
+            };
+        }
+    }, [showTextCount]);
+    var renderOutsideSlot = function (slot) {
+        if (slot.type === 'custom' && slot.placement !== 'outside') {
+            return null;
+        }
+        switch (slot.type) {
+            case 'button':
+                return (_jsx("button", __assign({ type: slot.isSubmit ? 'submit' : 'button', className: classNames('ncua-input__button', "ncua-input__button--".concat(size)), onClick: slot.onClick }, { children: slot.label })));
+            case 'text':
+                return (_jsx("span", __assign({ className: classNames('ncua-input__leading-text', "ncua-input__leading-text--".concat(size)) }, { children: slot.text })));
+            case 'custom':
+                return slot.children;
+            default:
+                return null;
+        }
+    };
+    var renderInsideSlot = function (slot, position) {
+        var _a, _b;
+        switch (slot.type) {
+            case 'icon': {
+                var SlotIcon = slot.icon;
+                return (_jsx("div", __assign({ className: "ncua-input__icon-wrap" }, { children: _jsx(SlotIcon, { className: classNames("ncua-input__".concat(position, "-icon"), slot.className), color: slot.color ? COLOR[slot.color] : undefined, width: (_a = slot.size) !== null && _a !== void 0 ? _a : generalSvgSize[size], height: (_b = slot.size) !== null && _b !== void 0 ? _b : generalSvgSize[size] }) })));
+            }
+            case 'custom':
+                if (slot.placement !== 'inside') {
+                    return null;
+                }
+                return slot.children;
+            default:
+                return null;
+        }
+    };
+    var renderClearButton = function () {
+        if (!props.clearText)
+            return null;
+        return (_jsx("button", __assign({ 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] }) })));
+    };
+    var renderStatusIcon = function () {
+        if (destructive) {
+            return (_jsx("div", __assign({ 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", __assign({ 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;
+    };
+    var renderLabel = function () {
+        if (!label)
+            return null;
+        return (_jsxs("div", __assign({ className: classNames('ncua-input__label', "ncua-input__label--".concat(size)) }, { children: [_jsx(Label, __assign({ isRequired: required, htmlFor: props.id }, { children: label })), showHelpIcon && _jsx(HelpCircle, { className: "ncua-input__help-icon" })] })));
+    };
+    return (_jsxs("div", __assign({ className: classNames('ncua-input', "ncua-input--".concat(size), {
+            destructive: destructive,
+            'is-disabled': disabled,
+            'ncua-input__trailing-button': (trailingElement === null || trailingElement === void 0 ? void 0 : trailingElement.type) === 'button',
+            'ncua-input__leading-text-wrap': (leadingElement === null || leadingElement === void 0 ? void 0 : leadingElement.type) === 'text',
+        }, className) }, { children: [renderLabel(), _jsxs("div", __assign({ className: "ncua-input__content-wrap" }, { children: [_jsxs("div", __assign({ className: "ncua-input__content" }, { children: [leadingElement && renderOutsideSlot(leadingElement), _jsxs("div", __assign({ className: classNames('ncua-input__field', "ncua-input__field--".concat(size)) }, { children: [leadingElement && renderInsideSlot(leadingElement, 'left'), _jsx("input", __assign({ ref: function (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", __assign({ className: "ncua-input__field-text-count" }, { children: [_jsx("output", __assign({ className: "ncua-input__field-text-count-current" }, { children: textCount })), _jsxs("span", { children: ["/", maxLength] })] })))] })), hintText && (_jsx(HintText, __assign({ className: "ncua-input__hint-text", destructive: destructive }, { children: hintText })))] })));
+});
+export { InputBase };

package/dist/temp/src/components/input/NumberInput.d.ts

@@ -0,0 +1,9 @@
+import { type InputBaseProps } from './InputBase';
+type NumberInputProps = InputBaseProps & {
+    minValue?: number;
+    maxValue?: number;
+    step?: number;
+    stepperPosition: 'leading' | 'trailing';
+};
+export declare const NumberInput: import("react").ForwardRefExoticComponent<NumberInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/temp/src/components/input/NumberInput.js

@@ -0,0 +1,93 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useRef } from 'react';
+import { useMergeRefs } from '../../hooks';
+import { ButtonStepper } from '../button';
+import { InputBase } from './InputBase';
+export var NumberInput = forwardRef(function (_a, ref) {
+    var _b = _a.size, size = _b === void 0 ? 'xs' : _b, minValue = _a.minValue, maxValue = _a.maxValue, _c = _a.step, step = _c === void 0 ? 1 : _c, stepperPosition = _a.stepperPosition, disabled = _a.disabled, props = __rest(_a, ["size", "minValue", "maxValue", "step", "stepperPosition", "disabled"]);
+    var inputRef = useRef(null);
+    var mergedRef = useMergeRefs([ref, inputRef]);
+    var getCurrentValue = useCallback(function () {
+        var _a;
+        var value = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value;
+        return value ? Number.parseFloat(value) : 0;
+    }, []);
+    var updateValue = useCallback(function (newValue) {
+        if (!inputRef.current)
+            return;
+        // min/max 범위 체크
+        var clampedValue = newValue;
+        if (minValue !== undefined && clampedValue < minValue) {
+            clampedValue = minValue;
+        }
+        if (maxValue !== undefined && clampedValue > maxValue) {
+            clampedValue = maxValue;
+        }
+        inputRef.current.value = clampedValue.toString();
+        // onChange 이벤트 트리거
+        var event = new Event('input', { bubbles: true });
+        inputRef.current.dispatchEvent(event);
+    }, [minValue, maxValue]);
+    var handleIncrement = useCallback(function () {
+        var currentValue = getCurrentValue();
+        var newValue = currentValue + step;
+        if (maxValue === undefined || newValue <= maxValue) {
+            updateValue(newValue);
+        }
+    }, [getCurrentValue, step, maxValue, updateValue]);
+    var handleDecrement = useCallback(function () {
+        var currentValue = getCurrentValue();
+        var newValue = currentValue - step;
+        if (minValue === undefined || newValue >= minValue) {
+            updateValue(newValue);
+        }
+    }, [getCurrentValue, step, minValue, updateValue]);
+    var handleKeyDown = useCallback(function (event) {
+        var _a;
+        if (disabled)
+            return;
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            handleIncrement();
+        }
+        else if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            handleDecrement();
+        }
+        // 기존 onKeyDown prop이 있으면 호출
+        (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, event);
+    }, [disabled, handleIncrement, handleDecrement, props]);
+    var renderStepperButtonGroup = function (position) {
+        if (position !== stepperPosition) {
+            return null;
+        }
+        return (_jsxs("div", __assign({ className: "ncua-input__stepper-button-group" }, { children: [_jsx(ButtonStepper, { size: size, direction: "up", onClick: handleIncrement, disabled: disabled }), _jsx(ButtonStepper, { size: size, direction: "down", onClick: handleDecrement, disabled: disabled })] })));
+    };
+    return (_jsx(InputBase, __assign({ type: "number", leadingElement: renderStepperButtonGroup('leading')
+            ? { type: 'custom', children: renderStepperButtonGroup('leading'), placement: 'inside' }
+            : props.leadingElement, trailingElement: renderStepperButtonGroup('trailing')
+            ? { type: 'custom', children: renderStepperButtonGroup('trailing'), placement: 'inside' }
+            : props.trailingElement, ref: mergedRef, size: size, disabled: disabled, min: minValue, max: maxValue, step: step, onKeyDown: handleKeyDown, className: "ncua-input__number" }, props)));
+});

package/dist/temp/src/components/input/PasswordInput.d.ts

@@ -0,0 +1,2 @@
+import { type InputBaseProps } from './InputBase';
+export declare const PasswordInput: import("react").ForwardRefExoticComponent<InputBaseProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/temp/src/components/input/PasswordInput.js

@@ -0,0 +1,51 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Eye, EyeOff, Lock01 } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { forwardRef, useState } from 'react';
+import { InputBase } from './InputBase';
+var svgSize = {
+    xs: 14,
+    sm: 20,
+};
+export var PasswordInput = forwardRef(function (_a, ref) {
+    var _b = _a.size, size = _b === void 0 ? 'xs' : _b, props = __rest(_a, ["size"]);
+    var _c = useState(false), isVisible = _c[0], setIsVisible = _c[1];
+    var svgProps = {
+        width: svgSize[size],
+        height: svgSize[size],
+    };
+    var handleVisibilityChange = function () {
+        setIsVisible(function (prev) { return !prev; });
+    };
+    return (_jsx(InputBase, __assign({ ref: ref, size: size, type: isVisible ? 'text' : 'password', leadingElement: {
+            type: 'icon',
+            icon: Lock01,
+            color: props.value ? 'gray600' : 'gray300',
+        }, trailingElement: {
+            type: 'custom',
+            placement: 'inside',
+            children: (_jsx("button", __assign({ className: classNames('ncua-input__icon-wrap', 'ncua-input__right-icon', 'ncua-input__password-icon'), type: "button", onClick: handleVisibilityChange }, { children: isVisible ? _jsx(Eye, __assign({}, svgProps)) : _jsx(EyeOff, __assign({}, svgProps)) }))),
+        } }, props)));
+});

package/dist/temp/src/components/input/Textarea.d.ts

@@ -0,0 +1,14 @@
+import { type ComponentPropsWithRef } from 'react';
+import type { Size } from '../../../constant/size';
+interface TextareaProps extends ComponentPropsWithRef<'textarea'> {
+    className?: string;
+    size?: Extract<Size, 'xs' | 'sm'>;
+    label?: string;
+    hintText?: string;
+    required?: boolean;
+    disabled?: boolean;
+    destructive?: boolean;
+    characterCount?: boolean;
+}
+export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+export {};

package/dist/temp/src/components/input/Textarea.js

@@ -0,0 +1,60 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { HintText } from '../shared/hintText/HintText';
+import { Label } from '../shared/label/Label';
+export var Textarea = forwardRef(function (_a, ref) {
+    var _b;
+    var className = _a.className, _c = _a.size, size = _c === void 0 ? 'xs' : _c, label = _a.label, required = _a.required, disabled = _a.disabled, hintText = _a.hintText, characterCount = _a.characterCount, destructive = _a.destructive, props = __rest(_a, ["className", "size", "label", "required", "disabled", "hintText", "characterCount", "destructive"]);
+    var textareaRef = useRef(null);
+    var _d = useState(0), textCount = _d[0], setTextCount = _d[1];
+    var shouldShowHintArea = hintText || characterCount;
+    useEffect(function () {
+        if (textareaRef.current && characterCount) {
+            setTextCount(textareaRef.current.value.length);
+            var handleInput_1 = function () {
+                var _a, _b;
+                setTextCount((_b = (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.value.length) !== null && _b !== void 0 ? _b : 0);
+            };
+            textareaRef.current.addEventListener('input', handleInput_1);
+            return function () {
+                var _a;
+                (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('input', handleInput_1);
+            };
+        }
+    }, [characterCount]);
+    return (_jsxs("div", __assign({ className: classNames('ncua-input', 'ncua-input--textarea', "ncua-input--textarea--".concat(size), {
+            destructive: destructive,
+            'is-disabled': disabled,
+        }, className) }, { children: [label && (_jsx(Label, __assign({ htmlFor: props.id, isRequired: required }, { children: label }))), _jsx("textarea", __assign({ ref: function (node) {
+                    if (typeof ref === 'function') {
+                        ref(node);
+                    }
+                    else if (ref) {
+                        ref.current = node;
+                    }
+                    textareaRef.current = node;
+                }, className: "ncua-input__textarea", disabled: disabled }, props)), shouldShowHintArea && (_jsxs("div", __assign({ className: "ncua-input__text-count-wrap" }, { children: [hintText && (_jsx(HintText, __assign({ as: "div", destructive: destructive }, { children: hintText }))), characterCount && (_jsx("div", __assign({ className: "ncua-input__text-count" }, { children: _jsxs("span", __assign({ className: "ncua-input__text-count-text" }, { children: [_jsx("span", __assign({ className: "ncua-input__text-count-text-count" }, { children: textCount })), "/", (_b = props.maxLength) !== null && _b !== void 0 ? _b : 0] })) })))] })))] })));
+});

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

@@ -0,0 +1,4 @@
+export * from './InputBase';
+export * from './NumberInput';
+export * from './PasswordInput';
+export * from './Textarea';

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

@@ -0,0 +1,4 @@
+export * from './InputBase';
+export * from './NumberInput';
+export * from './PasswordInput';
+export * from './Textarea';

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,101 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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';
+var Modal = function (_a) {
+    var isOpen = _a.isOpen, onClose = _a.onClose, children = _a.children, _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.closeOnBackdropClick, closeOnBackdropClick = _c === void 0 ? false : _c, _d = _a.closeOnEsc, closeOnEsc = _d === void 0 ? true : _d, className = _a.className, zIndex = _a.zIndex, restProps = __rest(_a, ["isOpen", "onClose", "children", "size", "closeOnBackdropClick", "closeOnEsc", "className", "zIndex"]);
+    var modalRef = useRef(null);
+    var handleBackdropClick = function (e) {
+        if (closeOnBackdropClick && e.target === e.currentTarget) {
+            onClose();
+        }
+    };
+    useEffect(function () {
+        var handleKeyDown = function (e) {
+            if (isOpen && closeOnEsc && e.key === 'Escape') {
+                onClose();
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('keydown', handleKeyDown);
+            document.body.style.overflow = 'hidden';
+        }
+        return function () {
+            document.removeEventListener('keydown', handleKeyDown);
+            document.body.style.overflow = '';
+        };
+    }, [isOpen, closeOnEsc, onClose]);
+    if (!isOpen)
+        return null;
+    var modalContent = (_jsx("div", __assign({ className: classnames('ncua-modal-backdrop', className), onClick: handleBackdropClick, ref: modalRef, style: zIndex ? { zIndex: zIndex } : undefined }, restProps, { children: _jsx("div", __assign({ className: classnames('ncua-modal', "ncua-modal--".concat(size)) }, { children: children })) })));
+    return ReactDOM.createPortal(modalContent, document.body);
+};
+Modal.Header = function (_a) {
+    var children = _a.children, onClose = _a.onClose, featuredIcon = _a.featuredIcon, title = _a.title, subtitle = _a.subtitle, _b = _a.align, align = _b === void 0 ? 'left' : _b, _c = _a.showDivider, showDivider = _c === void 0 ? false : _c, _d = _a.hideCloseButton, hideCloseButton = _d === void 0 ? false : _d;
+    return (_jsxs(_Fragment, { children: [_jsxs("header", __assign({ className: classnames('ncua-modal__header', "ncua-modal__header--".concat(align), {
+                    'ncua-modal__header--close-button': !hideCloseButton,
+                }) }, { children: [featuredIcon && (_jsx(FeaturedIcon, { icon: featuredIcon.icon, color: featuredIcon.color, theme: featuredIcon.theme, size: "sm" })), _jsxs("div", __assign({ className: "ncua-modal__title" }, { children: [_jsx("div", __assign({ className: "ncua-modal__title-text" }, { children: title })), subtitle && _jsx("div", __assign({ 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 = function (_a) {
+    var children = _a.children, className = _a.className;
+    return _jsx("div", __assign({ 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 = function (_a) {
+    var children = _a.children, _b = _a.layout, layout = _b === void 0 ? 'vertical' : _b, _c = _a.showDivider, showDivider = _c === void 0 ? false : _c, _d = _a.align, align = _d === void 0 ? 'stretch' : _d, checkboxContent = _a.checkboxContent, className = _a.className;
+    return (_jsxs(_Fragment, { children: [showDivider && _jsx("div", { className: "ncua-modal__actions-divider" }), _jsxs("div", __assign({ className: classnames('ncua-modal__actions-wrapper', className, {
+                    'ncua-modal__actions-wrapper--checkbox': layout === 'checkbox',
+                }) }, { children: [layout === 'checkbox' && (_jsx("div", __assign({ className: "ncua-modal__actions-checkbox" }, { children: _jsx("div", __assign({ className: "ncua-modal__actions-checkbox-content" }, { children: checkboxContent })) }))), _jsx("div", __assign({ className: classnames('ncua-modal__actions', "ncua-modal__actions--".concat(layout), "ncua-modal__actions--".concat(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 };