@ncds/ui-admin 1.3.0 → 1.5.0

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

@@ -58,6 +58,17 @@ Object.keys(_checkbox).forEach(function (key) {
     }
   });
 });
+var _combobox = require("./combobox");
+Object.keys(_combobox).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _combobox[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _combobox[key];
+    }
+  });
+});
 var _datePicker = require("./date-picker");
 Object.keys(_datePicker).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -212,6 +223,28 @@ Object.keys(_select).forEach(function (key) {
     }
   });
 });
+var _selectDropdown = require("./select-dropdown");
+Object.keys(_selectDropdown).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _selectDropdown[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _selectDropdown[key];
+    }
+  });
+});
+var _selectbox = require("./selectbox");
+Object.keys(_selectbox).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _selectbox[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _selectbox[key];
+    }
+  });
+});
 var _shared = require("./shared");
 Object.keys(_shared).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -245,6 +278,17 @@ Object.keys(_spinner).forEach(function (key) {
     }
   });
 });
+var _switch = require("./switch");
+Object.keys(_switch).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _switch[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _switch[key];
+    }
+  });
+});
 var _tab = require("./tab");
 Object.keys(_tab).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -50,7 +50,27 @@ var InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)(function
     leadingElement = _a.leadingElement,
     trailingElement = _a.trailingElement,
     showHelpIcon = _a.showHelpIcon,
-    props = __rest(_a, ["size", "required", "label", "hintText", "disabled", "validation", "destructive", "leadingElement", "trailingElement", "showHelpIcon"]);
+    maxLength = _a.maxLength,
+    showTextCount = _a.showTextCount,
+    props = __rest(_a, ["size", "required", "label", "hintText", "disabled", "validation", "destructive", "leadingElement", "trailingElement", "showHelpIcon", "maxLength", "showTextCount"]);
+  var inputRef = (0, _react.useRef)(null);
+  var _c = (0, _react.useState)(0),
+    textCount = _c[0],
+    setTextCount = _c[1];
+  (0, _react.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;
@@ -163,17 +183,41 @@ var InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)(function
     })
   }, {
     children: [renderLabel(), (0, _jsxRuntime.jsxs)("div", __assign({
-      className: "ncua-input__content"
+      className: "ncua-input__content-wrap"
     }, {
-      children: [leadingElement && renderOutsideSlot(leadingElement), (0, _jsxRuntime.jsxs)("div", __assign({
-        className: (0, _classnames.default)('ncua-input__field', "ncua-input__field--".concat(size))
+      children: [(0, _jsxRuntime.jsxs)("div", __assign({
+        className: "ncua-input__content"
+      }, {
+        children: [leadingElement && renderOutsideSlot(leadingElement), (0, _jsxRuntime.jsxs)("div", __assign({
+          className: (0, _classnames.default)('ncua-input__field', "ncua-input__field--".concat(size))
+        }, {
+          children: [leadingElement && renderInsideSlot(leadingElement, 'left'), (0, _jsxRuntime.jsx)("input", __assign({
+            ref: function (node) {
+              if (typeof ref === 'function') {
+                ref(node);
+              } else if (ref) {
+                ref.current = node;
+              }
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore - ref assignment is needed for internal tracking
+              inputRef.current = node;
+            },
+            type: "text",
+            disabled: disabled,
+            maxLength: maxLength
+          }, props)), renderClearButton(), renderStatusIcon(), trailingElement && renderInsideSlot(trailingElement, 'right')]
+        })), trailingElement && renderOutsideSlot(trailingElement)]
+      })), showTextCount && maxLength && (0, _jsxRuntime.jsxs)("div", __assign({
+        className: "ncua-input__field-text-count"
       }, {
-        children: [leadingElement && renderInsideSlot(leadingElement, 'left'), (0, _jsxRuntime.jsx)("input", __assign({
-          ref: ref,
-          type: "text",
-          disabled: disabled
-        }, props)), trailingElement && renderInsideSlot(trailingElement, 'right'), renderClearButton(), renderStatusIcon()]
-      })), trailingElement && renderOutsideSlot(trailingElement)]
+        children: [(0, _jsxRuntime.jsx)("output", __assign({
+          className: "ncua-input__field-text-count-current"
+        }, {
+          children: textCount
+        })), (0, _jsxRuntime.jsxs)("span", {
+          children: ["/", maxLength]
+        })]
+      }))]
     })), hintText && (0, _jsxRuntime.jsx)(_HintText.HintText, __assign({
       className: "ncua-input__hint-text",
       destructive: destructive

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

@@ -0,0 +1,130 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NumberInput = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _hooks = require("../../hooks");
+var _button = require("../button");
+var _InputBase = require("./InputBase");
+var __assign = void 0 && (void 0).__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 = void 0 && (void 0).__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;
+};
+var NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.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 = (0, _react.useRef)(null);
+  var mergedRef = (0, _hooks.useMergeRefs)([ref, inputRef]);
+  var getCurrentValue = (0, _react.useCallback)(function () {
+    var _a;
+    var value = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value;
+    return value ? parseFloat(value) : 0;
+  }, []);
+  var updateValue = (0, _react.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 = (0, _react.useCallback)(function () {
+    var currentValue = getCurrentValue();
+    var newValue = currentValue + step;
+    if (maxValue === undefined || newValue <= maxValue) {
+      updateValue(newValue);
+    }
+  }, [getCurrentValue, step, maxValue, updateValue]);
+  var handleDecrement = (0, _react.useCallback)(function () {
+    var currentValue = getCurrentValue();
+    var newValue = currentValue - step;
+    if (minValue === undefined || newValue >= minValue) {
+      updateValue(newValue);
+    }
+  }, [getCurrentValue, step, minValue, updateValue]);
+  var handleKeyDown = (0, _react.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 (0, _jsxRuntime.jsxs)("div", __assign({
+      className: "ncua-input__stepper-button-group"
+    }, {
+      children: [(0, _jsxRuntime.jsx)(_button.ButtonStepper, {
+        size: size,
+        direction: "up",
+        onClick: handleIncrement,
+        disabled: disabled
+      }), (0, _jsxRuntime.jsx)(_button.ButtonStepper, {
+        size: size,
+        direction: "down",
+        onClick: handleDecrement,
+        disabled: disabled
+      })]
+    }));
+  };
+  return (0, _jsxRuntime.jsx)(_InputBase.InputBase, __assign({
+    type: "number",
+    leadingElement: renderStepperButtonGroup('leading') ? {
+      type: 'custom',
+      children: renderStepperButtonGroup('leading')
+    } : props.leadingElement,
+    trailingElement: renderStepperButtonGroup('trailing') ? {
+      type: 'custom',
+      children: renderStepperButtonGroup('trailing')
+    } : props.trailingElement,
+    ref: mergedRef,
+    size: size,
+    disabled: disabled,
+    min: minValue,
+    max: maxValue,
+    step: step,
+    onKeyDown: handleKeyDown,
+    className: "ncua-input__number"
+  }, props));
+});

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

@@ -70,26 +70,18 @@ var Textarea = exports.Textarea = /*#__PURE__*/(0, _react.forwardRef)(function (
       isRequired: required
     }, {
       children: label
-    })), (0, _jsxRuntime.jsx)("div", __assign({
-      className: "ncua-input__content"
-    }, {
-      children: (0, _jsxRuntime.jsx)("div", __assign({
-        className: "ncua-input__field"
-      }, {
-        children: (0, _jsxRuntime.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 && (0, _jsxRuntime.jsxs)("div", __assign({
+    })), (0, _jsxRuntime.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 && (0, _jsxRuntime.jsxs)("div", __assign({
       className: "ncua-input__text-count-wrap"
     }, {
       children: [hintText && (0, _jsxRuntime.jsx)(_HintText.HintText, __assign({

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

@@ -14,6 +14,17 @@ Object.keys(_InputBase).forEach(function (key) {
     }
   });
 });
+var _NumberInput = require("./NumberInput");
+Object.keys(_NumberInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _NumberInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _NumberInput[key];
+    }
+  });
+});
 var _PasswordInput = require("./PasswordInput");
 Object.keys(_PasswordInput).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -35,15 +46,4 @@ Object.keys(_Textarea).forEach(function (key) {
       return _Textarea[key];
     }
   });
-});
-var _FileInput = require("./FileInput");
-Object.keys(_FileInput).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _FileInput[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _FileInput[key];
-    }
-  });
 });

package/dist/cjs/src/components/modal/Modal.js

@@ -36,11 +36,12 @@ var Modal = function (_a) {
     _b = _a.size,
     size = _b === void 0 ? 'md' : _b,
     _c = _a.closeOnBackdropClick,
-    closeOnBackdropClick = _c === void 0 ? true : _c,
+    closeOnBackdropClick = _c === void 0 ? false : _c,
     _d = _a.closeOnEsc,
     closeOnEsc = _d === void 0 ? true : _d,
     className = _a.className,
-    restProps = __rest(_a, ["isOpen", "onClose", "children", "size", "closeOnBackdropClick", "closeOnEsc", "className"]);
+    zIndex = _a.zIndex,
+    restProps = __rest(_a, ["isOpen", "onClose", "children", "size", "closeOnBackdropClick", "closeOnEsc", "className", "zIndex"]);
   var modalRef = (0, _react.useRef)(null);
   var handleBackdropClick = function (e) {
     if (closeOnBackdropClick && e.target === e.currentTarget) {
@@ -66,7 +67,10 @@ var Modal = function (_a) {
   var modalContent = (0, _jsxRuntime.jsx)("div", __assign({
     className: (0, _classnames.default)('ncua-modal-backdrop', className),
     onClick: handleBackdropClick,
-    ref: modalRef
+    ref: modalRef,
+    style: zIndex ? {
+      zIndex: zIndex
+    } : undefined
   }, restProps, {
     children: (0, _jsxRuntime.jsx)("div", __assign({
       className: (0, _classnames.default)('ncua-modal', "ncua-modal--".concat(size))

package/dist/cjs/src/components/notification/FloatingNotification.js

@@ -36,6 +36,7 @@ var iconNameMap = {
   error: 'alert-triangle',
   warning: 'alert-circle',
   success: 'check-circle'
+  // info는 floating에서는 지원하지 않음
 };
 var FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
   var title = _a.title,
@@ -45,10 +46,15 @@ var FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _reac
     onClose = _a.onClose,
     className = _a.className,
     actions = _a.actions,
-    rest = __rest(_a, ["title", "supportingText", "color", "onClose", "className", "actions"]);
+    _c = _a.autoClose,
+    autoClose = _c === void 0 ? 0 : _c,
+    rest = __rest(_a, ["title", "supportingText", "color", "onClose", "className", "actions", "autoClose"]);
+  var _d = (0, _react.useState)(false),
+    shouldRemove = _d[0],
+    setShouldRemove = _d[1];
   var iconColor = color;
   var featuredIconProps = {
-    name: iconNameMap[color],
+    name: iconNameMap[color] || 'pin-02',
     size: 'sm',
     color: iconColor,
     theme: 'dark-circle'
@@ -56,6 +62,31 @@ var FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _reac
   var isMobile = (0, _useMediaQuery.useMediaQuery)(_breakpoint.MEDIA_QUERY.mobile, {
     onMatched: onClose
   });
+  // autoClose 타이머 관리
+  var timerRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    // autoClose가 0보다 크면 무조건 타이머 설정
+    if (autoClose > 0) {
+      timerRef.current = setTimeout(function () {
+        if (onClose) {
+          onClose();
+        }
+        // DOM에서 바로 제거
+        setShouldRemove(true);
+      }, autoClose);
+    }
+    // cleanup 함수: 컴포넌트 언마운트 시 타이머 정리
+    return function () {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [autoClose, onClose]);
+  // DOM에서 완전히 제거
+  if (shouldRemove) {
+    return null;
+  }
   return (0, _jsxRuntime.jsxs)("div", __assign({
     ref: ref,
     className: (0, _classnames.default)('ncua-floating-notification', "ncua-floating-notification--".concat(color), className),
@@ -90,7 +121,7 @@ var FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _reac
             children: actions.map(function (action) {
               return (0, _jsxRuntime.jsx)(_button.Button, {
                 size: "xs",
-                hierarchy: action.hierarchy || 'link',
+                hierarchy: action.hierarchy || 'text',
                 label: action.label,
                 onClick: action === null || action === void 0 ? void 0 : action.onClick
               }, "".concat(action.label, "-").concat(action.hierarchy));

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

@@ -32,13 +32,15 @@ var iconNameMap = {
   neutral: 'message-chat-square',
   error: 'alert-triangle',
   warning: 'alert-triangle',
-  success: 'check-circle'
+  success: 'check-circle',
+  info: 'info-circle'
 };
 var iconColorMap = {
   neutral: 'gray700',
   error: 'red500',
   warning: 'orange500',
-  success: 'green600'
+  success: 'green600',
+  info: 'violet600'
 };
 var FullWidthNotification = exports.FullWidthNotification = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
   var title = _a.title,
@@ -48,11 +50,43 @@ var FullWidthNotification = exports.FullWidthNotification = /*#__PURE__*/(0, _re
     onClose = _a.onClose,
     className = _a.className,
     actions = _a.actions,
-    rest = __rest(_a, ["title", "supportingText", "color", "onClose", "className", "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 = (0, _react.useState)(false),
+    shouldRemove = _d[0],
+    setShouldRemove = _d[1];
   var closeIconSize = {
     width: 20,
     height: 20
   };
+  // autoClose 타이머 관리
+  var timerRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    // autoClose가 0보다 크면 무조건 타이머 설정
+    if (autoClose > 0) {
+      timerRef.current = setTimeout(function () {
+        if (onClose) {
+          onClose();
+        }
+        // DOM에서 바로 제거
+        setShouldRemove(true);
+      }, autoClose);
+    }
+    // cleanup 함수: 컴포넌트 언마운트 시 타이머 정리
+    return function () {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [autoClose, onClose]);
+  // DOM에서 완전히 제거
+  if (shouldRemove) {
+    return null;
+  }
   return (0, _jsxRuntime.jsx)("div", __assign({
     ref: ref,
     className: (0, _classnames.default)('ncua-full-width-notification', "ncua-full-width-notification--".concat(color), className),
@@ -80,10 +114,19 @@ var FullWidthNotification = exports.FullWidthNotification = /*#__PURE__*/(0, _re
               className: "ncua-full-width-notification__title"
             }, {
               children: title
-            })), supportingText && (0, _jsxRuntime.jsx)("span", __assign({
+            })), !supportTextLink && supportingText && (0, _jsxRuntime.jsx)("span", __assign({
               className: "ncua-full-width-notification__supporting-text"
             }, {
               children: supportingText
+            })), supportTextLink && supportingText && (0, _jsxRuntime.jsx)("a", __assign({
+              href: supportTextLink,
+              className: "ncua-full-width-notification__link"
+            }, {
+              children: (0, _jsxRuntime.jsx)("span", __assign({
+                className: "ncua-full-width-notification__supporting-text"
+              }, {
+                children: supportingText
+              }))
             }))]
           }))]
         })), (0, _jsxRuntime.jsxs)("div", __assign({
@@ -95,11 +138,17 @@ var FullWidthNotification = exports.FullWidthNotification = /*#__PURE__*/(0, _re
             children: actions.map(function (action) {
               return (0, _jsxRuntime.jsx)("button", __assign({
                 onClick: action.onClick,
-                className: (0, _classnames.default)('ncua-notification__action-button', "ncua-notification__action-button--".concat(action.hierarchy || 'link'))
+                className: (0, _classnames.default)('ncua-notification__action-button', "ncua-notification__action-button--".concat(action.hierarchy || 'text'))
               }, {
                 children: action.label
               }), "".concat(action.label, "-").concat(action.hierarchy));
             })
+          })), onHidePermanently && (0, _jsxRuntime.jsx)("button", __assign({
+            type: "button",
+            className: (0, _classnames.default)('ncua-notification__action-button', 'ncua-notification__action-button--text', 'ncua-full-width-notification__link'),
+            onClick: onHidePermanently
+          }, {
+            children: "\uB2E4\uC2DC\uBCF4\uC9C0 \uC54A\uAE30"
           })), onClose && (0, _jsxRuntime.jsx)("button", __assign({
             type: "button",
             className: "ncua-full-width-notification__close-button",