rsuite 6.0.0-canary-20250424 → 6.0.0-canary-20250620

package/cjs/Pagination/PaginationButton.js

@@ -9,8 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _Button = _interopRequireDefault(require("../Button"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
  * PaginationButton component for pagination navigation.
  * Renders a button that can be used in pagination contexts.

package/cjs/Panel/Panel.js

@@ -13,8 +13,7 @@ var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _PanelGroup = require("../PanelGroup");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
  * The `Panel` component is used to display content that can be collapsed.
  * @see https://rsuitejs.com/components/panel

package/cjs/Panel/PanelHeader.js

@@ -11,8 +11,7 @@ var _Heading = _interopRequireDefault(require("../Heading"));
 var _AccordionButton = _interopRequireDefault(require("./AccordionButton"));
 var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const PanelHeader = props => {
   const {
     as = _Heading.default,

package/cjs/PanelGroup/PanelGroup.js

@@ -9,8 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const PanelGroupContext = exports.PanelGroupContext = /*#__PURE__*/_react.default.createContext({});
 
 /**

package/cjs/PanelGroup/index.js

@@ -6,8 +6,7 @@ exports.default = exports.PanelGroupContext = void 0;
 var _PanelGroup = _interopRequireWildcard(require("./PanelGroup"));
 exports.PanelGroup = _PanelGroup.default;
 exports.PanelGroupContext = _PanelGroup.PanelGroupContext;
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 // export types
 // export components
 var _default = exports.default = _PanelGroup.default;

package/cjs/Placeholder/PlaceholderGrid.js

@@ -9,8 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
  * The `Placeholder.Grid` component is used to display the loading state of the block.
  * @see https://rsuitejs.com/components/placeholder

package/cjs/Placeholder/PlaceholderParagraph.js

@@ -9,8 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
  * The `Placeholder.Paragraph` component is used to display the loading state of the block.
  * @see https://rsuitejs.com/components/placeholder

package/cjs/Popover/Popover.js

@@ -10,8 +10,7 @@ var _Heading = _interopRequireDefault(require("../Heading"));
 var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
  * The `Popover` component is used to display a popup window for a target component.
  * @see https://rsuitejs.com/components/popover

package/cjs/Progress/Progress.d.ts

@@ -1,4 +1,4 @@
-import ProgressCircle from './ProgressCircle';
+import ProgressCircle from '../ProgressCircle';
 import ProgressLine, { ProgressLineProps } from './ProgressLine';
 import { InternalRefForwardingComponent } from '../internals/types';
 export interface Progress extends InternalRefForwardingComponent<'div', ProgressLineProps> {

package/cjs/Progress/Progress.js

@@ -4,7 +4,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
-var _ProgressCircle = _interopRequireDefault(require("./ProgressCircle"));
+var _ProgressCircle = _interopRequireDefault(require("../ProgressCircle"));
 var _ProgressLine = _interopRequireDefault(require("./ProgressLine"));
 /**
  * The `Progress` component is used to display the progress of current operation.

package/cjs/Progress/ProgressInfo.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface ProgressInfoProps {
+    /** The prefix of the component CSS class */
+    classPrefix: string;
+    /** Percent of progress */
+    percent: number;
+    /** Progress status */
+    status?: 'success' | 'fail' | 'active';
+    /** Custom render function for info content */
+    renderInfo?: (percent: number, status?: 'success' | 'fail' | 'active') => React.ReactNode;
+}
+/**
+ * Shared component for displaying progress information
+ * Used by both ProgressLine and ProgressCircle
+ */
+declare const ProgressInfo: (props: ProgressInfoProps) => React.JSX.Element;
+export default ProgressInfo;

package/cjs/Progress/ProgressInfo.js

@@ -0,0 +1,29 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _statusIcons = require("../internals/constants/statusIcons");
+var _hooks = require("../internals/hooks");
+/**
+ * Shared component for displaying progress information
+ * Used by both ProgressLine and ProgressCircle
+ */
+const ProgressInfo = props => {
+  const {
+    percent,
+    renderInfo,
+    status,
+    classPrefix
+  } = props;
+  const {
+    prefix
+  } = (0, _hooks.useStyles)(classPrefix);
+  const showIcon = status && status !== 'active';
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: prefix('info')
+  }, renderInfo ? renderInfo(percent, status) : showIcon ? _statusIcons.PROGRESS_STATUS_ICON[status] : `${percent}%`);
+};
+var _default = exports.default = ProgressInfo;

package/cjs/Progress/ProgressLine.d.ts

@@ -1,21 +1,35 @@
+import React from 'react';
 import { BoxProps } from '../internals/Box';
+import type { ProgressSection } from './types';
 export interface ProgressLineProps extends BoxProps {
-    /** Line color */
-    strokeColor?: string;
+    /** Whether to show indeterminate loading animation */
+    indeterminate?: boolean;
     /** Percent of progress */
     percent?: number;
+    /** The placement of the percent info */
+    percentPlacement?: 'start' | 'end' | 'insideStart' | 'insideEnd' | 'insideCenter';
+    /** Line color */
+    strokeColor?: string;
     /** Line width */
     strokeWidth?: number;
-    /** Trail color */
-    trailColor?: string;
-    /** Trail width */
-    trailWidth?: number;
     /** Show text */
     showInfo?: boolean;
     /** Progress status */
     status?: 'success' | 'fail' | 'active';
+    /** Whether to apply a striped effect to the progress bar */
+    striped?: boolean;
+    /** Multiple sections with different colors */
+    sections?: ProgressSection[];
+    /** Trail color */
+    trailColor?: string;
+    /** Trail width */
+    trailWidth?: number;
     /**  The progress bar is displayed vertically */
     vertical?: boolean;
+    /** The radius of the progress bar */
+    radius?: number | string;
+    /** Custom render function for info content */
+    renderInfo?: (percent: number, status?: 'success' | 'fail' | 'active') => React.ReactNode;
 }
 /**
  * The `Progress.Line` component is used to display the progress of current operation.

package/cjs/Progress/ProgressLine.js

@@ -7,7 +7,9 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _Box = _interopRequireDefault(require("../internals/Box"));
-var _statusIcons = require("../internals/constants/statusIcons");
+var _ProgressInfo = _interopRequireDefault(require("./ProgressInfo"));
+var _ProgressStroke = _interopRequireDefault(require("./ProgressStroke"));
+var _ProgressSections = _interopRequireDefault(require("./ProgressSections"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 /**
@@ -21,61 +23,70 @@ const ProgressLine = (0, _utils.forwardRef)((props, ref) => {
   const {
     as,
     className,
+    classPrefix = 'progress-line',
     percent = 0,
+    percentPlacement = 'end',
+    radius,
     strokeColor,
     strokeWidth,
-    trailColor,
-    trailWidth,
     status,
+    striped,
+    style,
     showInfo = true,
-    classPrefix = 'progress',
+    trailColor,
+    trailWidth,
     vertical,
+    sections,
+    renderInfo,
+    indeterminate,
     ...rest
   } = propsWithDefaults;
   const {
     merge,
     prefix,
-    withPrefix
+    withPrefix,
+    cssVar
   } = (0, _hooks.useStyles)(classPrefix);
-  const lineInnerStyle = {
-    backgroundColor: trailColor,
-    [vertical ? 'width' : 'height']: trailWidth || strokeWidth
-  };
-  const percentStyle = {
-    [vertical ? 'height' : 'width']: `${percent}%`,
-    backgroundColor: strokeColor,
-    [vertical ? 'width' : 'height']: strokeWidth
-  };
-  const classes = merge(className, withPrefix('line', {
-    'line-vertical': vertical,
-    [`line-${status}`]: !!status
+  const classes = merge(className, withPrefix({
+    vertical,
+    striped,
+    indeterminate
   }));
-  const showIcon = status && status !== 'active';
-  const info = showIcon ? /*#__PURE__*/_react.default.createElement("span", {
-    className: prefix(`icon-${status || ''}`)
-  }, _statusIcons.PROGRESS_STATUS_ICON[status]) : /*#__PURE__*/_react.default.createElement("span", {
-    className: prefix('info-status')
-  }, percent, "%");
+  const totalPercent = sections ? sections.reduce((sum, section) => sum + section.percent, 0) : percent;
+  const styles = (0, _utils.mergeStyles)(cssVar('trail-size', (0, _utils.getCssValue)(trailWidth || strokeWidth)), cssVar('trail-color', trailColor), cssVar('stroke', `${totalPercent}%`), cssVar('size', (0, _utils.getCssValue)(strokeWidth)), cssVar('color', strokeColor), cssVar('radius', (0, _utils.getCssValue)(radius)), style);
+  const info = /*#__PURE__*/_react.default.createElement(_ProgressInfo.default, {
+    percent: percent,
+    renderInfo: renderInfo,
+    status: status,
+    classPrefix: classPrefix
+  });
+
+  // Determine if the info should be placed inside the stroke
+  const isInsidePlacement = percentPlacement === null || percentPlacement === void 0 ? void 0 : percentPlacement.startsWith('inside');
   return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
     as: as,
+    ref: ref,
+    className: classes,
     role: "progressbar",
     "aria-valuemin": "0",
     "aria-valuemax": "100",
-    "aria-valuenow": percent
-  }, rest, {
-    ref: ref,
-    className: classes
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: prefix('line-outer')
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: prefix('line-inner'),
-    style: lineInnerStyle
+    "aria-valuenow": totalPercent,
+    "data-status": status,
+    "data-placement": percentPlacement,
+    style: styles
+  }, rest), /*#__PURE__*/_react.default.createElement("div", {
+    className: prefix('outer')
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: prefix('line-bg'),
-    style: percentStyle
-  }))), showInfo ? /*#__PURE__*/_react.default.createElement("div", {
-    className: prefix('info')
-  }, info) : null);
+    className: prefix('trail')
+  }, sections ? /*#__PURE__*/_react.default.createElement(_ProgressSections.default, {
+    classPrefix: classPrefix,
+    sections: sections,
+    vertical: vertical
+  }) : /*#__PURE__*/_react.default.createElement(_ProgressStroke.default, {
+    classPrefix: classPrefix,
+    percent: indeterminate ? 100 : percent,
+    vertical: vertical
+  }, showInfo && isInsidePlacement ? info : null))), showInfo && !isInsidePlacement ? info : null);
 });
 ProgressLine.displayName = 'ProgressLine';
 var _default = exports.default = ProgressLine;

package/cjs/Progress/ProgressSections.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { ProgressSection } from './types';
+export interface ProgressSectionsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The classPrefix passed from parent component */
+    classPrefix: string;
+    /** Multiple sections with different colors */
+    sections: ProgressSection[];
+    /** Whether the progress bar is displayed vertically */
+    vertical?: boolean;
+}
+/**
+ * A component to render multiple sections in a progress bar
+ */
+declare const ProgressSections: React.MemoExoticComponent<(props: ProgressSectionsProps) => React.JSX.Element>;
+export default ProgressSections;

package/cjs/Progress/ProgressSections.js

@@ -0,0 +1,43 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _ProgressStroke = _interopRequireDefault(require("./ProgressStroke"));
+var _hooks = require("../internals/hooks");
+/**
+ * A component to render multiple sections in a progress bar
+ */
+const ProgressSections = /*#__PURE__*/_react.default.memo(props => {
+  const {
+    classPrefix,
+    sections,
+    vertical,
+    ...rest
+  } = props;
+  const {
+    prefix
+  } = (0, _hooks.useStyles)(classPrefix);
+  let countPercent = 0;
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    className: prefix('sections')
+  }, rest), sections.map((section, index) => {
+    const sectionStroke = /*#__PURE__*/_react.default.createElement(_ProgressStroke.default, {
+      key: index,
+      classPrefix: classPrefix,
+      percent: section.percent,
+      color: section.color,
+      vertical: vertical,
+      isSection: true,
+      tooltip: section.tooltip,
+      countPercent: countPercent
+    }, section.label);
+    countPercent += section.percent;
+    return sectionStroke;
+  }));
+});
+ProgressSections.displayName = 'ProgressSections';
+var _default = exports.default = ProgressSections;

