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

package/dist/cjs/src/components/date-picker/RangeDatePicker.js

@@ -27,48 +27,57 @@ var RangeDatePicker = exports.RangeDatePicker = /*#__PURE__*/(0, _react.forwardR
     onDateValidation = _a.onDateValidation,
     _b = _a.size,
     size = _b === void 0 ? 'xs' : _b;
+  var getOverlapResult = (0, _react.useCallback)(function (type) {
+    if (type === 'start' && (0, _moment.default)(startDateOptions.currentDate).isAfter(endDateOptions.currentDate)) {
+      return {
+        newDate: endDateOptions.currentDate,
+        currentDate: startDateOptions.currentDate
+      };
+    }
+    if (type === 'end' && (0, _moment.default)(endDateOptions.currentDate).isBefore(startDateOptions.currentDate)) {
+      return {
+        newDate: startDateOptions.currentDate,
+        currentDate: endDateOptions.currentDate
+      };
+    }
+    return null;
+  }, [startDateOptions.currentDate, endDateOptions.currentDate]);
+  var getSettingNewDate = (0, _react.useCallback)(function (type, isOverPeriod, unit, period) {
+    if (type === 'start') {
+      if (isOverPeriod) {
+        return (0, _utils.getDateFormat)((0, _moment.default)(endDateOptions.currentDate).subtract(period, unit).toDate());
+      }
+      if ((0, _moment.default)(startDateOptions.currentDate).isAfter(endDateOptions.currentDate)) {
+        return endDateOptions.currentDate;
+      }
+    } else {
+      if (isOverPeriod) {
+        return (0, _utils.getDateFormat)((0, _moment.default)(startDateOptions.currentDate).add(period, unit).toDate());
+      }
+      if ((0, _moment.default)(endDateOptions.currentDate).isBefore(startDateOptions.currentDate)) {
+        return startDateOptions.currentDate;
+      }
+    }
+    return '';
+  }, [startDateOptions.currentDate, endDateOptions.currentDate]);
   var changeSettingDateAndAlert = (0, _react.useCallback)(function (type, isOverPeriod) {
     if (isOverPeriod === void 0) {
       isOverPeriod = false;
     }
     if (!(validationOption === null || validationOption === void 0 ? void 0 : validationOption.setting)) {
-      if (type === 'start' && (0, _moment.default)(startDateOptions.currentDate).isAfter(endDateOptions.currentDate)) {
-        onDateValidation === null || onDateValidation === void 0 ? void 0 : onDateValidation({
-          type: type,
-          errorType: 'overlap',
-          newDate: endDateOptions.currentDate,
-          currentDate: startDateOptions.currentDate
-        });
-        return;
-      }
-      if (type === 'end' && (0, _moment.default)(endDateOptions.currentDate).isBefore(startDateOptions.currentDate)) {
-        onDateValidation === null || onDateValidation === void 0 ? void 0 : onDateValidation({
+      var result = getOverlapResult(type);
+      if (result) {
+        onDateValidation === null || onDateValidation === void 0 ? void 0 : onDateValidation(__assign({
           type: type,
-          errorType: 'overlap',
-          newDate: startDateOptions.currentDate,
-          currentDate: endDateOptions.currentDate
-        });
-        return;
+          errorType: 'overlap'
+        }, result));
       }
       return;
     }
     var _a = validationOption.setting,
       unit = _a.unit,
       period = _a.period;
-    var newDate = '';
-    if (type === 'start') {
-      if (isOverPeriod) {
-        newDate = (0, _utils.getDateFormat)((0, _moment.default)(endDateOptions.currentDate).subtract(period, unit).toDate());
-      } else if ((0, _moment.default)(startDateOptions.currentDate).isAfter(endDateOptions.currentDate)) {
-        newDate = endDateOptions.currentDate;
-      }
-    } else {
-      if (isOverPeriod) {
-        newDate = (0, _utils.getDateFormat)((0, _moment.default)(startDateOptions.currentDate).add(period, unit).toDate());
-      } else if ((0, _moment.default)(endDateOptions.currentDate).isBefore(startDateOptions.currentDate)) {
-        newDate = startDateOptions.currentDate;
-      }
-    }
+    var newDate = getSettingNewDate(type, isOverPeriod, unit, period);
     if (newDate) {
       onDateValidation === null || onDateValidation === void 0 ? void 0 : onDateValidation({
         type: type,
@@ -77,7 +86,7 @@ var RangeDatePicker = exports.RangeDatePicker = /*#__PURE__*/(0, _react.forwardR
         currentDate: type === 'start' ? startDateOptions.currentDate : endDateOptions.currentDate
       });
     }
-  }, [startDateOptions, endDateOptions, validationOption, onDateValidation]);
+  }, [startDateOptions, endDateOptions, validationOption, onDateValidation, getOverlapResult, getSettingNewDate]);
   (0, _react.useEffect)(function () {
     var isOverDate = (0, _moment.default)(startDateOptions.currentDate).isAfter(endDateOptions.currentDate);
     if (isOverDate) {
@@ -91,15 +100,15 @@ var RangeDatePicker = exports.RangeDatePicker = /*#__PURE__*/(0, _react.forwardR
       unit = _a.unit,
       period = _a.period;
     var isValidPeriod = (0, _moment.default)(startDateOptions.currentDate).isSameOrAfter((0, _moment.default)(endDateOptions.currentDate).subtract(period, unit));
-    if (!isValidPeriod) {
-      changeSettingDateAndAlert('start', true);
-    } else {
+    if (isValidPeriod) {
       onDateValidation === null || onDateValidation === void 0 ? void 0 : onDateValidation({
         type: 'start',
         errorType: null,
         newDate: startDateOptions.currentDate,
         currentDate: startDateOptions.currentDate
       });
+    } else {
+      changeSettingDateAndAlert('start', true);
     }
   }, [startDateOptions.currentDate]);
   (0, _react.useEffect)(function () {
@@ -116,15 +125,15 @@ var RangeDatePicker = exports.RangeDatePicker = /*#__PURE__*/(0, _react.forwardR
       unit = _a.unit,
       period = _a.period;
     var isValidPeriod = (0, _moment.default)(endDateOptions.currentDate).isSameOrBefore((0, _moment.default)(startDateOptions.currentDate).add(period, unit));
-    if (!isValidPeriod) {
-      changeSettingDateAndAlert('end', true);
-    } else {
+    if (isValidPeriod) {
       onDateValidation === null || onDateValidation === void 0 ? void 0 : onDateValidation({
         type: 'end',
         errorType: null,
         newDate: endDateOptions.currentDate,
         currentDate: endDateOptions.currentDate
       });
+    } else {
+      changeSettingDateAndAlert('end', true);
     }
   }, [endDateOptions.currentDate]);
   return (0, _jsxRuntime.jsxs)("div", __assign({

package/dist/cjs/src/components/divider/Divider.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Divider = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {

package/dist/cjs/src/components/dot/Dot.js

@@ -30,7 +30,7 @@ var Dot = exports.Dot = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
   var _b = _a.color,
     color = _b === void 0 ? 'success' : _b,
     _c = _a.size,
-    size = _c === void 0 ? 'md' : _c,
+    size = _c === void 0 ? 'sm' : _c,
     className = _a.className,
     props = __rest(_a, ["color", "size", "className"]);
   return (0, _jsxRuntime.jsx)("span", __assign({

package/dist/cjs/src/components/dropdown/Dropdown.js

@@ -191,12 +191,13 @@ var Dropdown = function (_a) {
       children: [renderHeader(), (0, _jsxRuntime.jsx)("div", __assign({
         className: "ncua-dropdown__menu-items"
       }, {
-        children: groups.map(function (group, index) {
+        children: groups.map(function (group) {
+          var _a;
           return (0, _jsxRuntime.jsx)("div", __assign({
             className: "ncua-dropdown__group"
           }, {
             children: group.items.map(renderItem)
-          }), index);
+          }), (_a = group.items[0]) === null || _a === void 0 ? void 0 : _a.id);
         })
       }))]
     }))]

package/dist/cjs/src/components/featured-icon/FeaturedIcon.js

@@ -39,7 +39,7 @@ var FeaturedIcon = exports.FeaturedIcon = /*#__PURE__*/(0, _react.forwardRef)(fu
     _c = _a.color,
     color = _c === void 0 ? 'neutral' : _c,
     _d = _a.size,
-    size = _d === void 0 ? 'md' : _d,
+    size = _d === void 0 ? 'sm' : _d,
     className = _a.className,
     rest = __rest(_a, ["icon", "theme", "color", "size", "className"]);
   return (0, _jsxRuntime.jsxs)("div", __assign({

package/dist/cjs/src/components/file-input/FileInput.js

@@ -45,7 +45,7 @@ var FileInputErrorType;
   FileInputErrorType["EXCEED_MAX_FILE_SIZE"] = "EXCEED_MAX_FILE_SIZE";
   FileInputErrorType["EXCEED_MAX_FILE_COUNT"] = "EXCEED_MAX_FILE_COUNT";
 })(FileInputErrorType || (exports.FileInputErrorType = FileInputErrorType = {}));
-var FileInput = exports.FileInput = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
+var FileInput = exports.FileInput = /*#__PURE__*/(0, _react.forwardRef)(function (_a, _ref) {
   var _b = _a.size,
     size = _b === void 0 ? 'xs' : _b,
     accept = _a.accept,
@@ -176,12 +176,12 @@ var FileInput = exports.FileInput = /*#__PURE__*/(0, _react.forwardRef)(function
     return (0, _jsxRuntime.jsx)("ul", __assign({
       className: "ncua-file-input__hint-list"
     }, {
-      children: hintItems.map(function (hint, index) {
+      children: hintItems.map(function (hint) {
         return (0, _jsxRuntime.jsx)("li", __assign({
           className: "ncua-file-input__hint-item"
         }, {
           children: hint
-        }), index);
+        }), hint);
       })
     }));
   };

package/dist/cjs/src/components/image-file-input/ImageFileInput.js

@@ -73,6 +73,9 @@ var ImageFileInput = exports.ImageFileInput = /*#__PURE__*/(0, _react.forwardRef
     showFileInput = _h === void 0 ? true : _h,
     props = __rest(_a, ["size", "accept", "multiple", "maxFileSize", "maxFileCount", "value", "onChange", "onFileSelect", "onFail", "buttonLabel", "imagePreviewTooltipLabel", "disabled", "label", "hintItems", "validation", "destructive", "isRequired", "showHelpIcon", "hintText", "showFileTagList", "showHintText", "showFileInput"]);
   var fileInputRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return fileInputRef.current;
+  });
   var _j = (0, _react.useState)([]),
     internalFiles = _j[0],
     setInternalFiles = _j[1];
@@ -200,12 +203,12 @@ var ImageFileInput = exports.ImageFileInput = /*#__PURE__*/(0, _react.forwardRef
     return (0, _jsxRuntime.jsx)("ul", __assign({
       className: "ncua-file-input__hint-list"
     }, {
-      children: hintItems.map(function (hint, index) {
+      children: hintItems.map(function (hint) {
         return (0, _jsxRuntime.jsx)("li", __assign({
           className: "ncua-file-input__hint-item"
         }, {
           children: hint
-        }), index);
+        }), hint);
       })
     }));
   };

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

@@ -52,7 +52,8 @@ var InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)(function
     showHelpIcon = _a.showHelpIcon,
     maxLength = _a.maxLength,
     showTextCount = _a.showTextCount,
-    props = __rest(_a, ["size", "required", "label", "hintText", "disabled", "validation", "destructive", "leadingElement", "trailingElement", "showHelpIcon", "maxLength", "showTextCount"]);
+    className = _a.className,
+    props = __rest(_a, ["size", "required", "label", "hintText", "disabled", "validation", "destructive", "leadingElement", "trailingElement", "showHelpIcon", "maxLength", "showTextCount", "className"]);
   var inputRef = (0, _react.useRef)(null);
   var _c = (0, _react.useState)(0),
     textCount = _c[0],
@@ -182,7 +183,7 @@ var InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)(function
       'is-disabled': disabled,
       'ncua-input__trailing-button': (trailingElement === null || trailingElement === void 0 ? void 0 : trailingElement.type) === 'button',
       'ncua-input__leading-text-wrap': (leadingElement === null || leadingElement === void 0 ? void 0 : leadingElement.type) === 'text'
-    })
+    }, className)
   }, {
     children: [renderLabel(), (0, _jsxRuntime.jsxs)("div", __assign({
       className: "ncua-input__content-wrap"

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

@@ -42,7 +42,7 @@ var NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)(func
   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;
+    return value ? Number.parseFloat(value) : 0;
   }, []);
   var updateValue = (0, _react.useCallback)(function (newValue) {
     if (!inputRef.current) return;

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/pagination/NavButton.js

@@ -17,6 +17,8 @@ var __assign = void 0 && (void 0).__assign || function () {
   };
   return __assign.apply(this, arguments);
 };
+var ICON_SIZE_PC = 16;
+var ICON_SIZE_MOBILE = 20;
 var NAV_BUTTON_CONFIG = {
   first: {
     label: '처음',
@@ -67,7 +69,7 @@ var NavButton = function (_a) {
     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',

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

@@ -73,75 +73,73 @@ var Pagination = function (_a) {
       setStart(lastGroupStart);
     }
   }, [currentPage]);
-  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: (0, _jsxRuntime.jsxs)("div", __assign({
-      className: (0, _classnames.default)('ncua-pagination', "ncua-pagination--".concat(breakPoint), className)
+  return (0, _jsxRuntime.jsxs)("div", __assign({
+    className: (0, _classnames.default)('ncua-pagination', "ncua-pagination--".concat(breakPoint), className)
+  }, {
+    children: [showJumpPageButton && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [(0, _NavButton.NavButton)({
+        type: 'first',
+        breakPoint: breakPoint,
+        noPrev: noPrev,
+        noNext: noNext,
+        onClick: function () {
+          return handleClickButton(1);
+        }
+      }), (0, _NavButton.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));
+        }
+      })]
+    }), (0, _jsxRuntime.jsx)("ul", __assign({
+      className: "ncua-pagination__list"
     }, {
-      children: [showJumpPageButton && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [(0, _NavButton.NavButton)({
-          type: 'first',
-          breakPoint: breakPoint,
-          noPrev: noPrev,
-          noNext: noNext,
-          onClick: function () {
-            return handleClickButton(1);
-          }
-        }), (0, _NavButton.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));
-          }
-        })]
-      }), (0, _jsxRuntime.jsx)("ul", __assign({
-        className: "ncua-pagination__list"
-      }, {
-        children: (0, _lodashEs.range)(start, Math.min(totalPage + 1, start + pageCount)).map(function (pageNumber, i) {
-          return (0, _jsxRuntime.jsx)("li", __assign({
-            className: "ncua-pagination__item"
-          }, {
-            children: (0, _jsxRuntime.jsx)("button", __assign({
-              className: (0, _classnames.default)('ncua-pagination__page-num', {
-                'is-current': pageNumber === currentPage
-              }),
-              onClick: function () {
-                return handleClickButton(start + i);
-              }
-            }, restProps, {
-              children: start + i
-            }))
-          }), (0, _lodashEs.uniqueId)('ncua-pagination__page-num'));
-        })
-      })), (0, _jsxRuntime.jsxs)("p", __assign({
-        className: "ncua-pagination__page-info"
-      }, {
-        children: [(0, _jsxRuntime.jsx)("em", __assign({
-          className: "ncua-pagination__current-num"
+      children: (0, _lodashEs.range)(start, Math.min(totalPage + 1, start + pageCount)).map(function (pageNumber, i) {
+        return (0, _jsxRuntime.jsx)("li", __assign({
+          className: "ncua-pagination__item"
         }, {
-          children: currentPage
-        })), " / ", totalPage]
-      })), showJumpPageButton && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [(0, _NavButton.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));
-          }
-        }), (0, _NavButton.NavButton)({
-          type: 'last',
-          breakPoint: breakPoint,
-          noPrev: noPrev,
-          noNext: noNext,
-          onClick: function () {
-            return handleClickButton(totalPage);
-          }
-        })]
+          children: (0, _jsxRuntime.jsx)("button", __assign({
+            className: (0, _classnames.default)('ncua-pagination__page-num', {
+              'is-current': pageNumber === currentPage
+            }),
+            onClick: function () {
+              return handleClickButton(start + i);
+            }
+          }, restProps, {
+            children: start + i
+          }))
+        }), (0, _lodashEs.uniqueId)('ncua-pagination__page-num'));
+      })
+    })), (0, _jsxRuntime.jsxs)("p", __assign({
+      className: "ncua-pagination__page-info"
+    }, {
+      children: [(0, _jsxRuntime.jsx)("em", __assign({
+        className: "ncua-pagination__current-num"
+      }, {
+        children: currentPage
+      })), " / ", totalPage]
+    })), showJumpPageButton && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [(0, _NavButton.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));
+        }
+      }), (0, _NavButton.NavButton)({
+        type: 'last',
+        breakPoint: breakPoint,
+        noPrev: noPrev,
+        noNext: noNext,
+        onClick: function () {
+          return handleClickButton(totalPage);
+        }
       })]
