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

package/dist/cjs/src/components/progress-circle/ProgressCircle.js

@@ -15,13 +15,14 @@ var __assign = void 0 && (void 0).__assign || function () {
   };
   return __assign.apply(this, arguments);
 };
+var MAX_PERCENTAGE = 100;
 var ProgressCircle = function (_a) {
   var size = _a.size,
     label = _a.label,
     value = _a.value,
     _b = _a.theme,
     theme = _b === void 0 ? 'circle' : _b;
-  var limitedValue = Math.min(Math.max(0, value), 100);
+  var limitedValue = Math.min(Math.max(0, value), MAX_PERCENTAGE);
   if (theme === 'circle') {
     return (0, _jsxRuntime.jsxs)("div", __assign({
       className: "ncua-progress-circle ncua-progress-circle-".concat(size, " ncua-progress-circle-").concat(theme)
@@ -71,51 +72,50 @@ var ProgressCircle = function (_a) {
         children: label
       }))]
     }));
-  } else {
-    return (0, _jsxRuntime.jsxs)("div", __assign({
-      className: "ncua-progress-circle ncua-progress-circle-".concat(size, " ncua-progress-circle-").concat(theme)
+  }
+  return (0, _jsxRuntime.jsxs)("div", __assign({
+    className: "ncua-progress-circle ncua-progress-circle-".concat(size, " ncua-progress-circle-").concat(theme)
+  }, {
+    children: [(0, _jsxRuntime.jsxs)("div", __assign({
+      className: "ncua-progress-circle__content"
     }, {
-      children: [(0, _jsxRuntime.jsxs)("div", __assign({
-        className: "ncua-progress-circle__content"
+      children: [(0, _jsxRuntime.jsxs)("svg", __assign({
+        className: "ncua-progress-circle__svg",
+        viewBox: "0 0 100 50"
       }, {
-        children: [(0, _jsxRuntime.jsxs)("svg", __assign({
-          className: "ncua-progress-circle__svg",
-          viewBox: "0 0 100 50"
+        children: [(0, _jsxRuntime.jsx)("path", {
+          className: "ncua-progress-circle__background",
+          d: "M 5 50 A 45 45 0 0 1 95 50",
+          strokeWidth: "10",
+          fill: "none",
+          strokeLinecap: "round"
+        }), (0, _jsxRuntime.jsx)("path", {
+          className: "ncua-progress-circle__progress",
+          d: "M 5 50 A 45 45 0 0 1 95 50",
+          strokeWidth: "10",
+          fill: "none",
+          strokeDasharray: "var(--half-circle-circumference)",
+          strokeDashoffset: "calc(var(--half-circle-circumference) * (1 - ".concat(limitedValue, " / 100))"),
+          strokeLinecap: "round"
+        })]
+      })), (0, _jsxRuntime.jsxs)("div", __assign({
+        className: "ncua-progress-circle__label-container"
+      }, {
+        children: [size !== 'xxs' && label && (0, _jsxRuntime.jsx)("div", __assign({
+          className: "ncua-progress-circle__label-text"
         }, {
-          children: [(0, _jsxRuntime.jsx)("path", {
-            className: "ncua-progress-circle__background",
-            d: "M 5 50 A 45 45 0 0 1 95 50",
-            strokeWidth: "10",
-            fill: "none",
-            strokeLinecap: "round"
-          }), (0, _jsxRuntime.jsx)("path", {
-            className: "ncua-progress-circle__progress",
-            d: "M 5 50 A 45 45 0 0 1 95 50",
-            strokeWidth: "10",
-            fill: "none",
-            strokeDasharray: "var(--half-circle-circumference)",
-            strokeDashoffset: "calc(var(--half-circle-circumference) * (1 - ".concat(limitedValue, " / 100))"),
-            strokeLinecap: "round"
-          })]
-        })), (0, _jsxRuntime.jsxs)("div", __assign({
-          className: "ncua-progress-circle__label-container"
+          children: label
+        })), (0, _jsxRuntime.jsx)("div", __assign({
+          className: "ncua-progress-circle__label"
         }, {
-          children: [size !== 'xxs' && label && (0, _jsxRuntime.jsx)("div", __assign({
-            className: "ncua-progress-circle__label-text"
-          }, {
-            children: label
-          })), (0, _jsxRuntime.jsx)("div", __assign({
-            className: "ncua-progress-circle__label"
-          }, {
-            children: "".concat(limitedValue, "%")
-          }))]
+          children: "".concat(limitedValue, "%")
         }))]
-      })), size === 'xxs' && label && (0, _jsxRuntime.jsx)("div", __assign({
-        className: "ncua-progress-circle__outside-label"
-      }, {
-        children: label
       }))]
-    }));
-  }
+    })), size === 'xxs' && label && (0, _jsxRuntime.jsx)("div", __assign({
+      className: "ncua-progress-circle__outside-label"
+    }, {
+      children: label
+    }))]
+  }));
 };
 exports.ProgressCircle = ProgressCircle;

package/dist/cjs/src/components/select/Select.js

@@ -69,12 +69,12 @@ var Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)(function (_a,
           disabled: disabledPlaceholder
         }, {
           children: placeholder
-        })), optionItems && optionItems.map(function (item, index) {
+        })), optionItems === null || optionItems === void 0 ? void 0 : optionItems.map(function (item) {
           return (0, _jsxRuntime.jsx)("option", __assign({
             value: item.id
           }, {
             children: item.label
-          }), "option-".concat(index));
+          }), item.id);
         }), children]
       }))
     })), hintText && (0, _jsxRuntime.jsx)(_HintText.HintText, __assign({

package/dist/cjs/src/components/selectbox/SelectBox.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.SelectBox = exports.DEFAULT_MAX_HEIGHT = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
-var _color = require("../../../constant/color");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
+var _color = require("../../../constant/color");
 var _dropdown = require("../../hooks/dropdown");
 var _multiSelect = require("../../utils/dropdown/multiSelect");
 var _selectDropdown = require("../select-dropdown");
@@ -42,7 +42,56 @@ var __spreadArray = void 0 && (void 0).__spreadArray || function (to, from, pack
   }
   return to.concat(ar || Array.prototype.slice.call(from));
 };
+var ICON_SIZE_XS = 14;
+var ICON_SIZE_SM = 16;
 var DEFAULT_MAX_HEIGHT = exports.DEFAULT_MAX_HEIGHT = 275;
+function computeNewValue(option, value, multiple) {
+  if (multiple) {
+    var currentValues = Array.isArray(value) ? value : [];
+    if (currentValues.includes(option.id)) {
+      return currentValues.filter(function (v) {
+        return v !== option.id;
+      });
+    }
+    return __spreadArray(__spreadArray([], currentValues, true), [option.id], false);
+  }
+  return option.id;
+}
+function notifyRegister(register, newValue, multiple) {
+  if (!(register === null || register === void 0 ? void 0 : register.onChange)) return;
+  register.onChange({
+    target: {
+      value: multiple ? JSON.stringify(newValue) : newValue,
+      name: register.name
+    }
+  });
+}
+function DisplayValue(_a) {
+  var displayValue = _a.displayValue;
+  if (typeof displayValue === 'string') {
+    return (0, _jsxRuntime.jsx)("span", __assign({
+      className: "ncua-selectbox__value-text"
+    }, {
+      children: displayValue
+    }));
+  }
+  return (0, _jsxRuntime.jsxs)("div", __assign({
+    className: "ncua-selectbox__value-container"
+  }, {
+    children: [displayValue.icon && (0, _jsxRuntime.jsx)("span", __assign({
+      className: "ncua-selectbox__value-icon"
+    }, {
+      children: (0, _jsxRuntime.jsx)(displayValue.icon, {
+        width: 16,
+        height: 16
+      })
+    })), (0, _jsxRuntime.jsx)("span", __assign({
+      className: "ncua-selectbox__value-text"
+    }, {
+      children: displayValue.label
+    }))]
+  }));
+}
 var SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
   var _b = _a.placeholder,
     placeholder = _b === void 0 ? '선택하세요' : _b,
@@ -94,29 +143,9 @@ var SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)(function
   }, [multiple, selectedOption, placeholder]);
   var handleOptionSelect = function (option) {
     if (disabled) return;
-    var newValue;
-    if (multiple) {
-      var currentValues = Array.isArray(value) ? value : [];
-      if (currentValues.includes(option.id)) {
-        newValue = currentValues.filter(function (v) {
-          return v !== option.id;
-        });
-      } else {
-        newValue = __spreadArray(__spreadArray([], currentValues, true), [option.id], false);
-      }
-    } else {
-      newValue = option.id;
-    }
+    var newValue = computeNewValue(option, value, multiple);
     onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-    // react-hook-form 지원
-    if (register === null || register === void 0 ? void 0 : register.onChange) {
-      register.onChange({
-        target: {
-          value: multiple ? JSON.stringify(newValue) : newValue,
-          name: register.name
-        }
-      });
-    }
+    notifyRegister(register, newValue, multiple);
   };
   var _p = (0, _dropdown.useDropdown)({
       triggerRef: internalRef,
@@ -223,29 +252,12 @@ var SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)(function
           children: [(0, _jsxRuntime.jsx)("div", __assign({
             className: "ncua-selectbox__value"
           }, {
-            children: typeof displayValue === 'string' ? (0, _jsxRuntime.jsx)("span", __assign({
-              className: "ncua-selectbox__value-text"
-            }, {
-              children: displayValue
-            })) : (0, _jsxRuntime.jsxs)("div", __assign({
-              className: "ncua-selectbox__value-container"
-            }, {
-              children: [displayValue.icon && (0, _jsxRuntime.jsx)("span", __assign({
-                className: "ncua-selectbox__value-icon"
-              }, {
-                children: (0, _jsxRuntime.jsx)(displayValue.icon, {
-                  width: 16,
-                  height: 16
-                })
-              })), (0, _jsxRuntime.jsx)("span", __assign({
-                className: "ncua-selectbox__value-text"
-              }, {
-                children: displayValue.label
-              }))]
-            }))
+            children: (0, _jsxRuntime.jsx)(DisplayValue, {
+              displayValue: displayValue
+            })
           })), (0, _jsxRuntime.jsx)(_uiAdminIcon.ChevronDown, {
-            width: size === 'xs' ? 14 : 16,
-            height: size === 'xs' ? 14 : 16,
+            width: size === 'xs' ? ICON_SIZE_XS : ICON_SIZE_SM,
+            height: size === 'xs' ? ICON_SIZE_XS : ICON_SIZE_SM,
             color: disabled ? _color.COLOR.gray300 : _color.COLOR.gray500,
             className: (0, _classnames.default)('ncua-selectbox__arrow', {
               'ncua-selectbox__arrow--up': isOpen

package/dist/cjs/src/components/spinner/Spinner.js

@@ -31,7 +31,7 @@ var Spinner = function (_a) {
   var _b = _a.as,
     as = _b === void 0 ? 'p' : _b,
     _c = _a.size,
-    size = _c === void 0 ? 'md' : _c,
+    size = _c === void 0 ? 'sm' : _c,
     children = _a.children,
     _d = _a.backdrop,
     backdrop = _d === void 0 ? false : _d;
@@ -43,10 +43,11 @@ var Spinner = function (_a) {
     children: (0, _jsxRuntime.jsx)("div", __assign({
       className: "ncua-spinner__content"
     }, {
-      children: children && (0, _jsxRuntime.jsx)(RenderText, {
-        as: as,
+      children: children && (0, _jsxRuntime.jsx)(RenderText, __assign({
+        as: as
+      }, {
         children: children
-      })
+      }))
     }))
   }));
 };

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

@@ -13,15 +13,4 @@ Object.keys(_Spinner).forEach(function (key) {
       return _Spinner[key];
     }
   });
-});
-var _index = require("./index");
-Object.keys(_index).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _index[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _index[key];
-    }
-  });
 });