package/cjs/Progress/ProgressStroke.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+export interface ProgressStrokeProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The classPrefix passed from parent component */
+    classPrefix: string;
+    /** Percent of progress */
+    percent: number;
+    /** Line color */
+    color?: string;
+    /** Whether the progress bar is displayed vertically */
+    vertical?: boolean;
+    /** Children to be rendered inside the stroke */
+    children?: React.ReactNode;
+    /** Whether this is part of a multi-section progress bar */
+    isSection?: boolean;
+    /** Tooltip of this section */
+    tooltip?: React.ReactNode;
+    /**  The percentage of the current section in the total progress bar */
+    countPercent?: number;
+}
+/**
+ * A single stroke component used within ProgressLine
+ */
+declare const ProgressStroke: React.MemoExoticComponent<(props: ProgressStrokeProps) => React.JSX.Element>;
+export default ProgressStroke;

package/cjs/Progress/ProgressStroke.js

@@ -0,0 +1,51 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _hooks = require("../internals/hooks");
+var _utils = require("../internals/utils");
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+var _Whisper = _interopRequireDefault(require("../Whisper"));
+/**
+ * A single stroke component used within ProgressLine
+ */
+const ProgressStroke = /*#__PURE__*/_react.default.memo(props => {
+  const {
+    classPrefix,
+    percent,
+    color,
+    vertical,
+    children,
+    isSection,
+    tooltip,
+    style,
+    countPercent
+  } = props;
+  const {
+    prefix
+  } = (0, _hooks.useStyles)(classPrefix);
+
+  // Build class names
+  const classes = prefix('stroke', {
+    section: isSection
+  });
+  const content = /*#__PURE__*/_react.default.createElement("div", {
+    className: classes,
+    style: (0, _utils.mergeStyles)(style, {
+      width: vertical ? '100%' : `${percent}%`,
+      height: vertical ? `${percent}%` : '100%',
+      background: color,
+      bottom: vertical ? `${countPercent}%` : undefined
+    })
+  }, children);
+  return tooltip ? /*#__PURE__*/_react.default.createElement(_Whisper.default, {
+    trigger: "hover",
+    placement: "top",
+    speaker: /*#__PURE__*/_react.default.createElement(_Tooltip.default, null, tooltip)
+  }, content) : content;
+});
+ProgressStroke.displayName = 'ProgressStroke';
+var _default = exports.default = ProgressStroke;

package/cjs/Progress/index.d.ts

@@ -1,7 +1,7 @@
 import Progress from './Progress';
-import ProgressCircle from './ProgressCircle';
+import ProgressCircle from '../ProgressCircle';
 import ProgressLine from './ProgressLine';
-export type { ProgressCircleProps } from './ProgressCircle';
-export type { ProgressLineProps } from './ProgressLine';
+export type { ProgressLineProps as ProgressProps } from './ProgressLine';
+export type { ProgressSection } from './types';
 export { Progress, ProgressCircle, ProgressLine };
 export default Progress;

package/cjs/Progress/index.js

@@ -6,7 +6,7 @@ exports.__esModule = true;
 exports.default = void 0;
 var _Progress = _interopRequireDefault(require("./Progress"));
 exports.Progress = _Progress.default;
-var _ProgressCircle = _interopRequireDefault(require("./ProgressCircle"));
+var _ProgressCircle = _interopRequireDefault(require("../ProgressCircle"));
 exports.ProgressCircle = _ProgressCircle.default;
 var _ProgressLine = _interopRequireDefault(require("./ProgressLine"));
 exports.ProgressLine = _ProgressLine.default;

package/cjs/Progress/types.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface ProgressSection {
+    /** Percent of this section */
+    percent: number;
+    /** Color of this section */
+    color: string;
+    /** Label of this section */
+    label?: React.ReactNode;
+    /** Tooltip of this section */
+    tooltip?: React.ReactNode;
+}

package/cjs/Progress/types.js

@@ -0,0 +1,4 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;

package/cjs/{Progress → ProgressCircle}/ProgressCircle.d.ts

@@ -1,29 +1,35 @@
+import React from 'react';
 import { BoxProps } from '../internals/Box';
+import type { ProgressSection } from '../Progress';
 export interface ProgressCircleProps extends BoxProps {
-    /** Line color */
-    strokeColor?: string;
-    /** The end of different types of open paths */
-    strokeLinecap?: 'butt' | 'round' | 'square';
-    /** Tail color */
-    trailColor?: string;
-    /** Percent of progress */
-    percent?: number;
-    /** Line width */
-    strokeWidth?: number;
-    /** Tail width */
-    trailWidth?: number;
     /** Circular progress bar degree */
     gapDegree?: number;
     /** Circular progress bar Notch position */
     gapPosition?: 'top' | 'bottom' | 'left' | 'right';
+    /** Percent of progress */
+    percent?: number;
     /** Show text */
     showInfo?: boolean;
     /** Progress status */
     status?: 'success' | 'fail' | 'active';
+    /** Line color */
+    strokeColor?: string;
+    /** The end of different types of open paths */
+    strokeLinecap?: 'butt' | 'round' | 'square';
+    /** Line width */
+    strokeWidth?: number;
+    /** Tail color */
+    trailColor?: string;
+    /** Tail width */
+    trailWidth?: number;
+    /** Multiple sections with different colors */
+    sections?: Pick<ProgressSection, 'percent' | 'color'>[];
+    /** Custom render function for info content */
+    renderInfo?: (percent: number, status?: 'success' | 'fail' | 'active') => React.ReactNode;
 }
 /**
- * The `Progress.Circle` component is used to display the progress of current operation.
- * @see https://rsuitejs.com/components/progress/#circle
+ * Display circular progress for an operation.
+ * @see https://rsuitejs.com/components/progress-circle
  */
 declare const ProgressCircle: import("../internals/types").InternalRefForwardingComponent<"div", ProgressCircleProps, never> & Record<string, never>;
 export default ProgressCircle;