-    }))
-  });
+    })]
+  }));
 };
 exports.Pagination = Pagination;

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

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ProgressBar = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _useProgressBar = require("./hooks/useProgressBar");
 var _SegmentBar = require("./components/SegmentBar");
 var _SegmentLabels = require("./components/SegmentLabels");
+var _useProgressBar = require("./hooks/useProgressBar");
 var _utils = require("./utils");
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
@@ -37,11 +37,15 @@ var ProgressBar = function (_a) {
     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;
   // segments가 1개일 때는 기존 value 방식과 동일하게 처리
   if (hasSegments && segmentCount === 1) {
     var singleSegment = processedSegments[0];
     return (0, _jsxRuntime.jsxs)("div", __assign({
-      className: "ncua-progress-bar ncua-progress-bar-".concat(effectiveLabel || ''),
+      className: containerClassName,
       style: progressValueStyle
     }, {
       children: [isFloatingLabel && (0, _jsxRuntime.jsx)(_SegmentLabels.SingleLabel, {
@@ -64,13 +68,13 @@ var ProgressBar = function (_a) {
             "aria-valuemin": 0,
             "aria-valuemax": 100
           })
-        })), effectiveLabel === 'right' && (0, _jsxRuntime.jsx)(_SegmentLabels.SingleLabel, {
+        })), isRightLabel && (0, _jsxRuntime.jsx)(_SegmentLabels.SingleLabel, {
           labelType: "right",
           displayValue: displayValue,
           totalValue: totalValue,
           showZeroLabel: showZeroLabel
         })]
-      })), effectiveLabel === 'bottom' && (0, _jsxRuntime.jsx)(_SegmentLabels.SingleLabel, {
+      })), isBottomLabel && (0, _jsxRuntime.jsx)(_SegmentLabels.SingleLabel, {
         labelType: "bottom",
         displayValue: displayValue,
         totalValue: totalValue,
@@ -79,7 +83,7 @@ var ProgressBar = function (_a) {
     }));
   }
   return (0, _jsxRuntime.jsxs)("div", __assign({
-    className: "ncua-progress-bar ncua-progress-bar-".concat(effectiveLabel || ''),
+    className: containerClassName,
     style: progressValueStyle
   }, {
     children: [isFloatingLabel && (0, _jsxRuntime.jsx)(_SegmentLabels.SingleLabel, {
@@ -105,22 +109,22 @@ var ProgressBar = function (_a) {
           "aria-valuemin": 0,
           "aria-valuemax": 100
         })
-      })), effectiveLabel === 'right' && (0, _jsxRuntime.jsx)(_SegmentLabels.SingleLabel, {
+      })), isRightLabel && (0, _jsxRuntime.jsx)(_SegmentLabels.SingleLabel, {
         labelType: "right",
         displayValue: displayValue,
         totalValue: totalValue,
         showZeroLabel: showZeroLabel
       })]
