@dream-encode/wp-js-plugin-utils 0.3.0 → 0.6.0

package/dist/components/NotificationsDrawer/DismissAllButton.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _i18n = require("@wordpress/i18n");
 var _components = require("@wordpress/components");
 var _element = require("@wordpress/element");
+var _i18n = require("@wordpress/i18n");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * "Dismiss All" button used inside the notifications drawer.

package/dist/components/Process/ProcessInfo.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Wrapper for a process info key/value table.
+ *
+ * @param  {Object}    props
+ * @param  {string}    [props.className]  Wrapper class name. Defaults to `'process-info'`.
+ * @param  {*}         props.children     `ProcessInfoRow` children (or any nodes).
+ * @return {JSX.Element|null}
+ */
+const ProcessInfo = ({
+  className = 'process-info',
+  children
+}) => {
+  if (!children) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: className,
+    children: children
+  });
+};
+var _default = exports.default = ProcessInfo;

package/dist/components/Process/ProcessInfoRow.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _element = require("@wordpress/element");
+var _components = require("@wordpress/components");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * A single key/value row inside `ProcessInfo`.
+ *
+ * Either pass a primitive `value` or pass JSX as `children`. If `children` is
+ * provided the value cell is rendered as a `div` (so it can host buttons,
+ * spans, refs, etc.). Otherwise it is rendered as a `Text` cell.
+ *
+ * @param  {Object}                 props
+ * @param  {string|JSX.Element}     props.label              The row label (key cell).
+ * @param  {*}                      [props.value]            Primitive value to render in the value cell.
+ * @param  {*}                      [props.children]         Custom value content.
+ * @param  {boolean}                [props.show=true]        Render the row only when truthy.
+ * @param  {string}                 [props.className='row']  Row wrapper class name.
+ * @param  {string}                 [props.keyClassName='key']
+ * @param  {string}                 [props.valueClassName='value']
+ * @return {JSX.Element|null}
+ */const ProcessInfoRow = ({
+  label,
+  value,
+  children,
+  show = true,
+  className = 'row',
+  keyClassName = 'key',
+  valueClassName = 'value'
+}) => {
+  if (!show) {
+    return null;
+  }
+  const content = children !== undefined ? children : value;
+  const isComplexContent = (0, _element.isValidElement)(content) || Array.isArray(content);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: className,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
+      className: keyClassName,
+      children: label
+    }), isComplexContent ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: valueClassName,
+      children: content
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
+      className: valueClassName,
+      children: content
+    })]
+  });
+};
+var _default = exports.default = ProcessInfoRow;

