@activecollab/components 2.0.388 → 2.0.390

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/dist/cjs/components/StepSequence/SpineStep.js +163 -0
  2. package/dist/cjs/components/StepSequence/SpineStep.js.map +1 -0
  3. package/dist/cjs/components/StepSequence/Styles.js +1 -1
  4. package/dist/cjs/components/StepSequence/Styles.js.map +1 -1
  5. package/dist/cjs/components/StepSequence/index.js +11 -0
  6. package/dist/cjs/components/StepSequence/index.js.map +1 -1
  7. package/dist/esm/components/StepSequence/SpineStep.d.ts +14 -0
  8. package/dist/esm/components/StepSequence/SpineStep.d.ts.map +1 -0
  9. package/dist/esm/components/StepSequence/SpineStep.js +157 -0
  10. package/dist/esm/components/StepSequence/SpineStep.js.map +1 -0
  11. package/dist/esm/components/StepSequence/Styles.d.ts.map +1 -1
  12. package/dist/esm/components/StepSequence/Styles.js +1 -1
  13. package/dist/esm/components/StepSequence/Styles.js.map +1 -1
  14. package/dist/esm/components/StepSequence/index.d.ts +1 -0
  15. package/dist/esm/components/StepSequence/index.d.ts.map +1 -1
  16. package/dist/esm/components/StepSequence/index.js +1 -0
  17. package/dist/esm/components/StepSequence/index.js.map +1 -1
  18. package/dist/index.js +156 -1
  19. package/dist/index.js.map +1 -1
  20. package/dist/index.min.js +1 -1
  21. package/dist/index.min.js.map +1 -1
  22. package/package.json +1 -1
package/dist/cjs/components/StepSequence/SpineStep.js ADDED
@@ -0,0 +1,163 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.SPINE_STEP = void 0;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ var _Icons = require("../Icons");
9
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
10
+ /** The fifteen states a source-code spine node can be in */
11
+
12
+ /* Glyph colours: light on a filled step, the step's own tone on an outlined
13
+ one — the component paints rings and lines, the caller paints glyphs. */
14
+ var ON_SOLID = "var(--only-white)";
15
+ var AMBER = "var(--color-orange)";
16
+
17
+ /* Glyphs render at an even 12px: a 13px glyph in the 22px solid circle (or
18
+ the 18px content box of an outlined one) leaves half-pixel margins, so the
19
+ browser snaps it visibly off-centre — 12px keeps every margin a whole pixel
20
+ and renders the 2-unit strokes of the 24-grid icons at exactly 1px. */
21
+ var GLYPH = 12;
22
+
23
+ /**
24
+ * The fifteen spine states as generic `StepSequence` steps — the single
25
+ * source both the Spine State Explorer story and the app's source-code
26
+ * spine render from.
27
+ *
28
+ * A connector takes the tone of the step it points into, so `connectorTone`
29
+ * is only spelled out for a stage that has not been reached yet (queued /
30
+ * manual / locked) — there the line stays the faint neutral grey.
31
+ */
32
+ var SPINE_STEP = exports.SPINE_STEP = {
33
+ done: {
34
+ tone: "success",
35
+ fill: "solid",
36
+ icon: /*#__PURE__*/_react.default.createElement(_Icons.CheckIcon, {
37
+ fill: ON_SOLID,
38
+ width: GLYPH,
39
+ height: GLYPH
40
+ })
41
+ },
42
+ merged: {
43
+ tone: "success",
44
+ fill: "solid",
45
+ icon: /*#__PURE__*/_react.default.createElement(_Icons.GitMergeIcon, {
46
+ stroke: ON_SOLID,
47
+ width: GLYPH,
48
+ height: GLYPH
49
+ })
50
+ },
51
+ committed: {
52
+ tone: "success",
53
+ fill: "solid",
54
+ icon: /*#__PURE__*/_react.default.createElement(_Icons.GitCommitIcon, {
55
+ stroke: ON_SOLID,
56
+ width: GLYPH,
57
+ height: GLYPH
58
+ })
59
+ },
60
+ progress: {
61
+ tone: "info",
62
+ fill: "solid",
63
+ pulse: true
64
+ },
65
+ review: {
66
+ tone: "info",
67
+ fill: "solid",
68
+ icon: /*#__PURE__*/_react.default.createElement(_Icons.EyeIcon, {
69
+ fill: ON_SOLID,
70
+ width: GLYPH,
71
+ height: GLYPH
72
+ })
73
+ },
74
+ active: {
75
+ tone: "info",
76
+ fill: "solid",
77
+ icon: /*#__PURE__*/_react.default.createElement(_Icons.GitBranchIcon, {
78
+ stroke: ON_SOLID,
79
+ width: GLYPH,
80
+ height: GLYPH
81
+ })
82
+ },
83
+ queued: {
84
+ tone: "info",
85
+ fill: "outline",
86
+ icon: /*#__PURE__*/_react.default.createElement(_Icons.ClockIcon, {
87
+ fill: "var(--color-progress-blue)",
88
+ width: GLYPH,
89
+ height: GLYPH
90
+ }),
91
+ connectorTone: "neutral"
92
+ },
93
+ failed: {
94
+ tone: "danger",
95
+ fill: "solid",
96
+ icon: /*#__PURE__*/_react.default.createElement(_Icons.CloseIcon, {
97
+ fill: ON_SOLID,
98
+ width: GLYPH,
99
+ height: GLYPH
100
+ })
101
+ },
102
+ warning: {
103
+ tone: "warning",
104
+ fill: "solid",
105
+ icon: /*#__PURE__*/_react.default.createElement(_Icons.WarningIcon, {
106
+ fill: ON_SOLID,
107
+ width: GLYPH,
108
+ height: GLYPH
109
+ })
110
+ },
111
+ conflict: {
112
+ tone: "danger",
113
+ fill: "solid",
114
+ icon: /*#__PURE__*/_react.default.createElement(_Icons.WarningTriangleIcon, {
115
+ fill: ON_SOLID,
116
+ width: GLYPH,
117
+ height: GLYPH
118
+ })
119
+ },
120
+ skipped: {
121
+ tone: "neutral",
122
+ fill: "solid",
123
+ icon: /*#__PURE__*/_react.default.createElement(_Icons.CircleSlashIcon, {
124
+ fill: ON_SOLID,
125
+ width: GLYPH,
126
+ height: GLYPH
127
+ })
128
+ },
129
+ manual: {
130
+ tone: "warning",
131
+ fill: "outline",
132
+ icon: /*#__PURE__*/_react.default.createElement(_Icons.ClockIcon, {
133
+ fill: AMBER,
134
+ width: GLYPH,
135
+ height: GLYPH
136
+ }),
137
+ connectorTone: "neutral"
138
+ },
139
+ locked: {
140
+ tone: "warning",
141
+ fill: "outline",
142
+ icon: /*#__PURE__*/_react.default.createElement(_Icons.LockIcon, {
143
+ fill: AMBER,
144
+ width: GLYPH,
145
+ height: GLYPH
146
+ }),
147
+ connectorTone: "neutral"
148
+ },
149
+ draft: {
150
+ tone: "neutral",
151
+ fill: "dashed",
152
+ icon: /*#__PURE__*/_react.default.createElement(_Icons.GitPullRequestIcon, {
153
+ stroke: "var(--color-theme-600)",
154
+ width: GLYPH,
155
+ height: GLYPH
156
+ })
157
+ },
158
+ todo: {
159
+ tone: "neutral",
160
+ fill: "outline"
161
+ }
162
+ };
163
+ //# sourceMappingURL=SpineStep.js.map
package/dist/cjs/components/StepSequence/SpineStep.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SpineStep.js","names":["_react","_interopRequireDefault","require","_Icons","e","__esModule","default","ON_SOLID","AMBER","GLYPH","SPINE_STEP","exports","done","tone","fill","icon","createElement","CheckIcon","width","height","merged","GitMergeIcon","stroke","committed","GitCommitIcon","progress","pulse","review","EyeIcon","active","GitBranchIcon","queued","ClockIcon","connectorTone","failed","CloseIcon","warning","WarningIcon","conflict","WarningTriangleIcon","skipped","CircleSlashIcon","manual","locked","LockIcon","draft","GitPullRequestIcon","todo"],"sources":["../../../../src/components/StepSequence/SpineStep.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { IStepSequenceStep } from \"./StepSequence\";\nimport {\n CheckIcon,\n CircleSlashIcon,\n ClockIcon,\n CloseIcon,\n EyeIcon,\n GitBranchIcon,\n GitCommitIcon,\n GitMergeIcon,\n GitPullRequestIcon,\n LockIcon,\n WarningIcon,\n WarningTriangleIcon,\n} from \"../Icons\";\n\n/** The fifteen states a source-code spine node can be in */\nexport type SpineState =\n | \"done\"\n | \"merged\"\n | \"committed\"\n | \"progress\"\n | \"review\"\n | \"active\"\n | \"queued\"\n | \"failed\"\n | \"warning\"\n | \"conflict\"\n | \"skipped\"\n | \"manual\"\n | \"locked\"\n | \"draft\"\n | \"todo\";\n\n/* Glyph colours: light on a filled step, the step's own tone on an outlined\n one — the component paints rings and lines, the caller paints glyphs. */\nconst ON_SOLID = \"var(--only-white)\";\nconst AMBER = \"var(--color-orange)\";\n\n/* Glyphs render at an even 12px: a 13px glyph in the 22px solid circle (or\n the 18px content box of an outlined one) leaves half-pixel margins, so the\n browser snaps it visibly off-centre — 12px keeps every margin a whole pixel\n and renders the 2-unit strokes of the 24-grid icons at exactly 1px. */\nconst GLYPH = 12;\n\n/**\n * The fifteen spine states as generic `StepSequence` steps — the single\n * source both the Spine State Explorer story and the app's source-code\n * spine render from.\n *\n * A connector takes the tone of the step it points into, so `connectorTone`\n * is only spelled out for a stage that has not been reached yet (queued /\n * manual / locked) — there the line stays the faint neutral grey.\n */\nexport const SPINE_STEP: Record<SpineState, IStepSequenceStep> = {\n done: {\n tone: \"success\",\n fill: \"solid\",\n icon: <CheckIcon fill={ON_SOLID} width={GLYPH} height={GLYPH} />,\n },\n merged: {\n tone: \"success\",\n fill: \"solid\",\n icon: <GitMergeIcon stroke={ON_SOLID} width={GLYPH} height={GLYPH} />,\n },\n committed: {\n tone: \"success\",\n fill: \"solid\",\n icon: <GitCommitIcon stroke={ON_SOLID} width={GLYPH} height={GLYPH} />,\n },\n progress: { tone: \"info\", fill: \"solid\", pulse: true },\n review: {\n tone: \"info\",\n fill: \"solid\",\n icon: <EyeIcon fill={ON_SOLID} width={GLYPH} height={GLYPH} />,\n },\n active: {\n tone: \"info\",\n fill: \"solid\",\n icon: <GitBranchIcon stroke={ON_SOLID} width={GLYPH} height={GLYPH} />,\n },\n queued: {\n tone: \"info\",\n fill: \"outline\",\n icon: (\n <ClockIcon\n fill=\"var(--color-progress-blue)\"\n width={GLYPH}\n height={GLYPH}\n />\n ),\n connectorTone: \"neutral\",\n },\n failed: {\n tone: \"danger\",\n fill: \"solid\",\n icon: <CloseIcon fill={ON_SOLID} width={GLYPH} height={GLYPH} />,\n },\n warning: {\n tone: \"warning\",\n fill: \"solid\",\n icon: <WarningIcon fill={ON_SOLID} width={GLYPH} height={GLYPH} />,\n },\n conflict: {\n tone: \"danger\",\n fill: \"solid\",\n icon: <WarningTriangleIcon fill={ON_SOLID} width={GLYPH} height={GLYPH} />,\n },\n skipped: {\n tone: \"neutral\",\n fill: \"solid\",\n icon: <CircleSlashIcon fill={ON_SOLID} width={GLYPH} height={GLYPH} />,\n },\n manual: {\n tone: \"warning\",\n fill: \"outline\",\n icon: <ClockIcon fill={AMBER} width={GLYPH} height={GLYPH} />,\n connectorTone: \"neutral\",\n },\n locked: {\n tone: \"warning\",\n fill: \"outline\",\n icon: <LockIcon fill={AMBER} width={GLYPH} height={GLYPH} />,\n connectorTone: \"neutral\",\n },\n draft: {\n tone: \"neutral\",\n fill: \"dashed\",\n icon: (\n <GitPullRequestIcon\n stroke=\"var(--color-theme-600)\"\n width={GLYPH}\n height={GLYPH}\n />\n ),\n },\n todo: { tone: \"neutral\", fill: \"outline\" },\n};\n"],"mappings":"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","ignoreList":[]}
package/dist/cjs/components/StepSequence/Styles.js CHANGED
@@ -9,7 +9,7 @@ var _BoxSizingStyle = require("../BoxSizingStyle");
9
9
  var _Trigger = require("../Trigger");
10
10
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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); }
11
11
  var StepPulse = (0, _styledComponents.keyframes)(["0%,100%{opacity:1;}50%{opacity:0.35;}"]);
12
- var StepSequenceStyle = (0, _styledComponents.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.BoxSizingStyle, StepPulse);
12
+ var StepSequenceStyle = (0, _styledComponents.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.BoxSizingStyle, StepPulse);
13
13
  var StyledStepSequenceTrigger = exports.StyledStepSequenceTrigger = (0, _styledComponents.default)(_Trigger.Trigger).withConfig({
14
14
  displayName: "Styles__StyledStepSequenceTrigger",
15
15
  componentId: "sc-hp7ywn-0"
package/dist/cjs/components/StepSequence/Styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_BoxSizingStyle","_Trigger","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StepPulse","keyframes","StepSequenceStyle","css","BoxSizingStyle","StyledStepSequenceTrigger","exports","styled","Trigger","withConfig","displayName","componentId","StyledStepSequence","div"],"sources":["../../../../src/components/StepSequence/Styles.ts"],"sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { Trigger } from \"../Trigger\";\n\nconst StepPulse = keyframes`\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.35;\n }\n`;\n\nconst StepSequenceStyle = css`\n ${BoxSizingStyle}\n\n display: inline-flex;\n align-items: center;\n padding: 6px 8px;\n\n /* A tone resolves to three roles: the surface a solid step is filled with,\n the ring an outlined step is drawn with and the connector line. Only\n neutral needs them to differ — its line stays the faint, unreached grey. */\n .c-step-sequence__step--success,\n .c-step-sequence__connector--success {\n --step-sequence-surface: var(--color-sucess-green);\n --step-sequence-ring: var(--color-sucess-green);\n --step-sequence-line: var(--color-sucess-green);\n }\n .c-step-sequence__step--info,\n .c-step-sequence__connector--info {\n --step-sequence-surface: var(--color-progress-blue);\n --step-sequence-ring: var(--color-progress-blue);\n --step-sequence-line: var(--color-progress-blue);\n }\n .c-step-sequence__step--warning,\n .c-step-sequence__connector--warning {\n --step-sequence-surface: var(--color-orange);\n --step-sequence-ring: var(--color-orange);\n --step-sequence-line: var(--color-orange);\n }\n .c-step-sequence__step--danger,\n .c-step-sequence__connector--danger {\n --step-sequence-surface: var(--red-alert);\n --step-sequence-ring: var(--red-alert);\n --step-sequence-line: var(--red-alert);\n }\n .c-step-sequence__step--neutral,\n .c-step-sequence__connector--neutral {\n --step-sequence-surface: var(--color-theme-500);\n --step-sequence-ring: var(--color-theme-400);\n --step-sequence-line: var(--color-theme-400);\n }\n\n .c-step-sequence__step {\n width: 22px;\n height: 22px;\n border-radius: 50%;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n\n svg {\n display: block;\n }\n }\n\n .c-step-sequence__step--solid {\n background: var(--step-sequence-surface);\n }\n .c-step-sequence__step--outline {\n background: transparent;\n border: 2px solid var(--step-sequence-ring);\n }\n .c-step-sequence__step--dashed {\n background: transparent;\n border: 2px dashed var(--step-sequence-ring);\n }\n\n .c-step-sequence__step--pulse > * {\n animation: ${StepPulse} 1.4s ease-in-out infinite;\n }\n\n .c-step-sequence__dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--step-sequence-surface);\n }\n .c-step-sequence__step--solid .c-step-sequence__dot {\n width: 7px;\n height: 7px;\n background: var(--only-white);\n }\n\n .c-step-sequence__connector {\n width: 13px;\n height: 2px;\n flex-shrink: 0;\n background: var(--step-sequence-line);\n }\n`;\n\nexport const StyledStepSequenceTrigger = styled(Trigger)`\n ${StepSequenceStyle}\n\n border-radius: 8px;\n transition: background-color 200ms ease;\n\n &:hover {\n background-color: var(--color-theme-200);\n }\n &:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 1px;\n }\n`;\nStyledStepSequenceTrigger.displayName = \"StyledStepSequenceTrigger\";\n\nexport const StyledStepSequence = styled.div`\n ${StepSequenceStyle}\n`;\nStyledStepSequence.displayName = \"StyledStepSequence\";\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,eAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAAqC,SAAAD,wBAAAI,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAN,uBAAA,YAAAA,wBAAAI,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,cAAAM,EAAA,IAAAd,CAAA,gBAAAc,EAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,EAAA,OAAAP,CAAA,IAAAD,CAAA,GAAAW,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAnB,CAAA,EAAAc,EAAA,OAAAP,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAM,EAAA,EAAAP,CAAA,IAAAC,CAAA,CAAAM,EAAA,IAAAd,CAAA,CAAAc,EAAA,WAAAN,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAErC,IAAMmB,SAAS,OAAGC,2BAAS,4CAQ1B;AAED,IAAMC,iBAAiB,OAAGC,qBAAG,k3DACzBC,8BAAc,EAoEDJ,SAAS,CAqBzB;AAEM,IAAMK,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAG,IAAAE,yBAAM,EAACC,gBAAO,CAAC,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mMACpDT,iBAAiB,CAYpB;AACDG,yBAAyB,CAACK,WAAW,GAAG,2BAA2B;AAE5D,IAAME,kBAAkB,GAAAN,OAAA,CAAAM,kBAAA,GAAGL,yBAAM,CAACM,GAAG,CAAAJ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aACxCT,iBAAiB,CACpB;AACDU,kBAAkB,CAACF,WAAW,GAAG,oBAAoB","ignoreList":[]}
1
+ {"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_BoxSizingStyle","_Trigger","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StepPulse","keyframes","StepSequenceStyle","css","BoxSizingStyle","StyledStepSequenceTrigger","exports","styled","Trigger","withConfig","displayName","componentId","StyledStepSequence","div"],"sources":["../../../../src/components/StepSequence/Styles.ts"],"sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { Trigger } from \"../Trigger\";\n\nconst StepPulse = keyframes`\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.35;\n }\n`;\n\nconst StepSequenceStyle = css`\n ${BoxSizingStyle}\n\n display: inline-flex;\n align-items: center;\n padding: 6px 8px;\n\n /* A tone resolves to three roles: the surface a solid step is filled with,\n the ring an outlined step is drawn with and the connector line. Only\n neutral needs them to differ — its line stays the faint, unreached grey. */\n .c-step-sequence__step--success,\n .c-step-sequence__connector--success {\n --step-sequence-surface: var(--color-sucess-green);\n --step-sequence-ring: var(--color-sucess-green);\n --step-sequence-line: var(--color-sucess-green);\n }\n .c-step-sequence__step--info,\n .c-step-sequence__connector--info {\n --step-sequence-surface: var(--color-progress-blue);\n --step-sequence-ring: var(--color-progress-blue);\n --step-sequence-line: var(--color-progress-blue);\n }\n .c-step-sequence__step--warning,\n .c-step-sequence__connector--warning {\n --step-sequence-surface: var(--color-orange);\n --step-sequence-ring: var(--color-orange);\n --step-sequence-line: var(--color-orange);\n }\n .c-step-sequence__step--danger,\n .c-step-sequence__connector--danger {\n --step-sequence-surface: var(--red-alert);\n --step-sequence-ring: var(--red-alert);\n --step-sequence-line: var(--red-alert);\n }\n .c-step-sequence__step--neutral,\n .c-step-sequence__connector--neutral {\n --step-sequence-surface: var(--color-theme-500);\n --step-sequence-ring: var(--color-theme-400);\n --step-sequence-line: var(--color-theme-400);\n }\n\n .c-step-sequence__step {\n width: 22px;\n height: 22px;\n border-radius: 50%;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n\n svg {\n display: block;\n }\n }\n\n .c-step-sequence__step--solid {\n background: var(--step-sequence-surface);\n }\n .c-step-sequence__step--outline {\n background: transparent;\n border: 2px solid var(--step-sequence-ring);\n }\n .c-step-sequence__step--dashed {\n background: transparent;\n border: 2px dashed var(--step-sequence-ring);\n }\n\n .c-step-sequence__step--pulse > * {\n animation: ${StepPulse} 1.4s ease-in-out infinite;\n }\n\n /* Dot sizes stay even: the free space around an odd-sized dot (7px in the\n 22px solid circle) is a half-pixel per side, which browsers snap visibly\n off-centre. */\n .c-step-sequence__dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--step-sequence-surface);\n }\n .c-step-sequence__step--solid .c-step-sequence__dot {\n width: 8px;\n height: 8px;\n background: var(--only-white);\n }\n\n .c-step-sequence__connector {\n width: 13px;\n height: 2px;\n flex-shrink: 0;\n background: var(--step-sequence-line);\n }\n`;\n\nexport const StyledStepSequenceTrigger = styled(Trigger)`\n ${StepSequenceStyle}\n\n border-radius: 8px;\n transition: background-color 200ms ease;\n\n &:hover {\n background-color: var(--color-theme-200);\n }\n &:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 1px;\n }\n`;\nStyledStepSequenceTrigger.displayName = \"StyledStepSequenceTrigger\";\n\nexport const StyledStepSequence = styled.div`\n ${StepSequenceStyle}\n`;\nStyledStepSequence.displayName = \"StyledStepSequence\";\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,eAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAAqC,SAAAD,wBAAAI,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAN,uBAAA,YAAAA,wBAAAI,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,cAAAM,EAAA,IAAAd,CAAA,gBAAAc,EAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,EAAA,OAAAP,CAAA,IAAAD,CAAA,GAAAW,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAnB,CAAA,EAAAc,EAAA,OAAAP,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAM,EAAA,EAAAP,CAAA,IAAAC,CAAA,CAAAM,EAAA,IAAAd,CAAA,CAAAc,EAAA,WAAAN,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAErC,IAAMmB,SAAS,OAAGC,2BAAS,4CAQ1B;AAED,IAAMC,iBAAiB,OAAGC,qBAAG,k3DACzBC,8BAAc,EAoEDJ,SAAS,CAwBzB;AAEM,IAAMK,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAG,IAAAE,yBAAM,EAACC,gBAAO,CAAC,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mMACpDT,iBAAiB,CAYpB;AACDG,yBAAyB,CAACK,WAAW,GAAG,2BAA2B;AAE5D,IAAME,kBAAkB,GAAAN,OAAA,CAAAM,kBAAA,GAAGL,yBAAM,CAACM,GAAG,CAAAJ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aACxCT,iBAAiB,CACpB;AACDU,kBAAkB,CAACF,WAAW,GAAG,oBAAoB","ignoreList":[]}
package/dist/cjs/components/StepSequence/index.js CHANGED
@@ -14,4 +14,15 @@ Object.keys(_StepSequence).forEach(function (key) {
14
14
  }
15
15
  });
16
16
  });
17
+ var _SpineStep = require("./SpineStep");
18
+ Object.keys(_SpineStep).forEach(function (key) {
19
+ if (key === "default" || key === "__esModule") return;
20
+ if (key in exports && exports[key] === _SpineStep[key]) return;
21
+ Object.defineProperty(exports, key, {
22
+ enumerable: true,
23
+ get: function get() {
24
+ return _SpineStep[key];
25
+ }
26
+ });
27
+ });
17
28
  //# sourceMappingURL=index.js.map
package/dist/cjs/components/StepSequence/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["_StepSequence","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sources":["../../../../src/components/StepSequence/index.ts"],"sourcesContent":["export * from \"./StepSequence\";\n"],"mappings":";;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,aAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,aAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAT,aAAA,CAAAK,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["_StepSequence","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_SpineStep"],"sources":["../../../../src/components/StepSequence/index.ts"],"sourcesContent":["export * from \"./StepSequence\";\nexport * from \"./SpineStep\";\n"],"mappings":";;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,aAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,aAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAT,aAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AACA,IAAAK,UAAA,GAAAT,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAO,UAAA,EAAAN,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAK,UAAA,CAAAL,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAC,UAAA,CAAAL,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
package/dist/esm/components/StepSequence/SpineStep.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ import { IStepSequenceStep } from "./StepSequence";
2
+ /** The fifteen states a source-code spine node can be in */
3
+ export type SpineState = "done" | "merged" | "committed" | "progress" | "review" | "active" | "queued" | "failed" | "warning" | "conflict" | "skipped" | "manual" | "locked" | "draft" | "todo";
4
+ /**
5
+ * The fifteen spine states as generic `StepSequence` steps — the single
6
+ * source both the Spine State Explorer story and the app's source-code
7
+ * spine render from.
8
+ *
9
+ * A connector takes the tone of the step it points into, so `connectorTone`
10
+ * is only spelled out for a stage that has not been reached yet (queued /
11
+ * manual / locked) — there the line stays the faint neutral grey.
12
+ */
13
+ export declare const SPINE_STEP: Record<SpineState, IStepSequenceStep>;
14
+ //# sourceMappingURL=SpineStep.d.ts.map
package/dist/esm/components/StepSequence/SpineStep.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SpineStep.d.ts","sourceRoot":"","sources":["../../../../src/components/StepSequence/SpineStep.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAgBnD,4DAA4D;AAC5D,MAAM,MAAM,UAAU,GAClB,MAAM,GACN,QAAQ,GACR,WAAW,GACX,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,UAAU,GACV,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,OAAO,GACP,MAAM,CAAC;AAaX;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,UAAU,EAAE,iBAAiB,CAmF5D,CAAC"}
package/dist/esm/components/StepSequence/SpineStep.js ADDED
@@ -0,0 +1,157 @@
1
+ import React from "react";
2
+ import { CheckIcon, CircleSlashIcon, ClockIcon, CloseIcon, EyeIcon, GitBranchIcon, GitCommitIcon, GitMergeIcon, GitPullRequestIcon, LockIcon, WarningIcon, WarningTriangleIcon } from "../Icons";
3
+
4
+ /** The fifteen states a source-code spine node can be in */
5
+
6
+ /* Glyph colours: light on a filled step, the step's own tone on an outlined
7
+ one — the component paints rings and lines, the caller paints glyphs. */
8
+ const ON_SOLID = "var(--only-white)";
9
+ const AMBER = "var(--color-orange)";
10
+
11
+ /* Glyphs render at an even 12px: a 13px glyph in the 22px solid circle (or
12
+ the 18px content box of an outlined one) leaves half-pixel margins, so the
13
+ browser snaps it visibly off-centre — 12px keeps every margin a whole pixel
14
+ and renders the 2-unit strokes of the 24-grid icons at exactly 1px. */
15
+ const GLYPH = 12;
16
+
17
+ /**
18
+ * The fifteen spine states as generic `StepSequence` steps — the single
19
+ * source both the Spine State Explorer story and the app's source-code
20
+ * spine render from.
21
+ *
22
+ * A connector takes the tone of the step it points into, so `connectorTone`
23
+ * is only spelled out for a stage that has not been reached yet (queued /
24
+ * manual / locked) — there the line stays the faint neutral grey.
25
+ */
26
+ export const SPINE_STEP = {
27
+ done: {
28
+ tone: "success",
29
+ fill: "solid",
30
+ icon: /*#__PURE__*/React.createElement(CheckIcon, {
31
+ fill: ON_SOLID,
32
+ width: GLYPH,
33
+ height: GLYPH
34
+ })
35
+ },
36
+ merged: {
37
+ tone: "success",
38
+ fill: "solid",
39
+ icon: /*#__PURE__*/React.createElement(GitMergeIcon, {
40
+ stroke: ON_SOLID,
41
+ width: GLYPH,
42
+ height: GLYPH
43
+ })
44
+ },
45
+ committed: {
46
+ tone: "success",
47
+ fill: "solid",
48
+ icon: /*#__PURE__*/React.createElement(GitCommitIcon, {
49
+ stroke: ON_SOLID,
50
+ width: GLYPH,
51
+ height: GLYPH
52
+ })
53
+ },
54
+ progress: {
55
+ tone: "info",
56
+ fill: "solid",
57
+ pulse: true
58
+ },
59
+ review: {
60
+ tone: "info",
61
+ fill: "solid",
62
+ icon: /*#__PURE__*/React.createElement(EyeIcon, {
63
+ fill: ON_SOLID,
64
+ width: GLYPH,
65
+ height: GLYPH
66
+ })
67
+ },
68
+ active: {
69
+ tone: "info",
70
+ fill: "solid",
71
+ icon: /*#__PURE__*/React.createElement(GitBranchIcon, {
72
+ stroke: ON_SOLID,
73
+ width: GLYPH,
74
+ height: GLYPH
75
+ })
76
+ },
77
+ queued: {
78
+ tone: "info",
79
+ fill: "outline",
80
+ icon: /*#__PURE__*/React.createElement(ClockIcon, {
81
+ fill: "var(--color-progress-blue)",
82
+ width: GLYPH,
83
+ height: GLYPH
84
+ }),
85
+ connectorTone: "neutral"
86
+ },
87
+ failed: {
88
+ tone: "danger",
89
+ fill: "solid",
90
+ icon: /*#__PURE__*/React.createElement(CloseIcon, {
91
+ fill: ON_SOLID,
92
+ width: GLYPH,
93
+ height: GLYPH
94
+ })
95
+ },
96
+ warning: {
97
+ tone: "warning",
98
+ fill: "solid",
99
+ icon: /*#__PURE__*/React.createElement(WarningIcon, {
100
+ fill: ON_SOLID,
101
+ width: GLYPH,
102
+ height: GLYPH
103
+ })
104
+ },
105
+ conflict: {
106
+ tone: "danger",
107
+ fill: "solid",
108
+ icon: /*#__PURE__*/React.createElement(WarningTriangleIcon, {
109
+ fill: ON_SOLID,
110
+ width: GLYPH,
111
+ height: GLYPH
112
+ })
113
+ },
114
+ skipped: {
115
+ tone: "neutral",
116
+ fill: "solid",
117
+ icon: /*#__PURE__*/React.createElement(CircleSlashIcon, {
118
+ fill: ON_SOLID,
119
+ width: GLYPH,
120
+ height: GLYPH
121
+ })
122
+ },
123
+ manual: {
124
+ tone: "warning",
125
+ fill: "outline",
126
+ icon: /*#__PURE__*/React.createElement(ClockIcon, {
127
+ fill: AMBER,
128
+ width: GLYPH,
129
+ height: GLYPH
130
+ }),
131
+ connectorTone: "neutral"
132
+ },
133
+ locked: {
134
+ tone: "warning",
135
+ fill: "outline",
136
+ icon: /*#__PURE__*/React.createElement(LockIcon, {
137
+ fill: AMBER,
138
+ width: GLYPH,
139
+ height: GLYPH
140
+ }),
141
+ connectorTone: "neutral"
142
+ },
143
+ draft: {
144
+ tone: "neutral",
145
+ fill: "dashed",
146
+ icon: /*#__PURE__*/React.createElement(GitPullRequestIcon, {
147
+ stroke: "var(--color-theme-600)",
148
+ width: GLYPH,
149
+ height: GLYPH
150
+ })
151
+ },
152
+ todo: {
153
+ tone: "neutral",
154
+ fill: "outline"
155
+ }
156
+ };
157
+ //# sourceMappingURL=SpineStep.js.map
package/dist/esm/components/StepSequence/SpineStep.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SpineStep.js","names":["React","CheckIcon","CircleSlashIcon","ClockIcon","CloseIcon","EyeIcon","GitBranchIcon","GitCommitIcon","GitMergeIcon","GitPullRequestIcon","LockIcon","WarningIcon","WarningTriangleIcon","ON_SOLID","AMBER","GLYPH","SPINE_STEP","done","tone","fill","icon","createElement","width","height","merged","stroke","committed","progress","pulse","review","active","queued","connectorTone","failed","warning","conflict","skipped","manual","locked","draft","todo"],"sources":["../../../../src/components/StepSequence/SpineStep.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { IStepSequenceStep } from \"./StepSequence\";\nimport {\n CheckIcon,\n CircleSlashIcon,\n ClockIcon,\n CloseIcon,\n EyeIcon,\n GitBranchIcon,\n GitCommitIcon,\n GitMergeIcon,\n GitPullRequestIcon,\n LockIcon,\n WarningIcon,\n WarningTriangleIcon,\n} from \"../Icons\";\n\n/** The fifteen states a source-code spine node can be in */\nexport type SpineState =\n | \"done\"\n | \"merged\"\n | \"committed\"\n | \"progress\"\n | \"review\"\n | \"active\"\n | \"queued\"\n | \"failed\"\n | \"warning\"\n | \"conflict\"\n | \"skipped\"\n | \"manual\"\n | \"locked\"\n | \"draft\"\n | \"todo\";\n\n/* Glyph colours: light on a filled step, the step's own tone on an outlined\n one — the component paints rings and lines, the caller paints glyphs. */\nconst ON_SOLID = \"var(--only-white)\";\nconst AMBER = \"var(--color-orange)\";\n\n/* Glyphs render at an even 12px: a 13px glyph in the 22px solid circle (or\n the 18px content box of an outlined one) leaves half-pixel margins, so the\n browser snaps it visibly off-centre — 12px keeps every margin a whole pixel\n and renders the 2-unit strokes of the 24-grid icons at exactly 1px. */\nconst GLYPH = 12;\n\n/**\n * The fifteen spine states as generic `StepSequence` steps — the single\n * source both the Spine State Explorer story and the app's source-code\n * spine render from.\n *\n * A connector takes the tone of the step it points into, so `connectorTone`\n * is only spelled out for a stage that has not been reached yet (queued /\n * manual / locked) — there the line stays the faint neutral grey.\n */\nexport const SPINE_STEP: Record<SpineState, IStepSequenceStep> = {\n done: {\n tone: \"success\",\n fill: \"solid\",\n icon: <CheckIcon fill={ON_SOLID} width={GLYPH} height={GLYPH} />,\n },\n merged: {\n tone: \"success\",\n fill: \"solid\",\n icon: <GitMergeIcon stroke={ON_SOLID} width={GLYPH} height={GLYPH} />,\n },\n committed: {\n tone: \"success\",\n fill: \"solid\",\n icon: <GitCommitIcon stroke={ON_SOLID} width={GLYPH} height={GLYPH} />,\n },\n progress: { tone: \"info\", fill: \"solid\", pulse: true },\n review: {\n tone: \"info\",\n fill: \"solid\",\n icon: <EyeIcon fill={ON_SOLID} width={GLYPH} height={GLYPH} />,\n },\n active: {\n tone: \"info\",\n fill: \"solid\",\n icon: <GitBranchIcon stroke={ON_SOLID} width={GLYPH} height={GLYPH} />,\n },\n queued: {\n tone: \"info\",\n fill: \"outline\",\n icon: (\n <ClockIcon\n fill=\"var(--color-progress-blue)\"\n width={GLYPH}\n height={GLYPH}\n />\n ),\n connectorTone: \"neutral\",\n },\n failed: {\n tone: \"danger\",\n fill: \"solid\",\n icon: <CloseIcon fill={ON_SOLID} width={GLYPH} height={GLYPH} />,\n },\n warning: {\n tone: \"warning\",\n fill: \"solid\",\n icon: <WarningIcon fill={ON_SOLID} width={GLYPH} height={GLYPH} />,\n },\n conflict: {\n tone: \"danger\",\n fill: \"solid\",\n icon: <WarningTriangleIcon fill={ON_SOLID} width={GLYPH} height={GLYPH} />,\n },\n skipped: {\n tone: \"neutral\",\n fill: \"solid\",\n icon: <CircleSlashIcon fill={ON_SOLID} width={GLYPH} height={GLYPH} />,\n },\n manual: {\n tone: \"warning\",\n fill: \"outline\",\n icon: <ClockIcon fill={AMBER} width={GLYPH} height={GLYPH} />,\n connectorTone: \"neutral\",\n },\n locked: {\n tone: \"warning\",\n fill: \"outline\",\n icon: <LockIcon fill={AMBER} width={GLYPH} height={GLYPH} />,\n connectorTone: \"neutral\",\n },\n draft: {\n tone: \"neutral\",\n fill: \"dashed\",\n icon: (\n <GitPullRequestIcon\n stroke=\"var(--color-theme-600)\"\n width={GLYPH}\n height={GLYPH}\n />\n ),\n },\n todo: { tone: \"neutral\", fill: \"outline\" },\n};\n"],"mappings":"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","ignoreList":[]}
package/dist/esm/components/StepSequence/Styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/StepSequence/Styles.ts"],"names":[],"mappings":"AA2GA,eAAO,MAAM,yBAAyB,uRAarC,CAAC;AAGF,eAAO,MAAM,kBAAkB,oEAE9B,CAAC"}
1
+ {"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/StepSequence/Styles.ts"],"names":[],"mappings":"AA8GA,eAAO,MAAM,yBAAyB,uRAarC,CAAC;AAGF,eAAO,MAAM,kBAAkB,oEAE9B,CAAC"}
package/dist/esm/components/StepSequence/Styles.js CHANGED
@@ -2,7 +2,7 @@ import styled, { css, keyframes } from "styled-components";
2
2
  import { BoxSizingStyle } from "../BoxSizingStyle";
3
3
  import { Trigger } from "../Trigger";
4
4
  const StepPulse = keyframes(["0%,100%{opacity:1;}50%{opacity:0.35;}"]);
5
- const StepSequenceStyle = 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);
5
+ const StepSequenceStyle = 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);
6
6
  export const StyledStepSequenceTrigger = styled(Trigger).withConfig({
7
7
  displayName: "Styles__StyledStepSequenceTrigger",
8
8
  componentId: "sc-hp7ywn-0"
package/dist/esm/components/StepSequence/Styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Styles.js","names":["styled","css","keyframes","BoxSizingStyle","Trigger","StepPulse","StepSequenceStyle","StyledStepSequenceTrigger","withConfig","displayName","componentId","StyledStepSequence","div"],"sources":["../../../../src/components/StepSequence/Styles.ts"],"sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { Trigger } from \"../Trigger\";\n\nconst StepPulse = keyframes`\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.35;\n }\n`;\n\nconst StepSequenceStyle = css`\n ${BoxSizingStyle}\n\n display: inline-flex;\n align-items: center;\n padding: 6px 8px;\n\n /* A tone resolves to three roles: the surface a solid step is filled with,\n the ring an outlined step is drawn with and the connector line. Only\n neutral needs them to differ — its line stays the faint, unreached grey. */\n .c-step-sequence__step--success,\n .c-step-sequence__connector--success {\n --step-sequence-surface: var(--color-sucess-green);\n --step-sequence-ring: var(--color-sucess-green);\n --step-sequence-line: var(--color-sucess-green);\n }\n .c-step-sequence__step--info,\n .c-step-sequence__connector--info {\n --step-sequence-surface: var(--color-progress-blue);\n --step-sequence-ring: var(--color-progress-blue);\n --step-sequence-line: var(--color-progress-blue);\n }\n .c-step-sequence__step--warning,\n .c-step-sequence__connector--warning {\n --step-sequence-surface: var(--color-orange);\n --step-sequence-ring: var(--color-orange);\n --step-sequence-line: var(--color-orange);\n }\n .c-step-sequence__step--danger,\n .c-step-sequence__connector--danger {\n --step-sequence-surface: var(--red-alert);\n --step-sequence-ring: var(--red-alert);\n --step-sequence-line: var(--red-alert);\n }\n .c-step-sequence__step--neutral,\n .c-step-sequence__connector--neutral {\n --step-sequence-surface: var(--color-theme-500);\n --step-sequence-ring: var(--color-theme-400);\n --step-sequence-line: var(--color-theme-400);\n }\n\n .c-step-sequence__step {\n width: 22px;\n height: 22px;\n border-radius: 50%;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n\n svg {\n display: block;\n }\n }\n\n .c-step-sequence__step--solid {\n background: var(--step-sequence-surface);\n }\n .c-step-sequence__step--outline {\n background: transparent;\n border: 2px solid var(--step-sequence-ring);\n }\n .c-step-sequence__step--dashed {\n background: transparent;\n border: 2px dashed var(--step-sequence-ring);\n }\n\n .c-step-sequence__step--pulse > * {\n animation: ${StepPulse} 1.4s ease-in-out infinite;\n }\n\n .c-step-sequence__dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--step-sequence-surface);\n }\n .c-step-sequence__step--solid .c-step-sequence__dot {\n width: 7px;\n height: 7px;\n background: var(--only-white);\n }\n\n .c-step-sequence__connector {\n width: 13px;\n height: 2px;\n flex-shrink: 0;\n background: var(--step-sequence-line);\n }\n`;\n\nexport const StyledStepSequenceTrigger = styled(Trigger)`\n ${StepSequenceStyle}\n\n border-radius: 8px;\n transition: background-color 200ms ease;\n\n &:hover {\n background-color: var(--color-theme-200);\n }\n &:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 1px;\n }\n`;\nStyledStepSequenceTrigger.displayName = \"StyledStepSequenceTrigger\";\n\nexport const StyledStepSequence = styled.div`\n ${StepSequenceStyle}\n`;\nStyledStepSequence.displayName = \"StyledStepSequence\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,EAAEC,SAAS,QAAQ,mBAAmB;AAE1D,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,OAAO,QAAQ,YAAY;AAEpC,MAAMC,SAAS,GAAGH,SAAS,2CAQ1B;AAED,MAAMI,iBAAiB,GAAGL,GAAG,i3DACzBE,cAAc,EAoEDE,SAAS,CAqBzB;AAED,OAAO,MAAME,yBAAyB,GAAGP,MAAM,CAACI,OAAO,CAAC,CAAAI,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mMACpDJ,iBAAiB,CAYpB;AACDC,yBAAyB,CAACE,WAAW,GAAG,2BAA2B;AAEnE,OAAO,MAAME,kBAAkB,GAAGX,MAAM,CAACY,GAAG,CAAAJ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aACxCJ,iBAAiB,CACpB;AACDK,kBAAkB,CAACF,WAAW,GAAG,oBAAoB","ignoreList":[]}
1
+ {"version":3,"file":"Styles.js","names":["styled","css","keyframes","BoxSizingStyle","Trigger","StepPulse","StepSequenceStyle","StyledStepSequenceTrigger","withConfig","displayName","componentId","StyledStepSequence","div"],"sources":["../../../../src/components/StepSequence/Styles.ts"],"sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { Trigger } from \"../Trigger\";\n\nconst StepPulse = keyframes`\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.35;\n }\n`;\n\nconst StepSequenceStyle = css`\n ${BoxSizingStyle}\n\n display: inline-flex;\n align-items: center;\n padding: 6px 8px;\n\n /* A tone resolves to three roles: the surface a solid step is filled with,\n the ring an outlined step is drawn with and the connector line. Only\n neutral needs them to differ — its line stays the faint, unreached grey. */\n .c-step-sequence__step--success,\n .c-step-sequence__connector--success {\n --step-sequence-surface: var(--color-sucess-green);\n --step-sequence-ring: var(--color-sucess-green);\n --step-sequence-line: var(--color-sucess-green);\n }\n .c-step-sequence__step--info,\n .c-step-sequence__connector--info {\n --step-sequence-surface: var(--color-progress-blue);\n --step-sequence-ring: var(--color-progress-blue);\n --step-sequence-line: var(--color-progress-blue);\n }\n .c-step-sequence__step--warning,\n .c-step-sequence__connector--warning {\n --step-sequence-surface: var(--color-orange);\n --step-sequence-ring: var(--color-orange);\n --step-sequence-line: var(--color-orange);\n }\n .c-step-sequence__step--danger,\n .c-step-sequence__connector--danger {\n --step-sequence-surface: var(--red-alert);\n --step-sequence-ring: var(--red-alert);\n --step-sequence-line: var(--red-alert);\n }\n .c-step-sequence__step--neutral,\n .c-step-sequence__connector--neutral {\n --step-sequence-surface: var(--color-theme-500);\n --step-sequence-ring: var(--color-theme-400);\n --step-sequence-line: var(--color-theme-400);\n }\n\n .c-step-sequence__step {\n width: 22px;\n height: 22px;\n border-radius: 50%;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n\n svg {\n display: block;\n }\n }\n\n .c-step-sequence__step--solid {\n background: var(--step-sequence-surface);\n }\n .c-step-sequence__step--outline {\n background: transparent;\n border: 2px solid var(--step-sequence-ring);\n }\n .c-step-sequence__step--dashed {\n background: transparent;\n border: 2px dashed var(--step-sequence-ring);\n }\n\n .c-step-sequence__step--pulse > * {\n animation: ${StepPulse} 1.4s ease-in-out infinite;\n }\n\n /* Dot sizes stay even: the free space around an odd-sized dot (7px in the\n 22px solid circle) is a half-pixel per side, which browsers snap visibly\n off-centre. */\n .c-step-sequence__dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--step-sequence-surface);\n }\n .c-step-sequence__step--solid .c-step-sequence__dot {\n width: 8px;\n height: 8px;\n background: var(--only-white);\n }\n\n .c-step-sequence__connector {\n width: 13px;\n height: 2px;\n flex-shrink: 0;\n background: var(--step-sequence-line);\n }\n`;\n\nexport const StyledStepSequenceTrigger = styled(Trigger)`\n ${StepSequenceStyle}\n\n border-radius: 8px;\n transition: background-color 200ms ease;\n\n &:hover {\n background-color: var(--color-theme-200);\n }\n &:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 1px;\n }\n`;\nStyledStepSequenceTrigger.displayName = \"StyledStepSequenceTrigger\";\n\nexport const StyledStepSequence = styled.div`\n ${StepSequenceStyle}\n`;\nStyledStepSequence.displayName = \"StyledStepSequence\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,EAAEC,SAAS,QAAQ,mBAAmB;AAE1D,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,OAAO,QAAQ,YAAY;AAEpC,MAAMC,SAAS,GAAGH,SAAS,2CAQ1B;AAED,MAAMI,iBAAiB,GAAGL,GAAG,i3DACzBE,cAAc,EAoEDE,SAAS,CAwBzB;AAED,OAAO,MAAME,yBAAyB,GAAGP,MAAM,CAACI,OAAO,CAAC,CAAAI,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mMACpDJ,iBAAiB,CAYpB;AACDC,yBAAyB,CAACE,WAAW,GAAG,2BAA2B;AAEnE,OAAO,MAAME,kBAAkB,GAAGX,MAAM,CAACY,GAAG,CAAAJ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aACxCJ,iBAAiB,CACpB;AACDK,kBAAkB,CAACF,WAAW,GAAG,oBAAoB","ignoreList":[]}
package/dist/esm/components/StepSequence/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export * from "./StepSequence";
2
+ export * from "./SpineStep";
2
3
  //# sourceMappingURL=index.d.ts.map
package/dist/esm/components/StepSequence/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/StepSequence/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/StepSequence/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC"}
package/dist/esm/components/StepSequence/index.js CHANGED
@@ -1,2 +1,3 @@
1
1
  export * from "./StepSequence";
2
+ export * from "./SpineStep";
2
3
  //# sourceMappingURL=index.js.map
package/dist/esm/components/StepSequence/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/StepSequence/index.ts"],"sourcesContent":["export * from \"./StepSequence\";\n"],"mappings":"AAAA,cAAc,gBAAgB","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/StepSequence/index.ts"],"sourcesContent":["export * from \"./StepSequence\";\nexport * from \"./SpineStep\";\n"],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,aAAa","ignoreList":[]}