-    })), hasSegments && segmentCount >= 2 ? (0, _jsxRuntime.jsx)(_SegmentLabels.SegmentLabels, {
+    })), isMultiSegment && (0, _jsxRuntime.jsx)(_SegmentLabels.SegmentLabels, {
       segments: processedSegments,
       segmentCount: segmentCount,
       showZeroLabel: showZeroLabel
-    }) : effectiveLabel === 'bottom' ? (0, _jsxRuntime.jsx)(_SegmentLabels.SingleLabel, {
+    }), !isMultiSegment && isBottomLabel && (0, _jsxRuntime.jsx)(_SegmentLabels.SingleLabel, {
       labelType: "bottom",
       displayValue: displayValue,
       totalValue: totalValue,
       showZeroLabel: showZeroLabel
-    }) : null]
+    })]
   }));
 };
 exports.ProgressBar = ProgressBar;

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

@@ -18,7 +18,7 @@ var SegmentBar = function (_a) {
         style: {
           width: "".concat(segment.width, "%")
         }
-      }, index);
+      }, "".concat(segment.color, "-").concat(index));
     })
   });
 };

package/dist/cjs/src/components/progress-bar/components/SegmentLabels.js

@@ -48,7 +48,7 @@ var SegmentLabels = function (_a) {
           }
         }, {
           children: "".concat(segment.value.toFixed(0), "%")
-        }), index);
+        }), "".concat(segment.color, "-").concat(index));
       })
     }));
   }