package/dist/components/Process/ProcessStatusInfo.js

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _components = require("@wordpress/components");
+var _element = require("@wordpress/element");
+var _Progress = _interopRequireDefault(require("../Progress/Progress"));
+var _ProcessStatusSummary = _interopRequireDefault(require("./ProcessStatusSummary"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const PENDING_STATUSES = ['pending', 'queued'];
+
+/**
+ * Card-level wrapper for a single running process.
+ *
+ * Renders the process name, optional id and badges, a progress bar, a status
+ * summary row, an action button slot and an expandable details section.
+ *
+ * @param  {Object}        props
+ * @param  {string|JSX.Element} props.name                    Display name shown at the top.
+ * @param  {string|number} [props.processId]                  Optional id rendered as `#{id}` next to the name.
+ * @param  {string}        props.status                       Current process status.
+ * @param  {number}        props.percentComplete              Percent complete (0-100).
+ * @param  {string}        [props.progressStatus]             Optional override for the Progress bar status modifier.
+ * @param  {Object[]}      [props.runs]                       Forwarded to `ProcessStatusSummary`.
+ * @param  {number}        [props.startTime]                  Forwarded to `ProcessStatusSummary`.
+ * @param  {number}        [props.secondsRemaining]           Forwarded to `ProcessStatusSummary`.
+ * @param  {Object}        [props.summaryProps]               Additional props passed to `ProcessStatusSummary`.
+ * @param  {JSX.Element}   [props.badges]                     Badges/pill labels rendered after the name (e.g. "DRY RUN").
+ * @param  {JSX.Element}   [props.actions]                    Action buttons rendered on the right side.
+ * @param  {*}             [props.children]                   Content for the expandable details section (e.g. `<ProcessInfo>`).
+ * @param  {boolean}       [props.expandable=true]            Whether the details toggle is rendered.
+ * @param  {boolean}       [props.defaultExpanded=false]      Initial expanded state.
+ * @param  {string}        [props.className='process']        Wrapper class name.
+ * @param  {string[]}      [props.modifierClassNames]         Additional class names appended to the wrapper.
+ * @param  {string}        [props.detailsToggleIcon='menu']   Dashicon name for the details toggle.
+ * @param  {string}        [props.idClassName='process-id']   Class for the id label.
+ * @param  {string}        [props.nameClassName='process-name'] Class for the name label.
+ * @param  {string}        [props.actionsClassName='process-buttons'] Class for the actions container.
+ * @param  {string}        [props.detailsClassName='details'] Class for the expandable details container.
+ * @return {JSX.Element|null}
+ */
+const ProcessStatusInfo = ({
+  name,
+  processId,
+  status,
+  percentComplete,
+  progressStatus,
+  runs,
+  startTime,
+  secondsRemaining,
+  summaryProps = {},
+  badges,
+  actions,
+  children,
+  expandable = true,
+  defaultExpanded = false,
+  className = 'process',
+  modifierClassNames = [],
+  detailsToggleIcon = 'menu',
+  idClassName = 'process-id',
+  nameClassName = 'process-name',
+  actionsClassName = 'process-buttons',
+  detailsClassName = 'details'
+}) => {
+  const [showDetails, setShowDetails] = (0, _element.useState)(defaultExpanded);
+  const wrapperClassName = [className, ...modifierClassNames].filter(Boolean).join(' ');
+  const isPending = PENDING_STATUSES.includes(status);
+  const showDetailsToggle = expandable && !!children && !isPending;
+  const toggleShowDetails = () => {
+    setShowDetails(current => !current);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: wrapperClassName,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+      alignment: "top",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+          alignment: "left",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
+            className: nameClassName,
+            children: name
+          }), (processId || processId === 0) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
+            className: idClassName,
+            variant: "muted",
+            children: `#${processId}`
+          }), badges]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Progress.default, {
+          currentValue: percentComplete ?? 0,
+          maxValue: 100,
+          status: progressStatus || status
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProcessStatusSummary.default, {
+          status: status,
+          percentComplete: percentComplete,
+          runs: runs,
+          startTime: startTime,
+          secondsRemaining: secondsRemaining,
+          ...summaryProps
+        })]
+      }), (showDetailsToggle || actions) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: actionsClassName,
+        children: [showDetailsToggle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
+          className: "process-details-icon",
+          icon: detailsToggleIcon,
+          size: 30,
+          onClick: toggleShowDetails
+        }), actions]
+      })]
+    }), !!children && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: `${detailsClassName} ${showDetails ? 'open' : 'closed'}`,
+      children: children
+    })]
+  });
+};
+var _default = exports.default = ProcessStatusInfo;

package/dist/components/Process/ProcessStatusSummary.js