package/dist/cjs/src/components/switch/Switch.js

@@ -19,19 +19,24 @@ var __assign = void 0 && (void 0).__assign || function () {
   return __assign.apply(this, arguments);
 };
 var Switch = exports.Switch = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
-  var _b = _a.size,
-    size = _b === void 0 ? 'xs' : _b,
+  var _b;
+  var _c = _a.size,
+    size = _c === void 0 ? 'xs' : _c,
     left = _a.left,
     right = _a.right,
-    _c = _a.disabled,
-    disabled = _c === void 0 ? false : _c,
+    _d = _a.disabled,
+    disabled = _d === void 0 ? false : _d,
     value = _a.value,
-    _d = _a.defaultValue,
-    defaultValue = _d === void 0 ? left.value : _d,
+    _e = _a.defaultValue,
+    defaultValue = _e === void 0 ? left.value : _e,
     onChange = _a.onChange,
     className = _a.className,
     name = _a.name,
     refs = _a.refs;
+  var leftInputRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return leftInputRef.current;
+  });
   // 값을 문자열로 정규화하는 함수
   var normalizeValue = function (val) {
     return typeof val === 'boolean' ? String(val) : val;
@@ -51,9 +56,9 @@ var Switch = exports.Switch = /*#__PURE__*/(0, _react.forwardRef)(function (_a,
     return normalizeValue(value);
   };
   var isControlled = getCurrentValue() !== undefined;
-  var _e = (0, _react.useState)(normalizeValue(defaultValue)),
-    internalValue = _e[0],
-    setInternalValue = _e[1];
+  var _f = (0, _react.useState)(normalizeValue(defaultValue)),
+    internalValue = _f[0],
+    setInternalValue = _f[1];
   var currentValue = isControlled ? getCurrentValue() : internalValue;
   var handleChange = function (newValue) {
     if (!isControlled) {
@@ -81,7 +86,7 @@ var Switch = exports.Switch = /*#__PURE__*/(0, _react.forwardRef)(function (_a,
     }, {
       children: [(0, _jsxRuntime.jsx)("input", {
         type: "radio",
-        ref: refs === null || refs === void 0 ? void 0 : refs[0],
+        ref: (_b = refs === null || refs === void 0 ? void 0 : refs[0]) !== null && _b !== void 0 ? _b : leftInputRef,
         name: name,
         value: normalizeValue(left.value),
         checked: currentValue === normalizeValue(left.value),

package/dist/cjs/src/components/tab/HorizontalTab.js

@@ -20,6 +20,8 @@ var __assign = void 0 && (void 0).__assign || function () {
   };
   return __assign.apply(this, arguments);
 };
+var UNDERLINE_GAP = 16;
+var DEFAULT_GAP = 8;
 var HorizontalTab = function (_a) {
   var _b = _a.type,
     type = _b === void 0 ? 'button-primary' : _b,
@@ -29,19 +31,20 @@ var HorizontalTab = function (_a) {
     _d = _a.fullWidth,
     fullWidth = _d === void 0 ? false : _d,
     _e = _a.menus,
-    menus = _e === void 0 ? [] : _e;
+    menus = _e === void 0 ? [] : _e,
+    className = _a.className;
   var getTabGap = function (type) {
     var _a;
     var gap = {
-      underline: 16
+      underline: UNDERLINE_GAP
     };
-    return (_a = gap[type]) !== null && _a !== void 0 ? _a : 8;
+    return (_a = gap[type]) !== null && _a !== void 0 ? _a : DEFAULT_GAP;
   };
-  if (!menus.length) return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+  if (!menus.length) return null;
   return (0, _jsxRuntime.jsx)("div", __assign({
     className: (0, _classnames.default)('ncua-horizontal-tab', "ncua-horizontal-tab--".concat(type), "ncua-horizontal-tab--".concat(size), {
       'ncua-horizontal-tab--fullWidth': fullWidth
-    })
+    }, className)
   }, {
     children: (0, _jsxRuntime.jsx)(_react.Swiper, __assign({
       slidesPerView: "auto",

package/dist/cjs/src/components/tab/TabButton.js

@@ -48,7 +48,7 @@ var TabButton = function (_a) {
       href = _d.href,
       _e = _d.target,
       target = _e === void 0 ? '_self' : _e,
-      onClick_1 = _d.onClick,
+      _onClick = _d.onClick,
       anchorProps = __rest(_d, ["href", "target", "onClick"]);
     return (0, _jsxRuntime.jsxs)("a", __assign({
       className: componentClassName,

package/dist/cjs/src/components/toggle/Toggle.js

@@ -27,7 +27,7 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
 };
 var Toggle = function (_a) {
   var _b = _a.size,
-    size = _b === void 0 ? 'md' : _b,
+    size = _b === void 0 ? 'sm' : _b,
     _c = _a.text,
     text = _c === void 0 ? '' : _c,
     _d = _a.supportText,
@@ -54,21 +54,19 @@ var Toggle = function (_a) {
       children: (0, _jsxRuntime.jsx)("span", {
         className: "ncua-toggle__slider"
       })
-    })), text && (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-      children: (0, _jsxRuntime.jsxs)("span", __assign({
-        className: "ncua-toggle__text-wrapper"
+    })), text && (0, _jsxRuntime.jsxs)("span", __assign({
+      className: "ncua-toggle__text-wrapper"
+    }, {
+      children: [(0, _jsxRuntime.jsx)("span", __assign({
+        className: "ncua-toggle__text"
+      }, {
+        children: text
+      })), supportText && (0, _jsxRuntime.jsx)("span", __assign({
+        className: "ncua-toggle__support-text"
       }, {
-        children: [(0, _jsxRuntime.jsx)("span", __assign({
-          className: "ncua-toggle__text"
-        }, {
-          children: text
-        })), supportText && (0, _jsxRuntime.jsx)("span", __assign({
-          className: "ncua-toggle__support-text"
-        }, {
-          children: supportText
-        }))]
-      }))
-    })]
+        children: supportText
+      }))]
+    }))]
   }));
 };
 exports.Toggle = Toggle;

package/dist/cjs/src/components/tooltip/Tooltip.js

@@ -20,10 +20,30 @@ var __assign = void 0 && (void 0).__assign || function () {
   };
   return __assign.apply(this, arguments);
 };
+var ICON_SIZE_SM = 14;
+var ICON_SIZE_DEFAULT = 16;
 var MARGIN = 10;
 var DEFAULT_TOOLTIP_WIDTH = 200;
 var DEFAULT_TOOLTIP_HEIGHT = 60;
 var POSITION_PRIORITY = ['bottom', 'top', 'right', 'left'];
+// 수직 위치(top/bottom)일 때 수평 정렬 보정
+var resolveVerticalAlignment = function (position, triggerRect, tooltipWidth, viewportWidth) {
+  var centerX = triggerRect.left + triggerRect.width / 2;
+  var tooltipHalfWidth = tooltipWidth / 2;
+  if (centerX - tooltipHalfWidth < MARGIN) {
+    return "".concat(position, "-left");
+  }
+  if (centerX + tooltipHalfWidth > viewportWidth - MARGIN) {
+    return "".concat(position, "-right");
+  }
+  return position;
+};
+// 해당 위치에 툴팁을 배치할 충분한 공간이 있는지 확인
+var hasEnoughSpace = function (position, spaces, tooltipWidth, tooltipHeight) {
+  var isVertical = position === 'bottom' || position === 'top';
+  var requiredSpace = isVertical ? tooltipHeight : tooltipWidth;
+  return spaces[position] >= requiredSpace + MARGIN;
+};
 // 위치 계산 position='auto' 일 때 사용
 var calculateOptimalPosition = function (triggerElement, tooltipElement, preferredPosition) {
   if (preferredPosition === void 0) {
@@ -43,19 +63,14 @@ var calculateOptimalPosition = function (triggerElement, tooltipElement, preferr
   var tooltipHeight = tooltipRect.height || DEFAULT_TOOLTIP_HEIGHT;
   for (var _i = 0, POSITION_PRIORITY_1 = POSITION_PRIORITY; _i < POSITION_PRIORITY_1.length; _i++) {
     var position = POSITION_PRIORITY_1[_i];
-    var hasSpace = position === 'bottom' || position === 'top' ? spaces[position] >= tooltipHeight + MARGIN : spaces[position] >= tooltipWidth + MARGIN;
-    if (hasSpace) {
-      if (position === 'bottom' || position === 'top') {
-        var centerX = triggerRect.left + triggerRect.width / 2;
-        var tooltipHalfWidth = tooltipWidth / 2;
-        if (centerX - tooltipHalfWidth < MARGIN) {
-          return "".concat(position, "-left");
-        } else if (centerX + tooltipHalfWidth > viewportWidth - MARGIN) {
-          return "".concat(position, "-right");
-        }
-      }
-      return position;
+    if (!hasEnoughSpace(position, spaces, tooltipWidth, tooltipHeight)) {
+      continue;
+    }
+    var isVertical = position === 'bottom' || position === 'top';
+    if (isVertical) {
+      return resolveVerticalAlignment(position, triggerRect, tooltipWidth, viewportWidth);
     }
+    return position;
   }
   return preferredPosition;
 };
@@ -79,7 +94,7 @@ var Tooltip = function (_a) {
     _j = _a.iconStyle,
     iconStyle = _j === void 0 ? 'help-circle' : _j,
     className = _a.className;
-  var iconSize = size === 'sm' ? 14 : 16;
+  var iconSize = size === 'sm' ? ICON_SIZE_SM : ICON_SIZE_DEFAULT;
   var tooltipRef = (0, _react.useRef)(null);
   var tooltipBgRef = (0, _react.useRef)(null);
   var _k = (0, _react.useState)(position === 'auto' ? 'bottom' : position),

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

@@ -3,25 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _size = require("./size");
-Object.keys(_size).forEach(function (key) {
+var _datePicker = require("./date-picker");
+Object.keys(_datePicker).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _size[key]) return;
+  if (key in exports && exports[key] === _datePicker[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _size[key];
+      return _datePicker[key];
     }
   });
 });
-var _datePicker = require("./date-picker");
-Object.keys(_datePicker).forEach(function (key) {
+var _size = require("./size");
+Object.keys(_size).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _datePicker[key]) return;
+  if (key in exports && exports[key] === _size[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _datePicker[key];
+      return _size[key];
     }
   });
 });