package/dist/cjs/src/components/progress-bar/hooks/useProgressBar.js

@@ -16,6 +16,7 @@ var __assign = void 0 && (void 0).__assign || function () {
   };
   return __assign.apply(this, arguments);
 };
+var MAX_PERCENTAGE = 100;
 /**
  * segments를 처리하여 프로그레스 바에 표시할 데이터를 계산합니다.
  */
@@ -33,7 +34,7 @@ var processSegments = function (segments, segmentCount, valueToPercent) {
       // 각 segment를 합계 대비 비율로 변환 (합계를 100%로 규정)
       segmentsToProcess = segmentsToProcess.map(function (segment) {
         return {
-          value: segment.value / originalTotal_1 * 100,
+          value: segment.value / originalTotal_1 * MAX_PERCENTAGE,
           color: segment.color
         };
       });
@@ -50,7 +51,7 @@ var processSegments = function (segments, segmentCount, valueToPercent) {
   var actualTotal = limitedSegments.reduce(function (sum, seg) {
     return sum + seg.value;
   }, 0);
-  var total = Math.min(actualTotal, 100);
+  var total = Math.min(actualTotal, MAX_PERCENTAGE);
   // 모든 segments를 좌측에서부터 연속적으로 배치 (비율로 계산)
   var processed = limitedSegments.map(function (segment) {
     return __assign(__assign({}, segment), {

package/dist/cjs/src/components/progress-bar/utils.js

@@ -21,11 +21,12 @@ var getLabelColorClass = function (color) {
   var normalizedColor = color.toLowerCase().trim();
   return "ncua-progress-bar__label--color-".concat(normalizedColor);
 };
+exports.getLabelColorClass = getLabelColorClass;
+var MAX_PERCENTAGE = 100;
 /**
  * 값을 0-100 범위로 제한
  */
-exports.getLabelColorClass = getLabelColorClass;
 var clampValue = function (value) {
-  return Math.min(Math.max(0, value), 100);
+  return Math.min(Math.max(0, value), MAX_PERCENTAGE);
 };
 exports.clampValue = clampValue;