@@ -0,0 +1,226 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _components = require("@wordpress/components");
+var _element = require("@wordpress/element");
+var _i18n = require("@wordpress/i18n");
+var _useValueChangeEffect = _interopRequireDefault(require("../../hooks/useValueChangeEffect"));
+var _dates = require("../../utils/dates");
+var _time = require("../../utils/time");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Status summary row for a long-running process.
+ *
+ * Renders a single horizontal row of muted text describing the current status,
+ * percent complete and (when applicable) an estimated time remaining countdown.
+ *
+ * The consumer is responsible for computing the initial `secondsRemaining`
+ * (e.g. via an EMA over previous run cycle times) and passing it in. The
+ * component manages the per-second countdown internally and resets it whenever
+ * the `secondsRemaining` prop changes.
+ *
+ * @param  {Object}    props
+ * @param  {string}    props.status                            Current process status.
+ * @param  {number}    props.percentComplete                   Percent complete (0-100).
+ * @param  {number}    [props.secondsRemaining]                Pre-computed seconds remaining. Overrides `runs`/`startTime` when provided.
+ * @param  {Object[]}  [props.runs]                            Array of process run records used to compute time remaining via EMA.
+ * @param  {number}    [props.startTime]                       Unix timestamp (seconds) the process started. Used for the simple fallback.
+ * @param  {number}    [props.emaWindow=2]                     Window size passed to the EMA helper.
+ * @param  {boolean}   [props.emaUseCycleTime=true]            Whether the EMA helper should use full cycle time.
+ * @param  {string}    [props.className='summary']             Wrapper class name.
+ * @param  {boolean}   [props.animatePercent=true]             Animate the percent complete value when it changes.
+ * @param  {boolean}   [props.showEstimatedCompletedTime=true] Append the local-time ETA after the time remaining.
+ * @param  {JSX.Element} [props.failedAction]                  Slot rendered after the "Failed!" label (e.g. a retry button).
+ * @param  {Object}    [props.messages]                        Optional per-status JSX/string overrides keyed by status name.
+ * @param  {string}    [props.textDomain='default']            Translation domain for built-in strings.
+ * @param  {Object}    [props.labels]                          Per-string label overrides (see `defaultLabels`).
+ * @return {JSX.Element|null}
+ */const ProcessStatusSummary = ({
+  status,
+  percentComplete,
+  secondsRemaining,
+  runs,
+  startTime,
+  emaWindow = 2,
+  emaUseCycleTime = true,
+  className = 'summary',
+  animatePercent = true,
+  showEstimatedCompletedTime = true,
+  failedAction,
+  messages = {},
+  textDomain = 'default',
+  labels = {}
+}) => {
+  const mergedLabels = (0, _element.useMemo)(() => ({
+    waiting: (0, _i18n.__)('Waiting', textDomain),
+    inProgress: (0, _i18n.__)('In-progress', textDomain),
+    complete: (0, _i18n.__)('Complete', textDomain),
+    completing: (0, _i18n.__)('Completing process', textDomain),
+    failed: (0, _i18n.__)('Failed!', textDomain),
+    percentSuffix: (0, _i18n.__)('complete', textDomain),
+    calculating: (0, _i18n.__)('Calculating time remaining...', textDomain),
+    fewSeconds: (0, _i18n.__)('A few seconds remaining', textDomain),
+    /* translators: %s: Time remaining. */
+    approxRemaining: (0, _i18n.__)('Approx. %s remaining', textDomain),
+    ...labels
+  }), [textDomain, labels]);
+  const percentValue = String(parseFloat(percentComplete ?? 0).toFixed(1));
+  const {
+    displayValue: displayPercent,
+    elementRef: percentRef
+  } = (0, _useValueChangeEffect.default)(percentValue, animatePercent ? 'fast' : 'default');
+  const [intervalSecondsRemaining, setIntervalSecondsRemaining] = (0, _element.useState)(false);
+  const [estimatedCompletedTime, setEstimatedCompletedTime] = (0, _element.useState)(false);
+  const intervalRef = (0, _element.useRef)(null);
+  const computedSecondsRemaining = (0, _element.useMemo)(() => {
+    if (secondsRemaining !== undefined && secondsRemaining !== null) {
+      return Number(secondsRemaining);
+    }
+    if (!percentComplete || percentComplete >= 100) {
+      return 0;
+    }
+    if (Array.isArray(runs) && runs.length >= 3) {
+      const {
+        avgTime
+      } = (0, _time.calculateEstimatedTimeRemainingUsingEMA)(runs, emaWindow, emaUseCycleTime);
+      if (avgTime > 0) {
+        const remainingPercentage = 100 - percentComplete;
+        const estimatedRemainingRuns = remainingPercentage / (percentComplete / runs.length);
+        return Math.max(1, avgTime * estimatedRemainingRuns);
+      }
+    }
+    if (startTime) {
+      return (0, _time.calculateEstimatedTimeRemainingSimple)(startTime, percentComplete);
+    }
+    return 0;
+  }, [secondsRemaining, runs, startTime, percentComplete, emaWindow, emaUseCycleTime]);
+  (0, _element.useEffect)(() => {
+    if (computedSecondsRemaining && Number(computedSecondsRemaining) > 0) {
+      setIntervalSecondsRemaining(Number(computedSecondsRemaining));
+      setEstimatedCompletedTime((0, _time.addSecondsToCurrentTime)(Number(computedSecondsRemaining)));
+    }
+  }, [computedSecondsRemaining]);
+  (0, _element.useEffect)(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    if (intervalSecondsRemaining > 0 && percentComplete < 100) {
+      intervalRef.current = setInterval(() => {
+        setIntervalSecondsRemaining(old => Math.max(0, old - 1));
+      }, 1000);
+    }
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [intervalSecondsRemaining > 0, percentComplete]);
+  const formattedTimeRemaining = (0, _element.useMemo)(() => {
+    if (percentComplete >= 100 || intervalSecondsRemaining !== false && intervalSecondsRemaining <= 0) {
+      return mergedLabels.fewSeconds;
+    }
+    if (!intervalSecondsRemaining) {
+      return mergedLabels.calculating;
+    }
+    return (0, _i18n.sprintf)(mergedLabels.approxRemaining, (0, _time.secondsToDhmsShort)(intervalSecondsRemaining) || '0:01');
+  }, [intervalSecondsRemaining, percentComplete, mergedLabels]);
+  const formattedEstimatedCompletedTime = (0, _element.useMemo)(() => {
+    if (!estimatedCompletedTime) {
+      return false;
+    }
+    return ` (${(0, _dates.convertTimestampToFriendlyTime)(estimatedCompletedTime, textDomain)})`;
+  }, [estimatedCompletedTime, textDomain]);
+  if (messages[status] !== undefined && messages[status] !== null) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: className,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
+        variant: "muted",
+        children: messages[status]
+      })
+    });
+  }
+  switch (status) {
+    case 'pending':
+    case 'queued':
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: className,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
+          variant: "muted",
+          className: "status",
+          children: mergedLabels.waiting
+        })
+      });
+    case 'processing':
+      if (percentComplete >= 100) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: className,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
+            variant: "muted",
+            className: "status",
+            children: mergedLabels.completing
+          })
+        });
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: className,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
+          variant: "muted",
+          className: "status",
+          children: mergedLabels.inProgress
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
+          variant: "muted",
+          className: "divider",
+          children: "|"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalText, {
+          variant: "muted",
+          className: "percent-complete",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            ref: percentRef,
+            children: displayPercent
+          }), "% ", mergedLabels.percentSuffix]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
+          variant: "muted",
+          className: "divider",
+          children: "|"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalText, {
+          variant: "muted",
+          className: "time-remaining",
+          children: [formattedTimeRemaining, showEstimatedCompletedTime && formattedEstimatedCompletedTime]
+        })]
+      });
+    case 'complete':
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: className,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
+          variant: "muted",
+          className: "status",
+          children: mergedLabels.complete
+        })
+      });
+    case 'failed':
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: className,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
+          variant: "muted",
+          isDestructive: "true",
+          className: "status",
+          children: mergedLabels.failed
+        }), failedAction && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
+            variant: "muted",
+            className: "divider",
+            children: "|"
+          }), failedAction]
+        })]
+      });
+    default:
+      return null;
+  }
+};
+var _default = exports.default = ProcessStatusSummary;

