@ncds/ui-admin 1.6.4 → 1.8.0

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

@@ -1,21 +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';
@@ -23,107 +5,97 @@ 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'
 };
-export var MessageNotification = /*#__PURE__*/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 = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    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({
+  const closeIconColor = COLOR[iconColorMap[validColor] || 'gray700'];
+  return _jsx("div", {
     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: 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", __assign({
-            className: "ncua-message-notification__text-container"
-          }, {
-            children: [_jsx("span", __assign({
-              className: "ncua-message-notification__title"
-            }, {
+          }), _jsxs("div", {
+            className: "ncua-message-notification__text-container",
+            children: [_jsx("span", {
+              className: "ncua-message-notification__title",
               children: title
-            })), supportingText && _jsx("span", __assign({
-              className: "ncua-message-notification__supporting-text"
-            }, {
+            }), supportingText && _jsx("span", {
+              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({
+            })]
+          })]
+        }), _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
-          }, {
+            onClick: onHidePermanently,
             children: "\uB2E4\uC2DC \uBCF4\uC9C0 \uC54A\uAE30"
-          })), onClose && _jsx("button", __assign({
+          }), onClose && _jsx("button", {
             type: "button",
             className: "ncua-message-notification__close-button",
             onClick: onClose,
-            "aria-label": "\uC54C\uB9BC \uB2EB\uAE30"
-          }, {
+            "aria-label": "\uC54C\uB9BC \uB2EB\uAE30",
             children: _jsx(XClose, {
               width: 20,
               height: 20,
               color: closeIconColor
             })
-          }))]
-        }))]
-      }))
-    }))
-  }));
+          })]
+        })]
+      })
+    })
+  });
 });
-MessageNotification.displayName = 'MessageNotification';
+MessageNotification.displayName = 'MessageNotification';
+export { MessageNotification };

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

@@ -1,53 +1,36 @@
-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';
-export var Notification = /*#__PURE__*/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 = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    type = 'floating',
+    color = 'neutral',
+    ...rest
+  } = _ref;
   if (type === 'floating') {
-    return _jsx(FloatingNotification, __assign({
-      color: color
-    }, rest, {
+    return _jsx(FloatingNotification, {
+      color: color,
+      ...rest,
       ref: ref
-    }));
+    });
   }
   if (type === 'full-width') {
-    return _jsx(FullWidthNotification, __assign({
-      color: color
-    }, rest, {
+    return _jsx(FullWidthNotification, {
+      color: color,
+      ...rest,
       ref: ref
-    }));
+    });
   }
   if (type === 'message') {
-    return _jsx(MessageNotification, __assign({
-      color: color
-    }, rest, {
+    return _jsx(MessageNotification, {
+      color: color,
+      ...rest,
       ref: ref
-    }));
+    });
   }
   return null;
 });
-Notification.displayName = 'Notification';
+Notification.displayName = 'Notification';
+export { Notification };

package/dist/esm/src/components/notification/index.js

@@ -1,4 +1,4 @@
-export * from './Notification';
 export * from './FloatingNotification';
 export * from './FullWidthNotification';
-export * from './MessageNotification';
+export * from './MessageNotification';
+export * from './Notification';

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

@@ -0,0 +1,106 @@
+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 = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    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/esm/src/components/number-input/index.js

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

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

@@ -1,75 +1,63 @@
-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 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 = _ref => {
+  let {
+    type,
+    breakPoint,
+    noPrev,
+    noNext,
+    onClick
+  } = _ref;
+  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,
     leadingIcon: {
       type: 'icon',
       icon: config.getIcon(isPC),
-      size: isPC ? 16 : 20,
+      size: isPC ? ICON_SIZE_PC : ICON_SIZE_MOBILE,
       color: disabled ? 'gray200' : 'gray700'
     },
     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);
 };