@ncds/ui-admin 1.7.0 → 1.8.0

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

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

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

@@ -1,25 +1,3 @@
-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 { AlertCircle, AlertTriangle, CheckCircle, Pin02, XClose } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
@@ -27,31 +5,30 @@ import { forwardRef } from 'react';
 import { COLOR } from '../../../constant/color';
 import { Button } from '../button';
 import { FeaturedIcon } from '../featured-icon/FeaturedIcon';
-var iconMap = {
+const iconMap = {
     neutral: Pin02,
     error: AlertTriangle,
     warning: AlertCircle,
     success: CheckCircle,
 };
-var iconColorMap = {
+const iconColorMap = {
     neutral: 'gray700',
     error: 'red500',
     warning: 'orange500',
     success: 'green600',
 };
-var MessageNotification = forwardRef(function (_a, ref) {
-    var title = _a.title, supportingText = _a.supportingText, Icon = _a.icon, _b = _a.color, color = _b === void 0 ? 'neutral' : _b, onClose = _a.onClose, className = _a.className, actions = _a.actions, onHidePermanently = _a.onHidePermanently, rest = __rest(_a, ["title", "supportingText", "icon", "color", "onClose", "className", "actions", "onHidePermanently"]);
+const MessageNotification = forwardRef(({ title, supportingText, icon: Icon, color = 'neutral', onClose, className, actions, onHidePermanently, ...rest }, ref) => {
     // message 타입은 neutral, error, warning, success 4가지 색상만 지원
-    var validColor = color === 'info' ? 'neutral' : color;
-    var iconColor = validColor;
-    var featuredIconProps = {
+    const validColor = color === 'info' ? 'neutral' : color;
+    const iconColor = validColor;
+    const featuredIconProps = {
         icon: Icon || iconMap[validColor] || Pin02,
         size: 'lg',
         color: iconColor,
         theme: 'light-circle',
     };
-    var closeIconColor = COLOR[iconColorMap[validColor] || 'gray700'];
-    return (_jsx("div", __assign({ ref: ref, className: classNames('ncua-message-notification', "ncua-message-notification--".concat(validColor), className), role: "alert" }, rest, { children: _jsx("div", __assign({ className: "ncua-message-notification__container" }, { children: _jsxs("div", __assign({ className: "ncua-message-notification__content" }, { children: [_jsxs("div", __assign({ className: "ncua-message-notification__content-wrapper" }, { children: [iconMap[validColor] && (_jsx(FeaturedIcon, __assign({}, featuredIconProps, { className: "ncua-message-notification__icon" }))), _jsxs("div", __assign({ className: "ncua-message-notification__text-container" }, { children: [_jsx("span", __assign({ className: "ncua-message-notification__title" }, { children: title })), supportingText && _jsx("span", __assign({ className: "ncua-message-notification__supporting-text" }, { children: supportingText }))] }))] })), _jsx("div", __assign({ className: "ncua-message-notification__actions-container" }, { children: actions && (_jsx("div", __assign({ className: "ncua-message-notification__actions" }, { children: actions.map(function (action) { return (_jsx(Button, { size: "xs", hierarchy: action.hierarchy || 'text', label: action.label, onClick: action === null || action === void 0 ? void 0 : action.onClick }, "".concat(action.label, "-").concat(action.hierarchy))); }) }))) })), _jsxs("div", __assign({ className: "ncua-message-notification__footer-container" }, { children: [onHidePermanently && (_jsx("button", __assign({ type: "button", className: classNames('ncua-notification__action-button', 'ncua-notification__action-button--link', 'ncua-message-notification__hide-link'), onClick: onHidePermanently }, { children: "\uB2E4\uC2DC \uBCF4\uC9C0 \uC54A\uAE30" }))), onClose && (_jsx("button", __assign({ type: "button", className: "ncua-message-notification__close-button", onClick: onClose, "aria-label": "\uC54C\uB9BC \uB2EB\uAE30" }, { children: _jsx(XClose, { width: 20, height: 20, color: closeIconColor }) })))] }))] })) })) })));
+    const closeIconColor = COLOR[iconColorMap[validColor] || 'gray700'];
+    return (_jsx("div", { ref: ref, className: classNames('ncua-message-notification', `ncua-message-notification--${validColor}`, className), role: "alert", ...rest, children: _jsx("div", { className: "ncua-message-notification__container", children: _jsxs("div", { className: "ncua-message-notification__content", children: [_jsxs("div", { className: "ncua-message-notification__content-wrapper", children: [iconMap[validColor] && (_jsx(FeaturedIcon, { ...featuredIconProps, className: "ncua-message-notification__icon" })), _jsxs("div", { className: "ncua-message-notification__text-container", children: [_jsx("span", { className: "ncua-message-notification__title", children: title }), supportingText && _jsx("span", { className: "ncua-message-notification__supporting-text", children: supportingText })] })] }), _jsx("div", { className: "ncua-message-notification__actions-container", children: actions && (_jsx("div", { className: "ncua-message-notification__actions", children: actions.map((action) => (_jsx(Button, { size: "xs", hierarchy: action.hierarchy || 'text', label: action.label, onClick: action?.onClick }, `${action.label}-${action.hierarchy}`))) })) }), _jsxs("div", { className: "ncua-message-notification__footer-container", children: [onHidePermanently && (_jsx("button", { type: "button", className: classNames('ncua-notification__action-button', 'ncua-notification__action-button--link', 'ncua-message-notification__hide-link'), onClick: onHidePermanently, children: "\uB2E4\uC2DC \uBCF4\uC9C0 \uC54A\uAE30" })), onClose && (_jsx("button", { type: "button", className: "ncua-message-notification__close-button", onClick: onClose, "aria-label": "\uC54C\uB9BC \uB2EB\uAE30", children: _jsx(XClose, { width: 20, height: 20, color: closeIconColor }) }))] })] }) }) }));
 });
 MessageNotification.displayName = 'MessageNotification';
 export { MessageNotification };

package/dist/temp/src/components/notification/Notification.js

@@ -1,40 +1,17 @@
-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 { forwardRef } from 'react';
 import { FloatingNotification } from './FloatingNotification';
 import { FullWidthNotification } from './FullWidthNotification';
 import { MessageNotification } from './MessageNotification';
-var Notification = forwardRef(function (_a, ref) {
-    var _b = _a.type, type = _b === void 0 ? 'floating' : _b, _c = _a.color, color = _c === void 0 ? 'neutral' : _c, rest = __rest(_a, ["type", "color"]);
+const Notification = forwardRef(({ type = 'floating', color = 'neutral', ...rest }, ref) => {
     if (type === 'floating') {
-        return _jsx(FloatingNotification, __assign({ color: color }, rest, { ref: ref }));
+        return _jsx(FloatingNotification, { color: color, ...rest, ref: ref });
     }
     if (type === 'full-width') {
-        return _jsx(FullWidthNotification, __assign({ color: color }, rest, { ref: ref }));
+        return _jsx(FullWidthNotification, { color: color, ...rest, ref: ref });
     }
     if (type === 'message') {
-        return _jsx(MessageNotification, __assign({ color: color }, rest, { ref: ref }));
+        return _jsx(MessageNotification, { color: color, ...rest, ref: ref });
     }
     return null;
 });

package/dist/{types/src/components/input → temp/src/components/number-input}/NumberInput.d.ts

@@ -1,4 +1,4 @@
-import { type InputBaseProps } from './InputBase';
+import { type InputBaseProps } from '../input-base/InputBase';
 type NumberInputProps = InputBaseProps & {
     minValue?: number;
     maxValue?: number;

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

@@ -0,0 +1,68 @@
+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 '../input-base/InputBase';
+export const NumberInput = forwardRef(({ size = 'xs', minValue, maxValue, step = 1, stepperPosition, disabled, ...props }, ref) => {
+    const inputRef = useRef(null);
+    const mergedRef = useMergeRefs([ref, inputRef]);
+    const getCurrentValue = useCallback(() => {
+        const value = inputRef.current?.value;
+        return value ? Number.parseFloat(value) : 0;
+    }, []);
+    const updateValue = useCallback((newValue) => {
+        if (!inputRef.current)
+            return;
+        // min/max 범위 체크
+        let clampedValue = newValue;
+        if (minValue !== undefined && clampedValue < minValue) {
+            clampedValue = minValue;
+        }
+        if (maxValue !== undefined && clampedValue > maxValue) {
+            clampedValue = maxValue;
+        }
+        inputRef.current.value = clampedValue.toString();
+        // onChange 이벤트 트리거
+        const event = new Event('input', { bubbles: true });
+        inputRef.current.dispatchEvent(event);
+    }, [minValue, maxValue]);
+    const handleIncrement = useCallback(() => {
+        const currentValue = getCurrentValue();
+        const newValue = currentValue + step;
+        if (maxValue === undefined || newValue <= maxValue) {
+            updateValue(newValue);
+        }
+    }, [getCurrentValue, step, maxValue, updateValue]);
+    const handleDecrement = useCallback(() => {
+        const currentValue = getCurrentValue();
+        const newValue = currentValue - step;
+        if (minValue === undefined || newValue >= minValue) {
+            updateValue(newValue);
+        }
+    }, [getCurrentValue, step, minValue, updateValue]);
+    const handleKeyDown = useCallback((event) => {
+        if (disabled)
+            return;
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            handleIncrement();
+        }
+        else if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            handleDecrement();
+        }
+        // 기존 onKeyDown prop이 있으면 호출
+        props.onKeyDown?.(event);
+    }, [disabled, handleIncrement, handleDecrement, props]);
+    const renderStepperButtonGroup = (position) => {
+        if (position !== stepperPosition) {
+            return null;
+        }
+        return (_jsxs("div", { 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, { 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/number-input/index.d.ts

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

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

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

package/dist/temp/src/components/pagination/NavButton.js

@@ -1,51 +1,39 @@
-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);
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ArrowLeft, ArrowRight, ChevronLeft, ChevronLeftDouble, ChevronRight, ChevronRightDouble, } from '@ncds/ui-admin-icon';
 import { Button } from '../button';
-var ICON_SIZE_PC = 16;
-var ICON_SIZE_MOBILE = 20;
-var NAV_BUTTON_CONFIG = {
+const ICON_SIZE_PC = 16;
+const ICON_SIZE_MOBILE = 20;
+const NAV_BUTTON_CONFIG = {
     first: {
         label: '처음',
         className: 'ncua-pagination__first',
-        getIcon: function (_isPC) { return ChevronLeftDouble; },
+        getIcon: (_isPC) => ChevronLeftDouble,
     },
     prev: {
         label: '이전',
         className: 'ncua-pagination__before',
-        getIcon: function (isPC) { return (isPC ? ChevronLeft : ArrowLeft); },
+        getIcon: (isPC) => (isPC ? ChevronLeft : ArrowLeft),
     },
     next: {
         label: '다음',
         className: 'ncua-pagination__next',
-        getIcon: function (isPC) { return (isPC ? ChevronRight : ArrowRight); },
+        getIcon: (isPC) => (isPC ? ChevronRight : ArrowRight),
     },
     last: {
         label: '마지막',
         className: 'ncua-pagination__last',
-        getIcon: function (_isPC) { return ChevronRightDouble; },
+        getIcon: (_isPC) => ChevronRightDouble,
     },
 };
-export var NavButton = function (_a) {
-    var type = _a.type, breakPoint = _a.breakPoint, noPrev = _a.noPrev, noNext = _a.noNext, onClick = _a.onClick;
-    var config = NAV_BUTTON_CONFIG[type];
-    var isNavigationButton = type === 'first' || type === 'prev' || type === 'next' || type === 'last';
-    var isFirstOrPrev = type === 'first' || type === 'prev';
-    var isNextOrLast = type === 'next' || type === 'last';
-    var disabled = (isFirstOrPrev ? noPrev : false) || (isNextOrLast ? noNext : false);
-    var isPC = breakPoint === 'pc';
+export const NavButton = ({ type, breakPoint, noPrev, noNext, onClick, }) => {
+    const config = NAV_BUTTON_CONFIG[type];
+    const isNavigationButton = type === 'first' || type === 'prev' || type === 'next' || type === 'last';
+    const isFirstOrPrev = type === 'first' || type === 'prev';
+    const isNextOrLast = type === 'next' || type === 'last';
+    const disabled = (isFirstOrPrev ? noPrev : false) || (isNextOrLast ? noNext : false);
+    const isPC = breakPoint === 'pc';
     // key를 제외한 공통 props
-    var buttonProps = {
+    const buttonProps = {
         label: config.label,
         className: config.className,
         onlyIcon: true,
@@ -57,10 +45,10 @@ export var NavButton = function (_a) {
         },
         hierarchy: 'secondary-gray',
         size: (isPC ? 'xs' : 'sm'),
-        disabled: disabled,
-        onClick: onClick,
+        disabled,
+        onClick,
     };
     // key 값 별도 계산
-    var buttonKey = isNavigationButton ? "".concat(breakPoint, "-").concat(type) : undefined;
-    return _jsx(Button, __assign({}, buttonProps), buttonKey);
+    const buttonKey = isNavigationButton ? `${breakPoint}-${type}` : undefined;
+    return _jsx(Button, { ...buttonProps }, buttonKey);
 };

package/dist/temp/src/components/pagination/Pagination.js

@@ -1,49 +1,26 @@
-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 { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { isFunction, range, uniqueId } from 'lodash-es';
 import { useEffect, useState } from 'react';
 import { NavButton } from './NavButton';
 // 네비게이션 버튼 설정
-export var Pagination = function (_a) {
-    var _b = _a.className, className = _b === void 0 ? '' : _b, totalCount = _a.totalCount, _c = _a.itemCountPerPage, itemCountPerPage = _c === void 0 ? 10 : _c, _d = _a.pageCount, pageCount = _d === void 0 ? 10 : _d, currentPage = _a.currentPage, _e = _a.breakPoint, breakPoint = _e === void 0 ? 'pc' : _e, onPageChange = _a.onPageChange, restProps = __rest(_a, ["className", "totalCount", "itemCountPerPage", "pageCount", "currentPage", "breakPoint", "onPageChange"]);
-    var totalPage = Math.ceil(totalCount / itemCountPerPage);
-    var _f = useState(1), start = _f[0], setStart = _f[1];
-    var noPrev = breakPoint === 'mo' ? currentPage === 1 : start === 1;
-    var noNext = breakPoint === 'mo' ? currentPage >= totalPage : start + pageCount - 1 >= totalPage;
-    var showJumpPageButton = totalPage > pageCount;
-    var handleClickButton = function (pageNum) {
+export const Pagination = ({ className = '', totalCount, itemCountPerPage = 10, pageCount = 10, currentPage, breakPoint = 'pc', onPageChange, ...restProps }) => {
+    const totalPage = Math.ceil(totalCount / itemCountPerPage);
+    const [start, setStart] = useState(1);
+    const noPrev = breakPoint === 'mo' ? currentPage === 1 : start === 1;
+    const noNext = breakPoint === 'mo' ? currentPage >= totalPage : start + pageCount - 1 >= totalPage;
+    const showJumpPageButton = totalPage > pageCount;
+    const handleClickButton = (pageNum) => {
         if (isFunction(onPageChange)) {
             onPageChange(pageNum);
         }
     };
-    useEffect(function () {
+    useEffect(() => {
         if (currentPage === start + pageCount) {
             setStart(start + pageCount);
         }
         if (currentPage > start + pageCount) {
-            var newStart = Math.floor((currentPage - 1) / pageCount) * pageCount + 1;
+            const newStart = Math.floor((currentPage - 1) / pageCount) * pageCount + 1;
             setStart(newStart);
         }
         if (currentPage < start) {
@@ -53,41 +30,37 @@ export var Pagination = function (_a) {
             setStart(1);
         }
         if (currentPage === totalPage) {
-            var lastGroupStart = Math.floor((totalPage - 1) / pageCount) * pageCount + 1;
+            const lastGroupStart = Math.floor((totalPage - 1) / pageCount) * pageCount + 1;
             setStart(lastGroupStart);
         }
     }, [currentPage]);
-    return (_jsxs("div", __assign({ className: classNames('ncua-pagination', "ncua-pagination--".concat(breakPoint), className) }, { children: [showJumpPageButton && (_jsxs(_Fragment, { children: [NavButton({
+    return (_jsxs("div", { className: classNames('ncua-pagination', `ncua-pagination--${breakPoint}`, className), children: [showJumpPageButton && (_jsxs(_Fragment, { children: [NavButton({
                         type: 'first',
-                        breakPoint: breakPoint,
-                        noPrev: noPrev,
-                        noNext: noNext,
-                        onClick: function () { return handleClickButton(1); },
+                        breakPoint,
+                        noPrev,
+                        noNext,
+                        onClick: () => handleClickButton(1),
                     }), NavButton({
                         type: 'prev',
-                        breakPoint: breakPoint,
-                        noPrev: noPrev,
-                        noNext: noNext,
-                        onClick: function () {
-                            return breakPoint === 'mo'
-                                ? handleClickButton(Math.max(currentPage - 1, 1))
-                                : handleClickButton(Math.max(start - pageCount, 1));
-                        },
-                    })] })), _jsx("ul", __assign({ className: "ncua-pagination__list" }, { children: range(start, Math.min(totalPage + 1, start + pageCount)).map(function (pageNumber, i) { return (_jsx("li", __assign({ className: "ncua-pagination__item" }, { children: _jsx("button", __assign({ className: classNames('ncua-pagination__page-num', { 'is-current': pageNumber === currentPage }), onClick: function () { return handleClickButton(start + i); } }, restProps, { children: start + i })) }), uniqueId('ncua-pagination__page-num'))); }) })), _jsxs("p", __assign({ className: "ncua-pagination__page-info" }, { children: [_jsx("em", __assign({ className: "ncua-pagination__current-num" }, { children: currentPage })), " / ", totalPage] })), showJumpPageButton && (_jsxs(_Fragment, { children: [NavButton({
+                        breakPoint,
+                        noPrev,
+                        noNext,
+                        onClick: () => breakPoint === 'mo'
+                            ? handleClickButton(Math.max(currentPage - 1, 1))
+                            : handleClickButton(Math.max(start - pageCount, 1)),
+                    })] })), _jsx("ul", { className: "ncua-pagination__list", children: range(start, Math.min(totalPage + 1, start + pageCount)).map((pageNumber, i) => (_jsx("li", { className: "ncua-pagination__item", children: _jsx("button", { className: classNames('ncua-pagination__page-num', { 'is-current': pageNumber === currentPage }), onClick: () => handleClickButton(start + i), ...restProps, children: start + i }) }, uniqueId('ncua-pagination__page-num')))) }), _jsxs("p", { className: "ncua-pagination__page-info", children: [_jsx("em", { className: "ncua-pagination__current-num", children: currentPage }), " / ", totalPage] }), showJumpPageButton && (_jsxs(_Fragment, { children: [NavButton({
                         type: 'next',
-                        breakPoint: breakPoint,
-                        noPrev: noPrev,
-                        noNext: noNext,
-                        onClick: function () {
-                            return breakPoint === 'mo'
-                                ? handleClickButton(Math.min(currentPage + 1, totalPage))
-                                : handleClickButton(Math.min(start + pageCount, totalPage));
-                        },
+                        breakPoint,
+                        noPrev,
+                        noNext,
+                        onClick: () => breakPoint === 'mo'
+                            ? handleClickButton(Math.min(currentPage + 1, totalPage))
+                            : handleClickButton(Math.min(start + pageCount, totalPage)),
                     }), NavButton({
                         type: 'last',
-                        breakPoint: breakPoint,
-                        noPrev: noPrev,
-                        noNext: noNext,
-                        onClick: function () { return handleClickButton(totalPage); },
-                    })] }))] })));
+                        breakPoint,
+                        noPrev,
+                        noNext,
+                        onClick: () => handleClickButton(totalPage),
+                    })] }))] }));
 };

package/dist/temp/src/components/{input → password-input}/PasswordInput.d.ts

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

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

@@ -0,0 +1,28 @@
+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 '../input-base/InputBase';
+const svgSize = {
+    xs: 14,
+    sm: 20,
+};
+export const PasswordInput = forwardRef(({ size = 'xs', ...props }, ref) => {
+    const [isVisible, setIsVisible] = useState(false);
+    const svgProps = {
+        width: svgSize[size],
+        height: svgSize[size],
+    };
+    const handleVisibilityChange = () => {
+        setIsVisible((prev) => !prev);
+    };
+    return (_jsx(InputBase, { 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", { className: classNames('ncua-input__icon-wrap', 'ncua-input__right-icon', 'ncua-input__password-icon'), type: "button", onClick: handleVisibilityChange, children: isVisible ? _jsx(Eye, { ...svgProps }) : _jsx(EyeOff, { ...svgProps }) })),
+        }, ...props }));
+});

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

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

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

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

package/dist/temp/src/components/progress-bar/ProgressBar.js

@@ -1,31 +1,19 @@
-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);
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SegmentBar } from './components/SegmentBar';
 import { SegmentLabels, SingleLabel } from './components/SegmentLabels';
 import { useProgressBar } from './hooks/useProgressBar';
 import { getFillColorClass } from './utils';
-export var ProgressBar = function (_a) {
-    var label = _a.label, value = _a.value, segments = _a.segments, _b = _a.showZeroLabel, showZeroLabel = _b === void 0 ? false : _b, _c = _a.valueToPercent, valueToPercent = _c === void 0 ? true : _c;
-    var _d = useProgressBar(label, value, segments, valueToPercent), totalValue = _d.totalValue, displayValue = _d.displayValue, processedSegments = _d.processedSegments, effectiveLabel = _d.effectiveLabel, progressValueStyle = _d.progressValueStyle, hasSegments = _d.hasSegments, segmentCount = _d.segmentCount, shouldSpaceOut = _d.shouldSpaceOut;
-    var isFloatingLabel = effectiveLabel === 'top-float' || effectiveLabel === 'bottom-float';
-    var containerClassName = "ncua-progress-bar ncua-progress-bar-".concat(effectiveLabel || '');
-    var isRightLabel = effectiveLabel === 'right';
-    var isBottomLabel = effectiveLabel === 'bottom';
-    var isMultiSegment = hasSegments && segmentCount >= 2;
+export const ProgressBar = ({ label, value, segments, showZeroLabel = false, valueToPercent = true, }) => {
+    const { totalValue, displayValue, processedSegments, effectiveLabel, progressValueStyle, hasSegments, segmentCount, shouldSpaceOut, } = useProgressBar(label, value, segments, valueToPercent);
+    const isFloatingLabel = effectiveLabel === 'top-float' || effectiveLabel === 'bottom-float';
+    const containerClassName = `ncua-progress-bar ncua-progress-bar-${effectiveLabel || ''}`;
+    const isRightLabel = effectiveLabel === 'right';
+    const isBottomLabel = effectiveLabel === 'bottom';
+    const isMultiSegment = hasSegments && segmentCount >= 2;
     // segments가 1개일 때는 기존 value 방식과 동일하게 처리
     if (hasSegments && segmentCount === 1) {
-        var singleSegment = processedSegments[0];
-        return (_jsxs("div", __assign({ className: containerClassName, style: progressValueStyle }, { children: [isFloatingLabel && (_jsx(SingleLabel, { labelType: effectiveLabel, displayValue: displayValue, totalValue: totalValue, showZeroLabel: showZeroLabel })), _jsxs("div", __assign({ className: "ncua-progress-bar__content" }, { children: [_jsx("div", __assign({ className: "ncua-progress-bar__bar" }, { children: _jsx("div", { className: "ncua-progress-bar__fill ".concat(getFillColorClass(singleSegment.color)), style: { width: "".concat(totalValue, "%") }, "aria-valuenow": totalValue, "aria-valuemin": 0, "aria-valuemax": 100 }) })), isRightLabel && (_jsx(SingleLabel, { labelType: "right", displayValue: displayValue, totalValue: totalValue, showZeroLabel: showZeroLabel }))] })), isBottomLabel && (_jsx(SingleLabel, { labelType: "bottom", displayValue: displayValue, totalValue: totalValue, showZeroLabel: showZeroLabel }))] })));
+        const singleSegment = processedSegments[0];
+        return (_jsxs("div", { className: containerClassName, style: progressValueStyle, children: [isFloatingLabel && (_jsx(SingleLabel, { labelType: effectiveLabel, displayValue: displayValue, totalValue: totalValue, showZeroLabel: showZeroLabel })), _jsxs("div", { className: "ncua-progress-bar__content", children: [_jsx("div", { className: "ncua-progress-bar__bar", children: _jsx("div", { className: `ncua-progress-bar__fill ${getFillColorClass(singleSegment.color)}`, style: { width: `${totalValue}%` }, "aria-valuenow": totalValue, "aria-valuemin": 0, "aria-valuemax": 100 }) }), isRightLabel && (_jsx(SingleLabel, { labelType: "right", displayValue: displayValue, totalValue: totalValue, showZeroLabel: showZeroLabel }))] }), isBottomLabel && (_jsx(SingleLabel, { labelType: "bottom", displayValue: displayValue, totalValue: totalValue, showZeroLabel: showZeroLabel }))] }));
     }
-    return (_jsxs("div", __assign({ className: containerClassName, style: progressValueStyle }, { children: [isFloatingLabel && (_jsx(SingleLabel, { labelType: effectiveLabel, displayValue: displayValue, totalValue: totalValue, showZeroLabel: showZeroLabel })), _jsxs("div", __assign({ className: "ncua-progress-bar__content" }, { children: [_jsx("div", __assign({ className: "ncua-progress-bar__bar ".concat(hasSegments ? 'ncua-progress-bar__bar--segments' : '') }, { children: hasSegments ? (_jsx(SegmentBar, { segments: processedSegments, shouldSpaceOut: shouldSpaceOut })) : (_jsx("div", { className: "ncua-progress-bar__fill", style: { width: "".concat(totalValue, "%") }, "aria-valuenow": totalValue, "aria-valuemin": 0, "aria-valuemax": 100 })) })), isRightLabel && (_jsx(SingleLabel, { labelType: "right", displayValue: displayValue, totalValue: totalValue, showZeroLabel: showZeroLabel }))] })), isMultiSegment && (_jsx(SegmentLabels, { segments: processedSegments, segmentCount: segmentCount, showZeroLabel: showZeroLabel })), !isMultiSegment && isBottomLabel && (_jsx(SingleLabel, { labelType: "bottom", displayValue: displayValue, totalValue: totalValue, showZeroLabel: showZeroLabel }))] })));
+    return (_jsxs("div", { className: containerClassName, style: progressValueStyle, children: [isFloatingLabel && (_jsx(SingleLabel, { labelType: effectiveLabel, displayValue: displayValue, totalValue: totalValue, showZeroLabel: showZeroLabel })), _jsxs("div", { className: "ncua-progress-bar__content", children: [_jsx("div", { className: `ncua-progress-bar__bar ${hasSegments ? 'ncua-progress-bar__bar--segments' : ''}`, children: hasSegments ? (_jsx(SegmentBar, { segments: processedSegments, shouldSpaceOut: shouldSpaceOut })) : (_jsx("div", { className: "ncua-progress-bar__fill", style: { width: `${totalValue}%` }, "aria-valuenow": totalValue, "aria-valuemin": 0, "aria-valuemax": 100 })) }), isRightLabel && (_jsx(SingleLabel, { labelType: "right", displayValue: displayValue, totalValue: totalValue, showZeroLabel: showZeroLabel }))] }), isMultiSegment && (_jsx(SegmentLabels, { segments: processedSegments, segmentCount: segmentCount, showZeroLabel: showZeroLabel })), !isMultiSegment && isBottomLabel && (_jsx(SingleLabel, { labelType: "bottom", displayValue: displayValue, totalValue: totalValue, showZeroLabel: showZeroLabel }))] }));
 };

package/dist/temp/src/components/progress-bar/components/SegmentBar.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { getFillColorClass } from '../utils';
-export var SegmentBar = function (_a) {
-    var segments = _a.segments, shouldSpaceOut = _a.shouldSpaceOut;
-    return (_jsx(_Fragment, { children: segments.map(function (segment, index) {
-            var isFirst = index === 0;
-            var isLast = index === segments.length - 1;
-            return (_jsx("div", { className: "ncua-progress-bar__fill ".concat(isFirst ? 'ncua-progress-bar__fill--first' : '', " ").concat(isLast ? 'ncua-progress-bar__fill--last' : '', " ").concat(shouldSpaceOut && isLast ? 'ncua-progress-bar__fill--spaced' : '', " ").concat(getFillColorClass(segment.color)), style: { width: "".concat(segment.width, "%") } }, "".concat(segment.color, "-").concat(index)));
+export const SegmentBar = ({ segments, shouldSpaceOut }) => {
+    return (_jsx(_Fragment, { children: segments.map((segment, index) => {
+            const isFirst = index === 0;
+            const isLast = index === segments.length - 1;
+            return (_jsx("div", { className: `ncua-progress-bar__fill ${isFirst ? 'ncua-progress-bar__fill--first' : ''} ${isLast ? 'ncua-progress-bar__fill--last' : ''} ${shouldSpaceOut && isLast ? 'ncua-progress-bar__fill--spaced' : ''} ${getFillColorClass(segment.color)}`, style: { width: `${segment.width}%` } }, `${segment.color}-${index}`));
         }) }));
 };