@activecollab/components 2.0.388 → 2.0.389

package/dist/index.js

@@ -27876,7 +27876,7 @@
   };
 
   var StepPulse = styled.keyframes(["0%,100%{opacity:1;}50%{opacity:0.35;}"]);
-  var StepSequenceStyle = styled.css(["", " display:inline-flex;align-items:center;padding:6px 8px;.c-step-sequence__step--success,.c-step-sequence__connector--success{--step-sequence-surface:var(--color-sucess-green);--step-sequence-ring:var(--color-sucess-green);--step-sequence-line:var(--color-sucess-green);}.c-step-sequence__step--info,.c-step-sequence__connector--info{--step-sequence-surface:var(--color-progress-blue);--step-sequence-ring:var(--color-progress-blue);--step-sequence-line:var(--color-progress-blue);}.c-step-sequence__step--warning,.c-step-sequence__connector--warning{--step-sequence-surface:var(--color-orange);--step-sequence-ring:var(--color-orange);--step-sequence-line:var(--color-orange);}.c-step-sequence__step--danger,.c-step-sequence__connector--danger{--step-sequence-surface:var(--red-alert);--step-sequence-ring:var(--red-alert);--step-sequence-line:var(--red-alert);}.c-step-sequence__step--neutral,.c-step-sequence__connector--neutral{--step-sequence-surface:var(--color-theme-500);--step-sequence-ring:var(--color-theme-400);--step-sequence-line:var(--color-theme-400);}.c-step-sequence__step{width:22px;height:22px;border-radius:50%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex-shrink:0;svg{display:block;}}.c-step-sequence__step--solid{background:var(--step-sequence-surface);}.c-step-sequence__step--outline{background:transparent;border:2px solid var(--step-sequence-ring);}.c-step-sequence__step--dashed{background:transparent;border:2px dashed var(--step-sequence-ring);}.c-step-sequence__step--pulse > *{animation:", " 1.4s ease-in-out infinite;}.c-step-sequence__dot{width:6px;height:6px;border-radius:50%;background:var(--step-sequence-surface);}.c-step-sequence__step--solid .c-step-sequence__dot{width:7px;height:7px;background:var(--only-white);}.c-step-sequence__connector{width:13px;height:2px;flex-shrink:0;background:var(--step-sequence-line);}"], BoxSizingStyle, StepPulse);
+  var StepSequenceStyle = styled.css(["", " display:inline-flex;align-items:center;padding:6px 8px;.c-step-sequence__step--success,.c-step-sequence__connector--success{--step-sequence-surface:var(--color-sucess-green);--step-sequence-ring:var(--color-sucess-green);--step-sequence-line:var(--color-sucess-green);}.c-step-sequence__step--info,.c-step-sequence__connector--info{--step-sequence-surface:var(--color-progress-blue);--step-sequence-ring:var(--color-progress-blue);--step-sequence-line:var(--color-progress-blue);}.c-step-sequence__step--warning,.c-step-sequence__connector--warning{--step-sequence-surface:var(--color-orange);--step-sequence-ring:var(--color-orange);--step-sequence-line:var(--color-orange);}.c-step-sequence__step--danger,.c-step-sequence__connector--danger{--step-sequence-surface:var(--red-alert);--step-sequence-ring:var(--red-alert);--step-sequence-line:var(--red-alert);}.c-step-sequence__step--neutral,.c-step-sequence__connector--neutral{--step-sequence-surface:var(--color-theme-500);--step-sequence-ring:var(--color-theme-400);--step-sequence-line:var(--color-theme-400);}.c-step-sequence__step{width:22px;height:22px;border-radius:50%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex-shrink:0;svg{display:block;}}.c-step-sequence__step--solid{background:var(--step-sequence-surface);}.c-step-sequence__step--outline{background:transparent;border:2px solid var(--step-sequence-ring);}.c-step-sequence__step--dashed{background:transparent;border:2px dashed var(--step-sequence-ring);}.c-step-sequence__step--pulse > *{animation:", " 1.4s ease-in-out infinite;}.c-step-sequence__dot{width:6px;height:6px;border-radius:50%;background:var(--step-sequence-surface);}.c-step-sequence__step--solid .c-step-sequence__dot{width:8px;height:8px;background:var(--only-white);}.c-step-sequence__connector{width:13px;height:2px;flex-shrink:0;background:var(--step-sequence-line);}"], BoxSizingStyle, StepPulse);
   var StyledStepSequenceTrigger = styled__default["default"](Trigger).withConfig({
     displayName: "Styles__StyledStepSequenceTrigger",
     componentId: "sc-hp7ywn-0"
@@ -27931,6 +27931,160 @@
   };
   StepSequence.displayName = "StepSequence";
 
+  /** The fifteen states a source-code spine node can be in */
+
+  /* Glyph colours: light on a filled step, the step's own tone on an outlined
+     one — the component paints rings and lines, the caller paints glyphs. */
+  var ON_SOLID = "var(--only-white)";
+  var AMBER = "var(--color-orange)";
+
+  /* Glyphs render at an even 12px: a 13px glyph in the 22px solid circle (or
+     the 18px content box of an outlined one) leaves half-pixel margins, so the
+     browser snaps it visibly off-centre — 12px keeps every margin a whole pixel
+     and renders the 2-unit strokes of the 24-grid icons at exactly 1px. */
+  var GLYPH = 12;
+
+  /**
+   * The fifteen spine states as generic `StepSequence` steps — the single
+   * source both the Spine State Explorer story and the app's source-code
+   * spine render from.
+   *
+   * A connector takes the tone of the step it points into, so `connectorTone`
+   * is only spelled out for a stage that has not been reached yet (queued /
+   * manual / locked) — there the line stays the faint neutral grey.
+   */
+  var SPINE_STEP = {
+    done: {
+      tone: "success",
+      fill: "solid",
+      icon: /*#__PURE__*/React__default["default"].createElement(CheckIcon$1, {
+        fill: ON_SOLID,
+        width: GLYPH,
+        height: GLYPH
+      })
+    },
+    merged: {
+      tone: "success",
+      fill: "solid",
+      icon: /*#__PURE__*/React__default["default"].createElement(GitMergeIcon$1, {
+        stroke: ON_SOLID,
+        width: GLYPH,
+        height: GLYPH
+      })
+    },
+    committed: {
+      tone: "success",
+      fill: "solid",
+      icon: /*#__PURE__*/React__default["default"].createElement(GitCommitIcon$1, {
+        stroke: ON_SOLID,
+        width: GLYPH,
+        height: GLYPH
+      })
+    },
+    progress: {
+      tone: "info",
+      fill: "solid",
+      pulse: true
+    },
+    review: {
+      tone: "info",
+      fill: "solid",
+      icon: /*#__PURE__*/React__default["default"].createElement(EyeIcon$1, {
+        fill: ON_SOLID,
+        width: GLYPH,
+        height: GLYPH
+      })
+    },
+    active: {
+      tone: "info",
+      fill: "solid",
+      icon: /*#__PURE__*/React__default["default"].createElement(GitBranchIcon$1, {
+        stroke: ON_SOLID,
+        width: GLYPH,
+        height: GLYPH
+      })
+    },
+    queued: {
+      tone: "info",
+      fill: "outline",
+      icon: /*#__PURE__*/React__default["default"].createElement(ClockIcon$1, {
+        fill: "var(--color-progress-blue)",
+        width: GLYPH,
+        height: GLYPH
+      }),
+      connectorTone: "neutral"
+    },
+    failed: {
+      tone: "danger",
+      fill: "solid",
+      icon: /*#__PURE__*/React__default["default"].createElement(CloseIcon$1, {
+        fill: ON_SOLID,
+        width: GLYPH,
+        height: GLYPH
+      })
+    },
+    warning: {
+      tone: "warning",
+      fill: "solid",
+      icon: /*#__PURE__*/React__default["default"].createElement(WarningIcon$1, {
+        fill: ON_SOLID,
+        width: GLYPH,
+        height: GLYPH
+      })
+    },
+    conflict: {
+      tone: "danger",
+      fill: "solid",
+      icon: /*#__PURE__*/React__default["default"].createElement(WarningTriangleIcon$1, {
+        fill: ON_SOLID,
+        width: GLYPH,
+        height: GLYPH
+      })
+    },
+    skipped: {
+      tone: "neutral",
+      fill: "solid",
+      icon: /*#__PURE__*/React__default["default"].createElement(CircleSlashIcon$1, {
+        fill: ON_SOLID,
+        width: GLYPH,
+        height: GLYPH
+      })
+    },
+    manual: {
+      tone: "warning",
+      fill: "outline",
+      icon: /*#__PURE__*/React__default["default"].createElement(ClockIcon$1, {
+        fill: AMBER,
+        width: GLYPH,
+        height: GLYPH
+      }),
+      connectorTone: "neutral"
+    },
+    locked: {
+      tone: "warning",
+      fill: "outline",
+      icon: /*#__PURE__*/React__default["default"].createElement(LockIcon$1, {
+        fill: AMBER,
+        width: GLYPH,
+        height: GLYPH
+      }),
+      connectorTone: "neutral"
+    },
+    draft: {
+      tone: "neutral",
+      fill: "dashed",
+      icon: /*#__PURE__*/React__default["default"].createElement(GitPullRequestIcon$1, {
+        stroke: "var(--color-theme-600)",
+        width: GLYPH,
+        height: GLYPH
+      })
+    },
+    todo: {
+      tone: "neutral",
+      fill: "outline"
+    }
+  };
+
   /**
    * StackedCard — shared constants and the class/token contract.
    *
@@ -29217,6 +29371,7 @@
   exports.RocketSmallIcon = RocketSmallIcon$1;
   exports.RoundedRectangleIcon = RoundedRectangleIcon$1;
   exports.SHIFT_STEP_MULTIPLIER = SHIFT_STEP_MULTIPLIER;
+  exports.SPINE_STEP = SPINE_STEP;
   exports.STACKED_CARD_CONTROL_CLASS = STACKED_CARD_CONTROL_CLASS;
   exports.STACKED_CARD_COVER_RATIO = STACKED_CARD_COVER_RATIO;
   exports.STACKED_CARD_FIXED_ATTR = STACKED_CARD_FIXED_ATTR;