@trsys-tech/matrix-library 1.1.3 → 1.1.5
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.
package/dist/timeline.es.js
CHANGED
|
@@ -1,182 +1,328 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import
|
|
3
|
-
import { cn as
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
import { jsxs as a, jsx as e, Fragment as B } from "react/jsx-runtime";
|
|
2
|
+
import k, { useMemo as b } from "react";
|
|
3
|
+
import { cn as f } from "./utils.es.js";
|
|
4
|
+
import { Skeleton as r } from "./skeleton.es.js";
|
|
5
|
+
const $ = ({ item: m, color: d, size: x }) => {
|
|
6
|
+
const s = m.status ?? "pending";
|
|
7
|
+
return /* @__PURE__ */ a(
|
|
8
|
+
"span",
|
|
9
|
+
{
|
|
10
|
+
className: "mtx-block mtx-size-5 data-[size=sm]:mtx-size-4 data-[size=lg]:mtx-size-6",
|
|
11
|
+
"data-size": x,
|
|
12
|
+
"data-status": s,
|
|
13
|
+
style: { color: d },
|
|
14
|
+
children: [
|
|
15
|
+
/* @__PURE__ */ a(
|
|
16
|
+
"svg",
|
|
17
|
+
{
|
|
18
|
+
viewBox: "0 0 24 24",
|
|
19
|
+
"aria-hidden": "true",
|
|
20
|
+
focusable: "false",
|
|
21
|
+
className: "mtx-block mtx-size-full mtx-fill-none mtx-stroke-current mtx-stroke-[1.25] mtx-stroke-linecap-round mtx-stroke-linejoin-round",
|
|
22
|
+
children: [
|
|
23
|
+
/* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "10.5", className: "mtx-fill-background" }),
|
|
24
|
+
s === "completed" && /* @__PURE__ */ e("path", { d: "m7 12 3 3 7-7" }),
|
|
25
|
+
s === "error" && /* @__PURE__ */ e("path", { d: "m8 8 8 8m0-8-8 8" }),
|
|
26
|
+
s === "active" && /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "6", fill: "currentColor", stroke: "none" })
|
|
27
|
+
]
|
|
28
|
+
}
|
|
29
|
+
),
|
|
30
|
+
/* @__PURE__ */ e("span", { className: "mtx-sr-only", children: m.statusLabel ?? s })
|
|
31
|
+
]
|
|
32
|
+
}
|
|
33
|
+
);
|
|
34
|
+
}, D = ({ items: m, visibleBranches: d, superRow: x, markerRow: s, size: g }) => {
|
|
35
|
+
const z = b(() => g === "sm" ? "M1" : g === "lg" ? "M3" : "M2", [g]);
|
|
36
|
+
return /* @__PURE__ */ a(B, { children: [
|
|
37
|
+
m.map((n, i) => /* @__PURE__ */ a(
|
|
38
|
+
"li",
|
|
9
39
|
{
|
|
10
|
-
|
|
40
|
+
className: "mtx-relative mtx-grid mtx-min-w-0 mtx-row-span-full mtx-grid-rows-[subgrid]",
|
|
41
|
+
style: { gridColumn: i + 1 },
|
|
11
42
|
"aria-hidden": "true",
|
|
12
|
-
|
|
13
|
-
className: "mtx-block mtx-size-full mtx-fill-none mtx-stroke-current mtx-stroke-[1.25] mtx-stroke-linecap-round mtx-stroke-linejoin-round",
|
|
43
|
+
"data-slot": "timeline-skeleton-item",
|
|
14
44
|
children: [
|
|
15
|
-
/* @__PURE__ */
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
45
|
+
/* @__PURE__ */ a("div", { className: "mtx-min-h-8 mtx-self-end mtx-pb-2 mtx-pt-1 mtx-pr-3", style: { gridRow: x }, children: [
|
|
46
|
+
/* @__PURE__ */ e(r, { "aria-hidden": "true", className: "mtx-h-3 mtx-w-14" }),
|
|
47
|
+
/* @__PURE__ */ e(r, { "aria-hidden": "true", className: "mtx-h-2 mtx-w-16 mtx-mt-1" })
|
|
48
|
+
] }),
|
|
49
|
+
i > 0 && /* @__PURE__ */ e(
|
|
50
|
+
"span",
|
|
51
|
+
{
|
|
52
|
+
className: "mtx-absolute mtx-top-2.5 group-data-[size=sm]:mtx-top-2 group-data-[size=lg]:mtx-top-3 mtx-w-[calc(100%-20px)] mtx-left-[calc(-100%+20px)] group-data-[size=sm]:mtx-w-[calc(100%-16px)] group-data-[size=sm]:mtx-left-[calc(-100%+16px)] group-data-[size=lg]:mtx-w-[calc(100%-24px)] group-data-[size=lg]:mtx-left-[calc(-100%+24px)] mtx-z-10 mtx-h-0.5 mtx-bg-primary/10 mtx-animate-pulse",
|
|
53
|
+
style: { gridRow: s }
|
|
54
|
+
}
|
|
55
|
+
),
|
|
56
|
+
/* @__PURE__ */ e(
|
|
57
|
+
r,
|
|
58
|
+
{
|
|
59
|
+
className: "mtx-z-20 mtx-rounded-full mtx-size-5 group-data-[size=sm]:mtx-size-4 group-data-[size=lg]:mtx-size-6",
|
|
60
|
+
style: { gridRow: s },
|
|
61
|
+
"aria-hidden": "true"
|
|
62
|
+
}
|
|
63
|
+
),
|
|
64
|
+
/* @__PURE__ */ a("div", { className: "mtx-pt-1 mtx-pr-3", style: { gridRow: s + 1 }, children: [
|
|
65
|
+
/* @__PURE__ */ e(r, { "aria-hidden": "true", className: "mtx-h-2 mtx-w-16" }),
|
|
66
|
+
/* @__PURE__ */ e(r, { "aria-hidden": "true", className: "mtx-h-2 mtx-w-12 mtx-mt-1" })
|
|
67
|
+
] }),
|
|
68
|
+
/* @__PURE__ */ e("div", { className: "mtx-pr-3 mtx-pt-5", style: { gridRow: s + 2 }, children: /* @__PURE__ */ e(r, { "aria-hidden": "true", className: "mtx-h-2 mtx-w-16" }) })
|
|
19
69
|
]
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
r != null && /* @__PURE__ */ e("div", { id: p, className: "mtx-mb-4 mtx-text-sm mtx-font-bold", children: r }),
|
|
39
|
-
/* @__PURE__ */ e(
|
|
40
|
-
"div",
|
|
41
|
-
{
|
|
42
|
-
className: "mtx-overflow-x-auto mtx-p-0.5 focus-visible:mtx-outline-2 focus-visible:mtx-outline-offset-2 focus-visible:mtx-outline-[var(--timeline-active)]",
|
|
43
|
-
role: "region",
|
|
44
|
-
"aria-label": "Timeline",
|
|
45
|
-
tabIndex: 0,
|
|
46
|
-
children: /* @__PURE__ */ o(
|
|
47
|
-
"ol",
|
|
70
|
+
},
|
|
71
|
+
`skeleton-item-${n.id}`
|
|
72
|
+
)),
|
|
73
|
+
d.map(({ branch: n, index: i }, u) => /* @__PURE__ */ a(
|
|
74
|
+
"li",
|
|
75
|
+
{
|
|
76
|
+
className: "mtx-pointer-events-none mtx-grid mtx-min-w-0 mtx-row-span-full mtx-grid-cols-[subgrid] mtx-grid-rows-[subgrid]",
|
|
77
|
+
style: { gridColumn: `${i + 1} / -1` },
|
|
78
|
+
"aria-hidden": "true",
|
|
79
|
+
"data-slot": "timeline-skeleton-branch",
|
|
80
|
+
children: [
|
|
81
|
+
/* @__PURE__ */ a("div", { className: "mtx-col-[-2_/_-1] mtx-self-end mtx-pb-2", style: { gridRow: u * 2 + 1 }, children: [
|
|
82
|
+
/* @__PURE__ */ e(r, { "aria-hidden": "true", className: "mtx-h-3 mtx-w-14" }),
|
|
83
|
+
/* @__PURE__ */ e(r, { "aria-hidden": "true", className: "mtx-h-2 mtx-w-16 mtx-mt-1" }),
|
|
84
|
+
/* @__PURE__ */ e(r, { "aria-hidden": "true", className: "mtx-h-2 mtx-w-16 mtx-mt-1" })
|
|
85
|
+
] }),
|
|
86
|
+
/* @__PURE__ */ e(
|
|
87
|
+
"div",
|
|
48
88
|
{
|
|
49
|
-
className: "mtx-
|
|
50
|
-
"aria-labelledby": r != null ? p : void 0,
|
|
51
|
-
"aria-label": r == null ? "Timeline steps" : void 0,
|
|
89
|
+
className: "mtx-relative mtx-col-[1_/_-1] mtx-mb-[9px] group-data-[size=sm]:mtx-mb-[7px] group-data-[size=lg]:mtx-mb-[11px] mtx-ml-3 mtx-mt-2.5 group-data-[size=sm]:mtx-mt-2 group-data-[size=lg]:mtx-mt-3 mtx-overflow-visible mtx-fill-none mtx-stroke-2 mtx-stroke-current mtx-z-[-1]",
|
|
52
90
|
style: {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
91
|
+
gridRow: `${u * 2 + 2} / ${s + 1}`,
|
|
92
|
+
width: `calc(100% - 100% / ${m.length - i})`,
|
|
93
|
+
color: "oklch(var(--mtx-primary) / 0.1)"
|
|
56
94
|
},
|
|
57
|
-
children:
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
95
|
+
children: /* @__PURE__ */ e("svg", { focusable: "false", viewBox: "0 0 100 100", preserveAspectRatio: "none", className: "mtx-absolute mtx-size-full mtx-overflow-visible", children: /* @__PURE__ */ e(
|
|
96
|
+
"path",
|
|
97
|
+
{
|
|
98
|
+
d: `${z} 100 H${45 / (m.length - i - 1)} L${80 / (m.length - i - 1)} 0 H97`,
|
|
99
|
+
vectorEffect: "non-scaling-stroke"
|
|
100
|
+
}
|
|
101
|
+
) })
|
|
102
|
+
}
|
|
103
|
+
),
|
|
104
|
+
/* @__PURE__ */ e(
|
|
105
|
+
r,
|
|
106
|
+
{
|
|
107
|
+
className: "mtx-col-[-2_/_-1] mtx-z-[2] mtx-rounded-full mtx-size-5 group-data-[size=sm]:mtx-size-4 group-data-[size=lg]:mtx-size-6",
|
|
108
|
+
style: { gridRow: u * 2 + 2 },
|
|
109
|
+
"aria-hidden": "true"
|
|
110
|
+
}
|
|
111
|
+
)
|
|
112
|
+
]
|
|
113
|
+
},
|
|
114
|
+
`skeleton-branch-${n.id}`
|
|
115
|
+
))
|
|
116
|
+
] });
|
|
117
|
+
}, H = k.forwardRef(
|
|
118
|
+
({
|
|
119
|
+
items: m,
|
|
120
|
+
branches: d = [],
|
|
121
|
+
title: x,
|
|
122
|
+
loading: s = !1,
|
|
123
|
+
activeColor: g,
|
|
124
|
+
completedColor: z,
|
|
125
|
+
errorColor: n,
|
|
126
|
+
inactiveColor: i,
|
|
127
|
+
minItemWidth: u = 112,
|
|
128
|
+
size: c = "md",
|
|
129
|
+
className: R,
|
|
130
|
+
style: _,
|
|
131
|
+
...T
|
|
132
|
+
}, C) => {
|
|
133
|
+
const N = k.useId(), v = b(
|
|
134
|
+
() => d.flatMap((t) => {
|
|
135
|
+
const l = m.findIndex((o) => o.id === t.from);
|
|
136
|
+
return l >= 0 && l < m.length - 1 ? [{ branch: t, index: l }] : [];
|
|
137
|
+
}),
|
|
138
|
+
[d, m]
|
|
139
|
+
), w = v.length * 2 + 1, p = w + 1, y = (t) => t.color ?? `var(--timeline-${t.status ?? "pending"})`, M = {
|
|
140
|
+
"--timeline-active": g ?? "oklch(var(--mtx-primary))",
|
|
141
|
+
"--timeline-completed": z ?? "oklch(var(--mtx-success))",
|
|
142
|
+
"--timeline-error": n ?? "oklch(var(--mtx-danger))",
|
|
143
|
+
"--timeline-pending": i ?? "oklch(var(--mtx-gray-400))",
|
|
144
|
+
..._
|
|
145
|
+
}, S = b(() => {
|
|
146
|
+
const t = v.length;
|
|
147
|
+
switch (c) {
|
|
148
|
+
case "sm":
|
|
149
|
+
return `${"auto 16px ".repeat(t)}auto 16px auto auto`;
|
|
150
|
+
case "lg":
|
|
151
|
+
return `${"auto 24px ".repeat(t)}auto 24px auto auto`;
|
|
152
|
+
default:
|
|
153
|
+
return `${"auto 20px ".repeat(t)}auto 20px auto auto`;
|
|
154
|
+
}
|
|
155
|
+
}, [c, v.length]);
|
|
156
|
+
return /* @__PURE__ */ a(
|
|
157
|
+
"div",
|
|
158
|
+
{
|
|
159
|
+
...T,
|
|
160
|
+
ref: C,
|
|
161
|
+
className: f("mtx-group mtx-text-foreground mtx-text-xs data-[size=sm]:mtx-text-ss data-[size=lg]:mtx-text-sm", R),
|
|
162
|
+
"data-size": c,
|
|
163
|
+
style: M,
|
|
164
|
+
"aria-busy": s || void 0,
|
|
165
|
+
children: [
|
|
166
|
+
x != null && /* @__PURE__ */ e("div", { id: N, className: "mtx-mb-4 mtx-text-sm group-data-[size=sm]:mtx-text-xs group-data-[size=lg]:mtx-text-lg mtx-font-bold", children: x }),
|
|
167
|
+
/* @__PURE__ */ e(
|
|
168
|
+
"div",
|
|
169
|
+
{
|
|
170
|
+
className: "mtx-overflow-x-auto mtx-p-0.5 focus-visible:mtx-outline-2 focus-visible:mtx-outline-offset-2 focus-visible:mtx-outline-[var(--timeline-active)]",
|
|
171
|
+
role: "region",
|
|
172
|
+
"aria-label": "Timeline",
|
|
173
|
+
tabIndex: 0,
|
|
174
|
+
children: /* @__PURE__ */ a(
|
|
175
|
+
"ol",
|
|
176
|
+
{
|
|
177
|
+
className: "mtx-m-0 mtx-grid mtx-list-none mtx-isolate mtx-p-0",
|
|
178
|
+
"aria-labelledby": x != null ? N : void 0,
|
|
179
|
+
"aria-label": x == null ? "Timeline steps" : void 0,
|
|
180
|
+
"data-loading": s || void 0,
|
|
181
|
+
style: {
|
|
182
|
+
gridTemplateColumns: `repeat(${Math.max(1, m.length)}, minmax(0, 1fr))`,
|
|
183
|
+
gridTemplateRows: S,
|
|
184
|
+
minWidth: m.length * (Number.isFinite(u) ? Math.max(48, u) : 112)
|
|
185
|
+
},
|
|
186
|
+
children: [
|
|
187
|
+
s && /* @__PURE__ */ e(D, { items: m, visibleBranches: v, superRow: w, markerRow: p, size: c }),
|
|
188
|
+
!s && m.map((t, l) => {
|
|
189
|
+
const o = m[l - 1], h = t.connectorColor === !1 ? void 0 : t.connectorColor ?? (o?.status === "completed" && t.status !== "pending" && t.status !== void 0 ? y(o) : void 0);
|
|
190
|
+
return /* @__PURE__ */ a(
|
|
191
|
+
"li",
|
|
192
|
+
{
|
|
193
|
+
className: "mtx-relative mtx-grid mtx-min-w-0 mtx-row-span-full mtx-grid-rows-[subgrid] ",
|
|
194
|
+
style: { gridColumn: l + 1 },
|
|
195
|
+
"aria-current": t.status === "active" ? "step" : void 0,
|
|
196
|
+
children: [
|
|
197
|
+
/* @__PURE__ */ a(
|
|
198
|
+
"div",
|
|
148
199
|
{
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
200
|
+
className: "mtx-min-h-8 mtx-break-words mtx-self-end mtx-pb-2 mtx-mt-1 mtx-pr-3 mtx-text-ss group-data-[size=sm]:mtx-text-[0.5rem] group-data-[size=sm]:mtx-leading-3 group-data-[size=lg]:mtx-text-xs mtx-text-muted-foreground empty:mtx-p-0",
|
|
201
|
+
style: { gridRow: w },
|
|
202
|
+
children: [
|
|
203
|
+
t.superTitle != null && /* @__PURE__ */ e("div", { children: t.superTitle }),
|
|
204
|
+
t.superSubtitle != null && /* @__PURE__ */ e("div", { className: "mtx-font-semibold", children: t.superSubtitle })
|
|
205
|
+
]
|
|
206
|
+
}
|
|
207
|
+
),
|
|
208
|
+
l > 0 && /* @__PURE__ */ e(
|
|
209
|
+
"span",
|
|
210
|
+
{
|
|
211
|
+
"aria-hidden": "true",
|
|
212
|
+
className: "mtx-absolute mtx-top-2.5 group-data-[size=sm]:mtx-top-2 group-data-[size=lg]:mtx-top-3 mtx-left-[calc(-100%+12px)] mtx-z-10 mtx-h-0.5 mtx-w-full mtx-bg-[var(--timeline-pending)]",
|
|
213
|
+
style: { gridRow: p, backgroundColor: h }
|
|
214
|
+
}
|
|
215
|
+
),
|
|
216
|
+
/* @__PURE__ */ e(
|
|
217
|
+
"div",
|
|
218
|
+
{
|
|
219
|
+
className: "mtx-z-20 mtx-size-5 group-data-[size=sm]:mtx-size-4 group-data-[size=lg]:mtx-size-6",
|
|
220
|
+
style: { gridRow: p },
|
|
221
|
+
children: /* @__PURE__ */ e($, { item: t, color: y(t), size: c })
|
|
222
|
+
}
|
|
223
|
+
),
|
|
224
|
+
/* @__PURE__ */ a("div", { className: "mtx-break-words mtx-pt-1 mtx-pr-3 mtx-leading-[1.4]", style: { gridRow: p + 1 }, children: [
|
|
225
|
+
/* @__PURE__ */ e("div", { className: f("mtx-font-medium", (t.status ?? "pending") === "pending" && "mtx-text-text-400"), children: t.label }),
|
|
226
|
+
t.subData != null && /* @__PURE__ */ e("div", { className: "mtx-mt-0.5 mtx-text-ss group-data-[size=sm]:mtx-text-[0.5rem] group-data-[size=sm]:mtx-leading-3 group-data-[size=lg]:mtx-text-xs", children: t.subData })
|
|
227
|
+
] }),
|
|
228
|
+
/* @__PURE__ */ e(
|
|
229
|
+
"div",
|
|
230
|
+
{
|
|
231
|
+
className: "mtx-break-words mtx-pr-3 mtx-pt-5 mtx-text-ss group-data-[size=sm]:mtx-text-[0.5rem] group-data-[size=sm]:mtx-leading-3 group-data-[size=lg]:mtx-text-xs mtx-font-medium mtx-text-muted-foreground empty:mtx-p-0",
|
|
232
|
+
style: { gridRow: p + 2 },
|
|
233
|
+
children: t.footer
|
|
234
|
+
}
|
|
235
|
+
)
|
|
236
|
+
]
|
|
237
|
+
},
|
|
238
|
+
t.id
|
|
239
|
+
);
|
|
240
|
+
}),
|
|
241
|
+
!s && v.map(({ branch: t, index: l }, o) => {
|
|
242
|
+
const h = t.active ? t.activeColor ?? t.color ?? n ?? "var(--timeline-error)" : "var(--timeline-pending)";
|
|
243
|
+
return /* @__PURE__ */ a(
|
|
244
|
+
"li",
|
|
245
|
+
{
|
|
246
|
+
className: f(
|
|
247
|
+
"mtx-pointer-events-none mtx-grid mtx-min-w-0 mtx-row-span-full mtx-grid-cols-[subgrid] mtx-grid-rows-[subgrid]",
|
|
248
|
+
t.active && "mtx-z-10"
|
|
249
|
+
),
|
|
250
|
+
"data-active": t.active || void 0,
|
|
251
|
+
style: { gridColumn: `${l + 1} / -1` },
|
|
252
|
+
"aria-current": t.status === "active" ? "step" : void 0,
|
|
253
|
+
children: [
|
|
254
|
+
/* @__PURE__ */ a("span", { className: "mtx-sr-only", children: [
|
|
255
|
+
"Branch from ",
|
|
256
|
+
m[l].label,
|
|
257
|
+
": "
|
|
258
|
+
] }),
|
|
259
|
+
/* @__PURE__ */ a(
|
|
260
|
+
"div",
|
|
261
|
+
{
|
|
262
|
+
className: "mtx-pointer-events-auto mtx-col-[-2_/_-1] mtx-self-end mtx-break-words mtx-pb-2",
|
|
263
|
+
style: { gridRow: o * 2 + 1, color: t.active ? h : void 0 },
|
|
264
|
+
children: [
|
|
265
|
+
t.superTitle != null && /* @__PURE__ */ e("div", { className: "mtx-break-words mtx-text-ss group-data-[size=sm]:mtx-text-[0.5rem] group-data-[size=sm]:mtx-leading-3 group-data-[size=lg]:mtx-text-xs mtx-text-muted-foreground", children: t.superTitle }),
|
|
266
|
+
t.superSubtitle != null && /* @__PURE__ */ e("div", { className: "mtx-break-words mtx-pb-2 mtx-pr-3 mtx-text-ss group-data-[size=sm]:mtx-text-[0.5rem] group-data-[size=sm]:mtx-leading-3 group-data-[size=lg]:mtx-text-xs mtx-font-semibold mtx-text-muted-foreground", children: t.superSubtitle }),
|
|
267
|
+
/* @__PURE__ */ e("div", { className: f("mtx-font-medium", (t.status ?? "pending") === "pending" && "mtx-text-text-400"), children: t.label }),
|
|
268
|
+
t.subData != null && /* @__PURE__ */ e("div", { className: "mtx-mt-0.5 mtx-text-ss group-data-[size=sm]:mtx-text-[0.5rem] group-data-[size=sm]:mtx-leading-3 group-data-[size=lg]:mtx-text-xs", children: t.subData }),
|
|
269
|
+
t.footer != null && /* @__PURE__ */ e("div", { className: "mtx-break-words mtx-pr-3 mtx-pt-1 mtx-text-ss group-data-[size=sm]:mtx-text-[0.5rem] group-data-[size=sm]:mtx-leading-3 group-data-[size=lg]:mtx-text-xs mtx-font-bold mtx-text-muted-foreground", children: t.footer })
|
|
270
|
+
]
|
|
271
|
+
}
|
|
272
|
+
),
|
|
273
|
+
/* @__PURE__ */ e(
|
|
274
|
+
"div",
|
|
275
|
+
{
|
|
276
|
+
className: "mtx-relative mtx-col-[1_/_-1] mtx-mb-[9px] group-data-[size=sm]:mtx-mb-[7px] group-data-[size=lg]:mtx-mb-[11px] mtx-ml-3 mtx-mt-2.5 group-data-[size=sm]:mtx-mt-2 group-data-[size=lg]:mtx-mt-3 mtx-overflow-visible mtx-fill-none mtx-stroke-2 mtx-stroke-current mtx-z-[-1]",
|
|
277
|
+
"aria-hidden": "true",
|
|
278
|
+
style: {
|
|
279
|
+
gridRow: `${o * 2 + 2} / ${p + 1}`,
|
|
280
|
+
width: `calc(100% - 100% / ${m.length - l})`,
|
|
281
|
+
color: h
|
|
282
|
+
},
|
|
153
283
|
children: /* @__PURE__ */ e(
|
|
154
|
-
"
|
|
284
|
+
"svg",
|
|
155
285
|
{
|
|
156
|
-
|
|
157
|
-
|
|
286
|
+
focusable: "false",
|
|
287
|
+
viewBox: "0 0 100 100",
|
|
288
|
+
preserveAspectRatio: "none",
|
|
289
|
+
className: "mtx-absolute mtx-size-full mtx-overflow-visible",
|
|
290
|
+
children: /* @__PURE__ */ e(
|
|
291
|
+
"path",
|
|
292
|
+
{
|
|
293
|
+
d: `M0 100 H${45 / (m.length - l - 1)} L${80 / (m.length - l - 1)} 0 H100`,
|
|
294
|
+
vectorEffect: "non-scaling-stroke"
|
|
295
|
+
}
|
|
296
|
+
)
|
|
158
297
|
}
|
|
159
298
|
)
|
|
160
299
|
}
|
|
300
|
+
),
|
|
301
|
+
/* @__PURE__ */ e(
|
|
302
|
+
"div",
|
|
303
|
+
{
|
|
304
|
+
className: "mtx-col-[-2_/_-1] mtx-z-[2] mtx-size-5 group-data-[size=sm]:mtx-size-4 group-data-[size=lg]:mtx-size-6",
|
|
305
|
+
style: { gridRow: o * 2 + 2 },
|
|
306
|
+
children: /* @__PURE__ */ e($, { item: t, color: h, size: c })
|
|
307
|
+
}
|
|
161
308
|
)
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
]
|
|
309
|
+
]
|
|
310
|
+
},
|
|
311
|
+
`branch-${t.id}`
|
|
312
|
+
);
|
|
313
|
+
})
|
|
314
|
+
]
|
|
315
|
+
}
|
|
316
|
+
)
|
|
171
317
|
}
|
|
172
318
|
)
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
319
|
+
]
|
|
320
|
+
}
|
|
321
|
+
);
|
|
176
322
|
}
|
|
177
323
|
);
|
|
178
|
-
|
|
324
|
+
H.displayName = "Timeline";
|
|
179
325
|
export {
|
|
180
|
-
|
|
326
|
+
H as Timeline
|
|
181
327
|
};
|
|
182
328
|
//# sourceMappingURL=timeline.es.js.map
|