package/dist/components/Process/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ProcessInfo", {
+  enumerable: true,
+  get: function () {
+    return _ProcessInfo.default;
+  }
+});
+Object.defineProperty(exports, "ProcessInfoRow", {
+  enumerable: true,
+  get: function () {
+    return _ProcessInfoRow.default;
+  }
+});
+Object.defineProperty(exports, "ProcessStatusInfo", {
+  enumerable: true,
+  get: function () {
+    return _ProcessStatusInfo.default;
+  }
+});
+Object.defineProperty(exports, "ProcessStatusSummary", {
+  enumerable: true,
+  get: function () {
+    return _ProcessStatusSummary.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _ProcessInfo.default;
+  }
+});
+var _ProcessInfo = _interopRequireDefault(require("./ProcessInfo"));
+var _ProcessInfoRow = _interopRequireDefault(require("./ProcessInfoRow"));
+var _ProcessStatusSummary = _interopRequireDefault(require("./ProcessStatusSummary"));
+var _ProcessStatusInfo = _interopRequireDefault(require("./ProcessStatusInfo"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/Process/styles/_process.scss

@@ -0,0 +1,158 @@
+/*
+ * Generic styling for the wp-plugin-utils Process components.
+ *
+ * `de-wp-plugin-utils-process-info` styles the key/value table rendered by
+ * `<ProcessInfo>` / `<ProcessInfoRow>`. Pass the same wrapper class name that
+ * is supplied to the `className` prop (defaults to `process-info`).
+ *
+ *     .migration-info {
+ *         @include de-wp-plugin-utils-process-info();
+ *     }
+ *
+ * `de-wp-plugin-utils-process-status-summary` styles the horizontal status
+ * row rendered by `<ProcessStatusSummary>`. Pass the same wrapper class name
+ * that is supplied to its `className` prop (defaults to `summary`).
+ *
+ *     .migration {
+ *         @include de-wp-plugin-utils-process-status-summary();
+ *     }
+ */
+
+@mixin de-wp-plugin-utils-process-info {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+
+	.row {
+		display: grid;
+		grid-template-columns: 150px max-content;
+		grid-auto-rows: 25px;
+		grid-template-areas: "key value";
+		width: 100%;
+
+		.key {
+			display: flex;
+			flex-direction: column;
+			align-items: flex-start;
+			justify-content: center;
+			grid-area: key;
+			font-weight: 600;
+		}
+
+		.value {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			justify-content: center;
+			grid-area: value;
+
+			.percentage {
+				margin-left: 0.35rem;
+				opacity: 0.7;
+				font-style: italic;
+			}
+		}
+	}
+}
+
+@mixin de-wp-plugin-utils-process-status-summary {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-start;
+	gap: 8px;
+}
+
+/*
+ * `de-wp-plugin-utils-process-status-info` styles the card-level wrapper
+ * rendered by `<ProcessStatusInfo>`. Pass the same wrapper class name that is
+ * supplied to its `className` prop (defaults to `process`).
+ *
+ *     .migration {
+ *         @include de-wp-plugin-utils-process-status-info();
+ *     }
+ */
+@mixin de-wp-plugin-utils-process-status-info {
+	width: 100%;
+	padding: calc(24px);
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+	gap: calc(8px);
+	justify-content: space-between;
+	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+	box-sizing: border-box;
+
+	& > .components-h-stack {
+		width: 100%;
+
+		& > .components-v-stack {
+			width: 100%;
+			flex: 1;
+		}
+	}
+
+	&:last-child {
+		border-bottom: none;
+	}
+
+	.process-name {
+		font-size: 18px;
+		font-weight: 500;
+		margin-left: 3px;
+	}
+
+	.process-id {
+		margin-left: 7px;
+		margin-top: 2px;
+	}
+
+	.process-buttons {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		gap: 8px;
+		margin-left: 7rem;
+		padding-top: 5px;
+
+		.process-details-icon {
+			cursor: pointer;
+		}
+	}
+
+	&.cancelled {
+		opacity: 0.4;
+		pointer-events: none;
+	}
+
+	.summary {
+		margin-left: 3px;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: flex-start;
+		gap: 8px;
+	}
+
+	.details {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		padding: 0 calc(16px);
+		overflow: hidden;
+		max-height: 0;
+		opacity: 0;
+		transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
+
+		&.open {
+			max-height: 800px;
+			opacity: 1;
+			padding: calc(12px) calc(16px);
+			padding-bottom: 0;
+		}
+	}
+}

package/dist/components/Progress/Progress.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * HTML `<progress>` bar with a status modifier class.
+ *
+ * @param  {Object}  props
+ * @param  {number}  props.currentValue              Current value.
+ * @param  {number}  [props.maxValue=100]            Maximum value.
+ * @param  {string}  [props.status]                  Status modifier appended to the class name (e.g. `processing`).
+ * @param  {string}  [props.id='progress-bar']       DOM id.
+ * @param  {string}  [props.className='progress-bar'] Base class name.
+ * @return {JSX.Element}
+ */
+const Progress = ({
+  currentValue,
+  maxValue = 100,
+  status,
+  id = 'progress-bar',
+  className = 'progress-bar'
+}) => {
+  const classes = [className, status].filter(Boolean).join(' ');
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("progress", {
+    id: id,
+    className: classes,
+    value: currentValue,
+    max: maxValue,
+    children: [currentValue, "%"]
+  });
+};
+var _default = exports.default = Progress;

package/dist/components/Progress/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Progress.default;
+  }
+});
+var _Progress = _interopRequireDefault(require("./Progress"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }