@ncds/ui-admin 0.0.34 → 0.0.35

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

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FloatingNotification = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _breakpoint = require("../../constant/breakpoint");
+var _useMediaQuery = require("../../hooks/useMediaQuery");
+var _button = require("../button");
+var _ButtonCloseX = require("../button/ButtonCloseX");
+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 FloatingNotification = exports.FloatingNotification = /*#__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,
+    rest = __rest(_a, ["title", "supportingText", "color", "onClose", "className", "actions"]);
+  var iconColor = color;
+  var featuredIconProps = {
+    name: iconNameMap[color],
+    size: 'sm',
+    color: iconColor,
+    theme: 'dark-circle'
+  };
+  var isMobile = (0, _useMediaQuery.useMediaQuery)(_breakpoint.MEDIA_QUERY.mobile, {
+    onMatched: onClose
+  });
+  return (0, _jsxRuntime.jsxs)("div", __assign({
+    ref: ref,
+    className: (0, _classnames.default)('ncua-floating-notification', "ncua-floating-notification--".concat(color), className),
+    role: "alert"
+  }, rest, {
+    children: [(0, _jsxRuntime.jsx)("div", __assign({
+      className: "ncua-floating-notification__content"
+    }, {
+      children: (0, _jsxRuntime.jsxs)("div", __assign({
+        className: "ncua-floating-notification__container"
+      }, {
+        children: [iconNameMap[color] && (0, _jsxRuntime.jsx)(_FeaturedIcon.FeaturedIcon, __assign({}, featuredIconProps, {
+          size: isMobile ? 'md' : 'sm'
+        })), (0, _jsxRuntime.jsxs)("div", __assign({
+          className: "ncua-floating-notification__text-container"
+        }, {
+          children: [(0, _jsxRuntime.jsx)("div", __assign({
+            className: "ncua-floating-notification__title-wrapper"
+          }, {
+            children: (0, _jsxRuntime.jsx)("span", __assign({
+              className: "ncua-floating-notification__title"
+            }, {
+              children: title
+            }))
+          })), supportingText && (0, _jsxRuntime.jsx)("span", __assign({
+            className: "ncua-floating-notification__supporting-text"
+          }, {
+            children: supportingText
+          })), actions && (0, _jsxRuntime.jsx)("div", __assign({
+            className: "ncua-floating-notification__actions"
+          }, {
+            children: actions.map(function (action) {
+              return (0, _jsxRuntime.jsx)(_button.Button, {
+                size: "xs",
+                hierarchy: action.hierarchy || 'link',
+                label: action.label,
+                onClick: action === null || action === void 0 ? void 0 : action.onClick
+              }, "".concat(action.label, "-").concat(action.hierarchy));
+            })
+          }))]
+        }))]
+      }))
+    })), onClose && (0, _jsxRuntime.jsx)(_ButtonCloseX.ButtonCloseX, {
+      theme: "light",
+      className: "ncua-floating-notification__close-button",
+      size: isMobile ? 'sm' : 'xs',
+      onClick: onClose
+    })]
+  }));
+});

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

@@ -0,0 +1,119 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FullWidthNotification = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
+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 iconNameMap = {
+  neutral: 'message-chat-square',
+  error: 'alert-triangle',
+  warning: 'alert-triangle',
+  success: 'check-circle'
+};
+var iconColorMap = {
+  neutral: 'gray700',
+  error: 'red500',
+  warning: 'orange500',
+  success: 'green600'
+};
+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,
+    rest = __rest(_a, ["title", "supportingText", "color", "onClose", "className", "actions"]);
+  var closeIconSize = {
+    width: 20,
+    height: 20
+  };
+  return (0, _jsxRuntime.jsx)("div", __assign({
+    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: [(0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+            name: iconNameMap[color],
+            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"
+            }, {
+              children: title
+            })), supportingText && (0, _jsxRuntime.jsx)("span", __assign({
+              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 || 'link'))
+              }, {
+                children: action.label
+              }), "".concat(action.label, "-").concat(action.hierarchy));
+            })
+          })), onClose && (0, _jsxRuntime.jsx)("button", __assign({
+            type: "button",
+            className: "ncua-full-width-notification__close-button",
+            onClick: onClose,
+            "aria-label": "\uC54C\uB9BC \uB2EB\uAE30"
+          }, {
+            children: (0, _jsxRuntime.jsx)(_uiAdminIcon.default, __assign({
+              name: "x-close"
+            }, closeIconSize, {
+              color: _color.COLOR[iconColorMap[color]]
+            }))
+          }))]
+        }))]
+      }))
+    }))
+  }));
+});

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

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Notification = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _FloatingNotification = require("./FloatingNotification");
+var _FullWidthNotification = require("./FullWidthNotification");
+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"]);
+  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
+  }));
+});
+Notification.displayName = 'Notification';

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

@@ -0,0 +1,38 @@
+"use strict";
+
+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;
+  if (key in exports && exports[key] === _FloatingNotification[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _FloatingNotification[key];
+    }
+  });
+});
+var _FullWidthNotification = require("./FullWidthNotification");
+Object.keys(_FullWidthNotification).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _FullWidthNotification[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _FullWidthNotification[key];
+    }
+  });
+});

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

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NavButton = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _Button = require("../button/Button");
+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 NAV_BUTTON_CONFIG = {
+  first: {
+    label: '처음',
+    className: 'ncua-pagination__first',
+    getIcon: function (isPC) {
+      return 'chevron-left-double';
+    }
+  },
+  prev: {
+    label: '이전',
+    className: 'ncua-pagination__before',
+    getIcon: function (isPC) {
+      return isPC ? 'chevron-left' : 'arrow-left';
+    }
+  },
+  next: {
+    label: '다음',
+    className: 'ncua-pagination__next',
+    getIcon: function (isPC) {
+      return isPC ? 'chevron-right' : 'arrow-right';
+    }
+  },
+  last: {
+    label: '마지막',
+    className: 'ncua-pagination__last',
+    getIcon: function (isPC) {
+      return 'chevron-right-double';
+    }
+  }
+};
+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';
+  var isFirstOrPrev = type === 'first' || type === 'prev';
+  var isNextOrLast = type === 'next' || type === 'last';
+  var disabled = isFirstOrPrev ? noPrev : isNextOrLast ? noNext : false;
+  var isPC = breakPoint === 'pc';
+  // key를 제외한 공통 props
+  var buttonProps = {
+    label: config.label,
+    className: config.className,
+    onlyIcon: true,
+    leadingIcon: {
+      type: 'icon',
+      icon: config.getIcon(isPC),
+      color: disabled ? 'gray200' : 'gray700',
+      size: isPC ? 16 : 20
+    },
+    hierarchy: 'secondary-gray',
+    size: isPC ? 'xs' : 'sm',
+    disabled: disabled,
+    onClick: onClick
+  };
+  // 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);
+};
+exports.NavButton = NavButton;

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

@@ -0,0 +1,161 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Pagination = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _lodashEs = require("lodash-es");
+var _react = require("react");
+var _NavButton = require("./NavButton");
+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 Pagination = function (_a) {
+  var _b = _a.className,
+    className = _b === void 0 ? '' : _b,
+    totalCount = _a.totalCount,
+    _c = _a.itemCountPerPage,
+    itemCountPerPage = _c === void 0 ? 10 : _c,
+    _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,
+    onPageChange = _a.onPageChange,
+    restProps = __rest(_a, ["className", "totalCount", "itemCountPerPage", "pageCount", "currentPage", "as", "breakPoint", "onPageChange"]);
+  var totalPage = Math.ceil(totalCount / itemCountPerPage);
+  var _g = (0, _react.useState)(1),
+    start = _g[0],
+    setStart = _g[1];
+  var noPrev = start === 1;
+  var noNext = start + pageCount - 1 >= totalPage;
+  var showJumpPageButton = totalPage > pageCount;
+  var handleClickButton = function (pageNum) {
+    if ((0, _lodashEs.isFunction)(onPageChange)) {
+      onPageChange(pageNum);
+    }
+  };
+  (0, _react.useEffect)(function () {
+    if (currentPage === start + pageCount) {
+      setStart(start + pageCount);
+    }
+    if (currentPage > start + pageCount) {
+      var newStart = Math.floor((currentPage - 1) / pageCount) * pageCount + 1;
+      setStart(newStart);
+    }
+    if (currentPage < start) {
+      setStart(start - pageCount);
+    }
+    if (currentPage === 1) {
+      setStart(1);
+    }
+    if (currentPage === totalPage) {
+      var lastGroupStart = Math.max(1, totalPage - pageCount + 1);
+      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)
+    }, {
+      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));
+          }
+        })]
+      }), (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: currentPage
+        })), " / ", totalPage]
+      })), 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);
+          }
+        })]
+      })]
+    }))
+  });
+};
+exports.Pagination = Pagination;

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

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _NavButton = require("./NavButton");
+Object.keys(_NavButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _NavButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _NavButton[key];
+    }
+  });
+});
+var _Pagination = require("./Pagination");
+Object.keys(_Pagination).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Pagination[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Pagination[key];
+    }
+  });
+});

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

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProgressBar = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+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 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)
+    }, {
+      children: displayValue
+    }));
+  };
+  var isFloatingLabel = label === 'top-float' || label === 'bottom-float';
+  return (0, _jsxRuntime.jsxs)("div", __assign({
+    className: "ncua-progress-bar ncua-progress-bar-".concat(label),
+    style: progressValueStyle
+  }, {
+    children: [isFloatingLabel && renderLabel(label), (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",
+          style: {
+            width: "".concat(limitedValue, "%")
+          },
+          "aria-valuenow": limitedValue,
+          "aria-valuemin": 0,
+          "aria-valuemax": 100
+        })
+      })), label === 'right' && renderLabel('right')]
+    })), label === 'bottom' && renderLabel('bottom')]
+  }));
+};
+exports.ProgressBar = ProgressBar;

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ProgressBar = require("./ProgressBar");
+Object.keys(_ProgressBar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ProgressBar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ProgressBar[key];
+    }
+  });
+});