@ncds/ui-admin 1.3.0 → 1.5.0

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

@@ -0,0 +1,137 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MessageNotification = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _dynamic = _interopRequireDefault(require("@ncds/ui-admin-icon/dynamic"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+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 iconNameMap = {
+  neutral: 'pin-02',
+  error: 'alert-triangle',
+  warning: 'alert-circle',
+  success: 'check-circle'
+};
+var 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"]);
+  // message 타입은 neutral, error, warning, success 4가지 색상만 지원
+  var validColor = color === 'info' ? 'neutral' : color;
+  var iconColor = validColor;
+  var featuredIconProps = {
+    name: icon || iconNameMap[validColor] || 'pin-02',
+    size: 'lg',
+    color: iconColor,
+    theme: 'light-circle'
+  };
+  var closeIconColor = _color.COLOR[iconColorMap[validColor] || 'gray700'];
+  return (0, _jsxRuntime.jsx)("div", __assign({
+    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: [iconNameMap[validColor] && (0, _jsxRuntime.jsx)(_FeaturedIcon.FeaturedIcon, __assign({}, 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"
+            }, {
+              children: title
+            })), supportingText && (0, _jsxRuntime.jsx)("span", __assign({
+              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({
+            type: "button",
+            className: (0, _classnames.default)('ncua-notification__action-button', 'ncua-notification__action-button--text', 'ncua-message-notification__hide-link'),
+            onClick: onHidePermanently
+          }, {
+            children: "\uB2E4\uC2DC \uBCF4\uC9C0 \uC54A\uAE30"
+          })), onClose && (0, _jsxRuntime.jsx)("button", __assign({
+            type: "button",
+            className: "ncua-message-notification__close-button",
+            onClick: onClose,
+            "aria-label": "\uC54C\uB9BC \uB2EB\uAE30"
+          }, {
+            children: (0, _jsxRuntime.jsx)(_dynamic.default, {
+              name: "x-close",
+              width: 20,
+              height: 20,
+              color: closeIconColor
+            })
+          }))]
+        }))]
+      }))
+    }))
+  }));
+});
+MessageNotification.displayName = 'MessageNotification';

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

@@ -8,6 +8,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 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++) {
@@ -32,14 +33,27 @@ var Notification = exports.Notification = /*#__PURE__*/(0, _react.forwardRef)(fu
     _c = _a.color,
     color = _c === void 0 ? 'neutral' : _c,
     rest = __rest(_a, ["type", "color"]);
-  return type === 'floating' ? (0, _jsxRuntime.jsx)(_FloatingNotification.FloatingNotification, __assign({
-    color: color
-  }, rest, {
-    ref: ref
-  })) : (0, _jsxRuntime.jsx)(_FullWidthNotification.FullWidthNotification, __assign({
-    color: color
-  }, rest, {
-    ref: ref
-  }));
+  if (type === 'floating') {
+    return (0, _jsxRuntime.jsx)(_FloatingNotification.FloatingNotification, __assign({
+      color: color
+    }, rest, {
+      ref: ref
+    }));
+  }
+  if (type === 'full-width') {
+    return (0, _jsxRuntime.jsx)(_FullWidthNotification.FullWidthNotification, __assign({
+      color: color
+    }, rest, {
+      ref: ref
+    }));
+  }
+  if (type === 'message') {
+    return (0, _jsxRuntime.jsx)(_MessageNotification.MessageNotification, __assign({
+      color: color
+    }, rest, {
+      ref: ref
+    }));
+  }
+  return null;
 });
 Notification.displayName = 'Notification';

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

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

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

@@ -48,12 +48,9 @@ var NAV_BUTTON_CONFIG = {
 };
 var NavButton = function (_a) {
   var type = _a.type,
-    as = _a.as,
     breakPoint = _a.breakPoint,
     noPrev = _a.noPrev,
     noNext = _a.noNext,
-    href = _a.href,
-    target = _a.target,
     onClick = _a.onClick;
   var config = NAV_BUTTON_CONFIG[type];
   var isNavigationButton = type === 'first' || type === 'prev' || type === 'next' || type === 'last';
@@ -79,15 +76,6 @@ var NavButton = function (_a) {
   };
   // key 값 별도 계산
   var buttonKey = isNavigationButton ? "".concat(breakPoint, "-").concat(type) : undefined;
-  if (as === 'a') {
-    return (0, _jsxRuntime.jsx)(_Button.Button, __assign({
-      as: "a",
-      href: href,
-      target: target
-    }, buttonProps), buttonKey);
-  }
-  return (0, _jsxRuntime.jsx)(_Button.Button, __assign({
-    as: "button"
-  }, buttonProps), buttonKey);
+  return (0, _jsxRuntime.jsx)(_Button.Button, __assign({}, buttonProps), buttonKey);
 };
 exports.NavButton = NavButton;

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

@@ -38,16 +38,14 @@ var Pagination = function (_a) {
     _d = _a.pageCount,
     pageCount = _d === void 0 ? 10 : _d,
     currentPage = _a.currentPage,
-    _e = _a.as,
-    as = _e === void 0 ? 'button' : _e,
-    _f = _a.breakPoint,
-    breakPoint = _f === void 0 ? 'pc' : _f,
+    _e = _a.breakPoint,
+    breakPoint = _e === void 0 ? 'pc' : _e,
     onPageChange = _a.onPageChange,
-    restProps = __rest(_a, ["className", "totalCount", "itemCountPerPage", "pageCount", "currentPage", "as", "breakPoint", "onPageChange"]);
+    restProps = __rest(_a, ["className", "totalCount", "itemCountPerPage", "pageCount", "currentPage", "breakPoint", "onPageChange"]);
   var totalPage = Math.ceil(totalCount / itemCountPerPage);
-  var _g = (0, _react.useState)(1),
-    start = _g[0],
-    setStart = _g[1];
+  var _f = (0, _react.useState)(1),
+    start = _f[0],
+    setStart = _f[1];
   var noPrev = start === 1;
   var noNext = start + pageCount - 1 >= totalPage;
   var showJumpPageButton = totalPage > pageCount;
@@ -82,23 +80,17 @@ var Pagination = function (_a) {
       children: [showJumpPageButton && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [(0, _NavButton.NavButton)({
           type: 'first',
-          as: as,
           breakPoint: breakPoint,
           noPrev: noPrev,
           noNext: noNext,
-          href: restProps.href || '',
-          target: restProps.target || '',
           onClick: function () {
             return handleClickButton(1);
           }
         }), (0, _NavButton.NavButton)({
           type: 'prev',
-          as: as,
           breakPoint: breakPoint,
           noPrev: noPrev,
           noNext: noNext,
-          href: restProps.href || '',
-          target: restProps.target || '',
           onClick: function () {
             return handleClickButton(Math.max(start - pageCount, 1));
           }
@@ -133,23 +125,17 @@ var Pagination = function (_a) {
       })), showJumpPageButton && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [(0, _NavButton.NavButton)({
           type: 'next',
-          as: as,
           breakPoint: breakPoint,
           noPrev: noPrev,
           noNext: noNext,
-          href: restProps.href || '',
-          target: restProps.target || '',
           onClick: function () {
             return handleClickButton(Math.min(start + pageCount, totalPage));
           }
         }), (0, _NavButton.NavButton)({
           type: 'last',
-          as: as,
           breakPoint: breakPoint,
           noPrev: noPrev,
           noNext: noNext,
-          href: restProps.href || '',
-          target: restProps.target || '',
           onClick: function () {
             return handleClickButton(totalPage);
           }

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

@@ -5,6 +5,10 @@ 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 _utils = require("./utils");
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -17,41 +21,106 @@ var __assign = void 0 && (void 0).__assign || function () {
 };
 var ProgressBar = function (_a) {
   var label = _a.label,
-    value = _a.value;
-  var limitedValue = Math.min(Math.max(0, value), 100);
-  var displayValue = "".concat(limitedValue.toFixed(0), "%");
-  var progressValueStyle = label === 'top-float' || label === 'bottom-float' ? {
-    '--progress-value': "".concat(limitedValue, "%")
-  } : undefined;
-  var renderLabel = function (labelType) {
-    return (0, _jsxRuntime.jsx)("span", __assign({
-      className: "ncua-progress-bar__label ncua-progress-bar__label-".concat(labelType)
+    value = _a.value,
+    segments = _a.segments,
+    _b = _a.showZeroLabel,
+    showZeroLabel = _b === void 0 ? false : _b,
+    _c = _a.valueToPercent,
+    valueToPercent = _c === void 0 ? true : _c;
+  var _d = (0, _useProgressBar.useProgressBar)(label, value, segments, valueToPercent),
+    totalValue = _d.totalValue,
+    displayValue = _d.displayValue,
+    processedSegments = _d.processedSegments,
+    effectiveLabel = _d.effectiveLabel,
+    progressValueStyle = _d.progressValueStyle,
+    hasSegments = _d.hasSegments,
+    segmentCount = _d.segmentCount,
+    shouldSpaceOut = _d.shouldSpaceOut;
+  var isFloatingLabel = effectiveLabel === 'top-float' || effectiveLabel === 'bottom-float';
+  // 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 || ''),
+      style: progressValueStyle
     }, {
-      children: displayValue
+      children: [isFloatingLabel && (0, _jsxRuntime.jsx)(_SegmentLabels.SingleLabel, {
+        labelType: effectiveLabel,
+        displayValue: displayValue,
+        totalValue: totalValue,
+        showZeroLabel: showZeroLabel
+      }), (0, _jsxRuntime.jsxs)("div", __assign({
+        className: "ncua-progress-bar__content"
+      }, {
+        children: [(0, _jsxRuntime.jsx)("div", __assign({
+          className: "ncua-progress-bar__bar"
+        }, {
+          children: (0, _jsxRuntime.jsx)("div", {
+            className: "ncua-progress-bar__fill ".concat((0, _utils.getFillColorClass)(singleSegment.color)),
+            style: {
+              width: "".concat(totalValue, "%")
+            },
+            "aria-valuenow": totalValue,
+            "aria-valuemin": 0,
+            "aria-valuemax": 100
+          })
+        })), effectiveLabel === 'right' && (0, _jsxRuntime.jsx)(_SegmentLabels.SingleLabel, {
+          labelType: "right",
+          displayValue: displayValue,
+          totalValue: totalValue,
+          showZeroLabel: showZeroLabel
+        })]
+      })), effectiveLabel === 'bottom' && (0, _jsxRuntime.jsx)(_SegmentLabels.SingleLabel, {
+        labelType: "bottom",
+        displayValue: displayValue,
+        totalValue: totalValue,
+        showZeroLabel: showZeroLabel
+      })]
     }));
-  };
-  var isFloatingLabel = label === 'top-float' || label === 'bottom-float';
+  }
   return (0, _jsxRuntime.jsxs)("div", __assign({
-    className: "ncua-progress-bar ncua-progress-bar-".concat(label),
+    className: "ncua-progress-bar ncua-progress-bar-".concat(effectiveLabel || ''),
     style: progressValueStyle
   }, {
-    children: [isFloatingLabel && renderLabel(label), (0, _jsxRuntime.jsxs)("div", __assign({
+    children: [isFloatingLabel && (0, _jsxRuntime.jsx)(_SegmentLabels.SingleLabel, {
+      labelType: effectiveLabel,
+      displayValue: displayValue,
+      totalValue: totalValue,
+      showZeroLabel: showZeroLabel
+    }), (0, _jsxRuntime.jsxs)("div", __assign({
       className: "ncua-progress-bar__content"
     }, {
       children: [(0, _jsxRuntime.jsx)("div", __assign({
-        className: "ncua-progress-bar__bar"
+        className: "ncua-progress-bar__bar ".concat(hasSegments ? 'ncua-progress-bar__bar--segments' : '')
       }, {
-        children: (0, _jsxRuntime.jsx)("div", {
+        children: hasSegments ? (0, _jsxRuntime.jsx)(_SegmentBar.SegmentBar, {
+          segments: processedSegments,
+          shouldSpaceOut: shouldSpaceOut
+        }) : (0, _jsxRuntime.jsx)("div", {
           className: "ncua-progress-bar__fill",
           style: {
-            width: "".concat(limitedValue, "%")
+            width: "".concat(totalValue, "%")
           },
-          "aria-valuenow": limitedValue,
+          "aria-valuenow": totalValue,
           "aria-valuemin": 0,
           "aria-valuemax": 100
         })
-      })), label === 'right' && renderLabel('right')]
-    })), label === 'bottom' && renderLabel('bottom')]
+      })), effectiveLabel === 'right' && (0, _jsxRuntime.jsx)(_SegmentLabels.SingleLabel, {
+        labelType: "right",
+        displayValue: displayValue,
+        totalValue: totalValue,
+        showZeroLabel: showZeroLabel
+      })]
+    })), hasSegments && segmentCount >= 2 ? (0, _jsxRuntime.jsx)(_SegmentLabels.SegmentLabels, {
+      segments: processedSegments,
+      segmentCount: segmentCount,
+      showZeroLabel: showZeroLabel
+    }) : effectiveLabel === 'bottom' ? (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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SegmentBar = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _utils = require("../utils");
+var SegmentBar = function (_a) {
+  var segments = _a.segments,
+    shouldSpaceOut = _a.shouldSpaceOut;
+  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: segments.map(function (segment, index) {
+      var isFirst = index === 0;
+      var isLast = index === segments.length - 1;
+      return (0, _jsxRuntime.jsx)("div", {
+        className: "ncua-progress-bar__fill ".concat(isFirst ? 'ncua-progress-bar__fill--first' : '', " ").concat(isLast ? 'ncua-progress-bar__fill--last' : '', " ").concat(shouldSpaceOut && isLast ? 'ncua-progress-bar__fill--spaced' : '', " ").concat((0, _utils.getFillColorClass)(segment.color)),
+        style: {
+          width: "".concat(segment.width, "%")
+        }
+      }, index);
+    })
+  });
+};
+exports.SegmentBar = SegmentBar;

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

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SingleLabel = exports.SegmentLabels = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _utils = require("../utils");
+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 SegmentLabels = function (_a) {
+  var segments = _a.segments,
+    segmentCount = _a.segmentCount,
+    _b = _a.showZeroLabel,
+    showZeroLabel = _b === void 0 ? false : _b;
+  if (segmentCount >= 2) {
+    return (0, _jsxRuntime.jsx)("div", __assign({
+      className: "ncua-progress-bar__labels--multiple"
+    }, {
+      children: segments.map(function (segment, index) {
+        // 0%이고 showZeroLabel이 false면 라벨 표시하지 않음
+        if (segment.value === 0 && !showZeroLabel) {
+          return null;
+        }
+        var leftPosition = 0;
+        for (var i = 0; i < index; i++) {
+          leftPosition += segments[i].width;
+        }
+        // 0%일 때는 segment 시작 위치에 맞추되, 라벨이 게이지 바를 넘어가지 않도록 조정
+        // 그 외에는 중앙에 정렬
+        var isZero = segment.value === 0;
+        // 0%일 때는 약간의 오프셋을 주어 자연스럽게 보이도록 함 (라벨 너비의 절반 정도)
+        var labelPosition = isZero ? Math.max(0, leftPosition - 1) : leftPosition + segment.width / 2;
+        var transform = isZero ? 'translateX(0)' : 'translateX(-50%)';
+        return (0, _jsxRuntime.jsx)("span", __assign({
+          className: "ncua-progress-bar__label ncua-progress-bar__label--segment ".concat((0, _utils.getLabelColorClass)(segment.color)),
+          style: {
+            left: "".concat(labelPosition, "%"),
+            transform: transform
+          }
+        }, {
+          children: "".concat(segment.value.toFixed(0), "%")
+        }), index);
+      })
+    }));
+  }
+  return null;
+};
+exports.SegmentLabels = SegmentLabels;
+var SingleLabel = function (_a) {
+  var labelType = _a.labelType,
+    displayValue = _a.displayValue,
+    totalValue = _a.totalValue,
+    _b = _a.showZeroLabel,
+    showZeroLabel = _b === void 0 ? false : _b;
+  // 0%이고 showZeroLabel이 false면 라벨 표시하지 않음
+  if (totalValue === 0 && !showZeroLabel) {
+    return null;
+  }
+  return (0, _jsxRuntime.jsx)("span", __assign({
+    className: "ncua-progress-bar__label ncua-progress-bar__label-".concat(labelType)
+  }, {
+    children: displayValue
+  }));
+};
+exports.SingleLabel = SingleLabel;

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

@@ -0,0 +1,119 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useProgressBar = void 0;
+var _react = require("react");
+var _utils = require("../utils");
+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);
+};
+/**
+ * segments를 처리하여 프로그레스 바에 표시할 데이터를 계산합니다.
+ */
+var processSegments = function (segments, segmentCount, valueToPercent) {
+  // segment가 2개 이상일 때만 valueToPercent 적용 (기본값: true)
+  var shouldApplyValueToPercent = segmentCount >= 2 && valueToPercent !== false;
+  var segmentsToProcess = segments;
+  // valueToPercent 적용: segments의 합계를 100%로 규정하고 비율로 계산
+  if (shouldApplyValueToPercent) {
+    // 원본 값들의 합계 계산
+    var originalTotal_1 = segmentsToProcess.reduce(function (sum, seg) {
+      return sum + Number(seg.value);
+    }, 0);
+    if (originalTotal_1 > 0) {
+      // 각 segment를 합계 대비 비율로 변환 (합계를 100%로 규정)
+      segmentsToProcess = segmentsToProcess.map(function (segment) {
+        return {
+          value: segment.value / originalTotal_1 * 100,
+          color: segment.color
+        };
+      });
+    }
+  }
+  // 각 값 제한 (0-100 범위)
+  var limitedSegments = segmentsToProcess.map(function (segment) {
+    return {
+      value: (0, _utils.clampValue)(segment.value),
+      color: segment.color
+    };
+  });
+  // 전체 합계 계산
+  var actualTotal = limitedSegments.reduce(function (sum, seg) {
+    return sum + seg.value;
+  }, 0);
+  var total = Math.min(actualTotal, 100);
+  // 모든 segments를 좌측에서부터 연속적으로 배치 (비율로 계산)
+  var processed = limitedSegments.map(function (segment) {
+    return __assign(__assign({}, segment), {
+      width: actualTotal > 0 ? segment.value / actualTotal * total : 0
+    });
+  });
+  return {
+    totalValue: total,
+    displayValue: "".concat(total.toFixed(0), "%"),
+    processedSegments: processed,
+    shouldSpaceOut: false // 항상 왼쪽에 붙도록 통일
+  };
+};
+var useProgressBar = function (label, value, segments, valueToPercent) {
+  var _a;
+  var hasSegments = Boolean(segments && segments.length > 0);
+  var segmentCount = (_a = segments === null || segments === void 0 ? void 0 : segments.length) !== null && _a !== void 0 ? _a : 0;
+  var _b = (0, _react.useMemo)(function () {
+      // segments가 있을 때는 각 값을 제한하고 전체 합계를 계산
+      // value는 무시되며, 각 segment의 값을 value로 처리
+      if (hasSegments) {
+        return processSegments(segments, segmentCount, valueToPercent);
+      }
+      // value만 있을 때는 valueToPercent 무시 (이미 퍼센트로 간주)
+      if (value !== undefined) {
+        var clamped = (0, _utils.clampValue)(value);
+        return {
+          totalValue: clamped,
+          displayValue: "".concat(clamped.toFixed(0), "%"),
+          processedSegments: [],
+          shouldSpaceOut: false
+        };
+      }
+      return {
+        totalValue: 0,
+        displayValue: '0%',
+        processedSegments: [],
+        shouldSpaceOut: false
+      };
+    }, [hasSegments, segments, segmentCount, value, valueToPercent]),
+    totalValue = _b.totalValue,
+    displayValue = _b.displayValue,
+    processedSegments = _b.processedSegments,
+    shouldSpaceOut = _b.shouldSpaceOut;
+  // segment의 개수가 2이상일때는 bottom 라벨로 고정
+  var effectiveLabel = segmentCount >= 2 ? 'bottom' : label;
+  var progressValueStyle = (0, _react.useMemo)(function () {
+    if (effectiveLabel === 'top-float' || effectiveLabel === 'bottom-float') {
+      return {
+        '--progress-value': "".concat(totalValue, "%")
+      };
+    }
+    return undefined;
+  }, [effectiveLabel, totalValue]);
+  return {
+    totalValue: totalValue,
+    displayValue: displayValue,
+    processedSegments: processedSegments,
+    effectiveLabel: effectiveLabel,
+    progressValueStyle: progressValueStyle,
+    hasSegments: hasSegments,
+    segmentCount: segmentCount,
+    shouldSpaceOut: shouldSpaceOut
+  };
+};
+exports.useProgressBar = useProgressBar;

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

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