@ncds/ui-admin 1.6.4 → 1.8.0

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

@@ -10,64 +10,44 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _color = require("../../../constant/color");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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 iconMap = {
+const iconMap = {
   neutral: _uiAdminIcon.MessageChatSquare,
   error: _uiAdminIcon.AlertTriangle,
   warning: _uiAdminIcon.AlertTriangle,
   success: _uiAdminIcon.CheckCircle,
   info: _uiAdminIcon.InfoCircle
 };
-var iconColorMap = {
+const iconColorMap = {
   neutral: 'gray700',
   error: 'red500',
   warning: 'orange500',
   success: 'green600',
   info: 'violet600'
 };
-var FullWidthNotification = exports.FullWidthNotification = /*#__PURE__*/(0, _react.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 = (0, _react.useState)(false),
-    shouldRemove = _d[0],
-    setShouldRemove = _d[1];
-  var closeIconSize = {
+const FullWidthNotification = exports.FullWidthNotification = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    title,
+    supportingText,
+    color = 'neutral',
+    onClose,
+    className,
+    actions,
+    autoClose = 0,
+    supportTextLink,
+    onHidePermanently,
+    ...rest
+  } = _ref;
+  const [shouldRemove, setShouldRemove] = (0, _react.useState)(false);
+  const closeIconSize = {
     width: 20,
     height: 20
   };
   // autoClose 타이머 관리
-  var timerRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(function () {
+  const timerRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
     // autoClose가 0보다 크면 무조건 타이머 설정
     if (autoClose > 0) {
-      timerRef.current = setTimeout(function () {
+      timerRef.current = setTimeout(() => {
         if (onClose) {
           onClose();
         }
@@ -76,7 +56,7 @@ var FullWidthNotification = exports.FullWidthNotification = /*#__PURE__*/(0, _re
       }, autoClose);
     }
     // cleanup 함수: 컴포넌트 언마운트 시 타이머 정리
-    return function () {
+    return () => {
       if (timerRef.current) {
         clearTimeout(timerRef.current);
         timerRef.current = null;
@@ -87,82 +67,68 @@ var FullWidthNotification = exports.FullWidthNotification = /*#__PURE__*/(0, _re
   if (shouldRemove) {
     return null;
   }
-  return (0, _jsxRuntime.jsx)("div", __assign({
+  return (0, _jsxRuntime.jsx)("div", {
     ref: ref,
-    className: (0, _classnames.default)('ncua-full-width-notification', "ncua-full-width-notification--".concat(color), className),
-    role: "alert"
-  }, rest, {
-    children: (0, _jsxRuntime.jsx)("div", __assign({
-      className: "ncua-full-width-notification__container"
-    }, {
-      children: (0, _jsxRuntime.jsxs)("div", __assign({
-        className: "ncua-full-width-notification__content"
-      }, {
-        children: [(0, _jsxRuntime.jsxs)("div", __assign({
-          className: "ncua-full-width-notification__content-wrapper"
-        }, {
-          children: [function () {
-            var IconComponent = iconMap[color];
+    className: (0, _classnames.default)('ncua-full-width-notification', `ncua-full-width-notification--${color}`, className),
+    role: "alert",
+    ...rest,
+    children: (0, _jsxRuntime.jsx)("div", {
+      className: "ncua-full-width-notification__container",
+      children: (0, _jsxRuntime.jsxs)("div", {
+        className: "ncua-full-width-notification__content",
+        children: [(0, _jsxRuntime.jsxs)("div", {
+          className: "ncua-full-width-notification__content-wrapper",
+          children: [(() => {
+            const IconComponent = iconMap[color];
             return (0, _jsxRuntime.jsx)(IconComponent, {
               width: 16,
               height: 16,
               color: _color.COLOR[iconColorMap[color]],
               className: "ncua-full-width-notification__icon"
             });
-          }(), (0, _jsxRuntime.jsxs)("div", __assign({
-            className: "ncua-full-width-notification__text-container"
-          }, {
-            children: [(0, _jsxRuntime.jsx)("span", __assign({
-              className: "ncua-full-width-notification__title"
-            }, {
+          })(), (0, _jsxRuntime.jsxs)("div", {
+            className: "ncua-full-width-notification__text-container",
+            children: [(0, _jsxRuntime.jsx)("span", {
+              className: "ncua-full-width-notification__title",
               children: title
-            })), !supportTextLink && supportingText && (0, _jsxRuntime.jsx)("span", __assign({
-              className: "ncua-full-width-notification__supporting-text"
-            }, {
+            }), !supportTextLink && supportingText && (0, _jsxRuntime.jsx)("span", {
+              className: "ncua-full-width-notification__supporting-text",
               children: supportingText
-            })), supportTextLink && supportingText && (0, _jsxRuntime.jsx)("a", __assign({
+            }), supportTextLink && supportingText && (0, _jsxRuntime.jsx)("a", {
               href: supportTextLink,
-              className: "ncua-full-width-notification__link"
-            }, {
-              children: (0, _jsxRuntime.jsx)("span", __assign({
-                className: "ncua-full-width-notification__supporting-text"
-              }, {
+              className: "ncua-full-width-notification__link",
+              children: (0, _jsxRuntime.jsx)("span", {
+                className: "ncua-full-width-notification__supporting-text",
                 children: supportingText
-              }))
-            }))]
-          }))]
-        })), (0, _jsxRuntime.jsxs)("div", __assign({
-          className: "ncua-full-width-notification__actions-container"
-        }, {
-          children: [actions && (0, _jsxRuntime.jsx)("div", __assign({
-            className: "ncua-full-width-notification__actions"
-          }, {
-            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 || 'text'))
-              }, {
-                children: action.label
-              }), "".concat(action.label, "-").concat(action.hierarchy));
-            })
-          })), onHidePermanently && (0, _jsxRuntime.jsx)("button", __assign({
+              })
+            })]
+          })]
+        }), (0, _jsxRuntime.jsxs)("div", {
+          className: "ncua-full-width-notification__actions-container",
+          children: [actions && (0, _jsxRuntime.jsx)("div", {
+            className: "ncua-full-width-notification__actions",
+            children: actions.map(action => (0, _jsxRuntime.jsx)("button", {
+              onClick: action.onClick,
+              className: (0, _classnames.default)('ncua-notification__action-button', `ncua-notification__action-button--${action.hierarchy || 'text'}`),
+              children: action.label
+            }, `${action.label}-${action.hierarchy}`))
+          }), onHidePermanently && (0, _jsxRuntime.jsx)("button", {
             type: "button",
             className: (0, _classnames.default)('ncua-notification__action-button', 'ncua-notification__action-button--text', 'ncua-full-width-notification__link'),
-            onClick: onHidePermanently
-          }, {
+            onClick: onHidePermanently,
             children: "\uB2E4\uC2DC\uBCF4\uC9C0 \uC54A\uAE30"
-          })), onClose && (0, _jsxRuntime.jsx)("button", __assign({
+          }), onClose && (0, _jsxRuntime.jsx)("button", {
             type: "button",
             className: "ncua-full-width-notification__close-button",
             onClick: onClose,
-            "aria-label": "\uC54C\uB9BC \uB2EB\uAE30"
-          }, {
-            children: (0, _jsxRuntime.jsx)(_uiAdminIcon.XClose, __assign({}, closeIconSize, {
+            "aria-label": "\uC54C\uB9BC \uB2EB\uAE30",
+            children: (0, _jsxRuntime.jsx)(_uiAdminIcon.XClose, {
+              ...closeIconSize,
               color: _color.COLOR[iconColorMap[color]]
-            }))
-          }))]
-        }))]
-      }))
-    }))
-  }));
+            })
+          })]
+        })]
+      })
+    })
+  });
 });

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

@@ -12,125 +12,96 @@ var _color = require("../../../constant/color");
 var _button = require("../button");
 var _FeaturedIcon = require("../featured-icon/FeaturedIcon");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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 iconMap = {
+const iconMap = {
   neutral: _uiAdminIcon.Pin02,
   error: _uiAdminIcon.AlertTriangle,
   warning: _uiAdminIcon.AlertCircle,
   success: _uiAdminIcon.CheckCircle
 };
-var iconColorMap = {
+const iconColorMap = {
   neutral: 'gray700',
   error: 'red500',
   warning: 'orange500',
   success: 'green600'
 };
-var MessageNotification = exports.MessageNotification = /*#__PURE__*/(0, _react.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 = exports.MessageNotification = /*#__PURE__*/(0, _react.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] || _uiAdminIcon.Pin02,
     size: 'lg',
     color: iconColor,
     theme: 'light-circle'
   };
-  var closeIconColor = _color.COLOR[iconColorMap[validColor] || 'gray700'];
-  return (0, _jsxRuntime.jsx)("div", __assign({
+  const closeIconColor = _color.COLOR[iconColorMap[validColor] || 'gray700'];
+  return (0, _jsxRuntime.jsx)("div", {
     ref: ref,
-    className: (0, _classnames.default)('ncua-message-notification', "ncua-message-notification--".concat(validColor), className),
-    role: "alert"
-  }, rest, {
-    children: (0, _jsxRuntime.jsx)("div", __assign({
-      className: "ncua-message-notification__container"
-    }, {
-      children: (0, _jsxRuntime.jsxs)("div", __assign({
-        className: "ncua-message-notification__content"
-      }, {
-        children: [(0, _jsxRuntime.jsxs)("div", __assign({
-          className: "ncua-message-notification__content-wrapper"
-        }, {
-          children: [iconMap[validColor] && (0, _jsxRuntime.jsx)(_FeaturedIcon.FeaturedIcon, __assign({}, featuredIconProps, {
+    className: (0, _classnames.default)('ncua-message-notification', `ncua-message-notification--${validColor}`, className),
+    role: "alert",
+    ...rest,
+    children: (0, _jsxRuntime.jsx)("div", {
+      className: "ncua-message-notification__container",
+      children: (0, _jsxRuntime.jsxs)("div", {
+        className: "ncua-message-notification__content",
+        children: [(0, _jsxRuntime.jsxs)("div", {
+          className: "ncua-message-notification__content-wrapper",
+          children: [iconMap[validColor] && (0, _jsxRuntime.jsx)(_FeaturedIcon.FeaturedIcon, {
+            ...featuredIconProps,
             className: "ncua-message-notification__icon"
-          })), (0, _jsxRuntime.jsxs)("div", __assign({
-            className: "ncua-message-notification__text-container"
-          }, {
-            children: [(0, _jsxRuntime.jsx)("span", __assign({
-              className: "ncua-message-notification__title"
-            }, {
+          }), (0, _jsxRuntime.jsxs)("div", {
+            className: "ncua-message-notification__text-container",
+            children: [(0, _jsxRuntime.jsx)("span", {
+              className: "ncua-message-notification__title",
               children: title
-            })), supportingText && (0, _jsxRuntime.jsx)("span", __assign({
-              className: "ncua-message-notification__supporting-text"
-            }, {
+            }), supportingText && (0, _jsxRuntime.jsx)("span", {
+              className: "ncua-message-notification__supporting-text",
               children: supportingText
-            }))]
-          }))]
-        })), (0, _jsxRuntime.jsx)("div", __assign({
-          className: "ncua-message-notification__actions-container"
-        }, {
-          children: actions && (0, _jsxRuntime.jsx)("div", __assign({
-            className: "ncua-message-notification__actions"
-          }, {
-            children: actions.map(function (action) {
-              return (0, _jsxRuntime.jsx)(_button.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));
-            })
-          }))
-        })), (0, _jsxRuntime.jsxs)("div", __assign({
-          className: "ncua-message-notification__footer-container"
-        }, {
-          children: [onHidePermanently && (0, _jsxRuntime.jsx)("button", __assign({
+            })]
+          })]
+        }), (0, _jsxRuntime.jsx)("div", {
+          className: "ncua-message-notification__actions-container",
+          children: actions && (0, _jsxRuntime.jsx)("div", {
+            className: "ncua-message-notification__actions",
+            children: actions.map(action => (0, _jsxRuntime.jsx)(_button.Button, {
+              size: "xs",
+              hierarchy: action.hierarchy || 'text',
+              label: action.label,
+              onClick: action?.onClick
+            }, `${action.label}-${action.hierarchy}`))
+          })
+        }), (0, _jsxRuntime.jsxs)("div", {
+          className: "ncua-message-notification__footer-container",
+          children: [onHidePermanently && (0, _jsxRuntime.jsx)("button", {
             type: "button",
             className: (0, _classnames.default)('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 && (0, _jsxRuntime.jsx)("button", __assign({
+          }), onClose && (0, _jsxRuntime.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: (0, _jsxRuntime.jsx)(_uiAdminIcon.XClose, {
               width: 20,
               height: 20,
               color: closeIconColor
             })
-          }))]
-        }))]
-      }))
-    }))
-  }));
+          })]
+        })]
+      })
+    })
+  });
 });
 MessageNotification.displayName = 'MessageNotification';

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

@@ -9,50 +9,32 @@ var _react = require("react");
 var _FloatingNotification = require("./FloatingNotification");
 var _FullWidthNotification = require("./FullWidthNotification");
 var _MessageNotification = require("./MessageNotification");
-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 Notification = exports.Notification = /*#__PURE__*/(0, _react.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 = exports.Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    type = 'floating',
+    color = 'neutral',
+    ...rest
+  } = _ref;
   if (type === 'floating') {
-    return (0, _jsxRuntime.jsx)(_FloatingNotification.FloatingNotification, __assign({
-      color: color
-    }, rest, {
+    return (0, _jsxRuntime.jsx)(_FloatingNotification.FloatingNotification, {
+      color: color,
+      ...rest,
       ref: ref
-    }));
+    });
   }
   if (type === 'full-width') {
-    return (0, _jsxRuntime.jsx)(_FullWidthNotification.FullWidthNotification, __assign({
-      color: color
-    }, rest, {
+    return (0, _jsxRuntime.jsx)(_FullWidthNotification.FullWidthNotification, {
+      color: color,
+      ...rest,
       ref: ref
-    }));
+    });
   }
   if (type === 'message') {
-    return (0, _jsxRuntime.jsx)(_MessageNotification.MessageNotification, __assign({
-      color: color
-    }, rest, {
+    return (0, _jsxRuntime.jsx)(_MessageNotification.MessageNotification, {
+      color: color,
+      ...rest,
       ref: ref
-    }));
+    });
   }
   return null;
 });

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

@@ -3,17 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _Notification = require("./Notification");
-Object.keys(_Notification).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Notification[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Notification[key];
-    }
-  });
-});
 var _FloatingNotification = require("./FloatingNotification");
 Object.keys(_FloatingNotification).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -46,4 +35,15 @@ Object.keys(_MessageNotification).forEach(function (key) {
       return _MessageNotification[key];
     }
   });
+});
+var _Notification = require("./Notification");
+Object.keys(_Notification).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Notification[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Notification[key];
+    }
+  });
 });

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

@@ -0,0 +1,112 @@
+"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("../input-base/InputBase");
+const NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    size = 'xs',
+    minValue,
+    maxValue,
+    step = 1,
+    stepperPosition,
+    disabled,
+    ...props
+  } = _ref;
+  const inputRef = (0, _react.useRef)(null);
+  const mergedRef = (0, _hooks.useMergeRefs)([ref, inputRef]);
+  const getCurrentValue = (0, _react.useCallback)(() => {
+    const value = inputRef.current?.value;
+    return value ? Number.parseFloat(value) : 0;
+  }, []);
+  const updateValue = (0, _react.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 = (0, _react.useCallback)(() => {
+    const currentValue = getCurrentValue();
+    const newValue = currentValue + step;
+    if (maxValue === undefined || newValue <= maxValue) {
+      updateValue(newValue);
+    }
+  }, [getCurrentValue, step, maxValue, updateValue]);
+  const handleDecrement = (0, _react.useCallback)(() => {
+    const currentValue = getCurrentValue();
+    const newValue = currentValue - step;
+    if (minValue === undefined || newValue >= minValue) {
+      updateValue(newValue);
+    }
+  }, [getCurrentValue, step, minValue, updateValue]);
+  const handleKeyDown = (0, _react.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 (0, _jsxRuntime.jsxs)("div", {
+      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, {
+    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/cjs/src/components/number-input/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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];
+    }
+  });
+});