@acronis-platform/ui-react 3.0.0 → 4.1.0

package/dist/components/ui/timeline/timeline.js

@@ -1,239 +1,161 @@
-import { jsxs as c, jsx as n } from "react/jsx-runtime";
-import * as r from "react";
-import { ChevronDownIcon as W } from "@acronis-platform/icons-react/stroke-mono";
-import { cva as X } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { cn as O } from "../../../lib/utils.js";
-import { Avatar as Y, AvatarFallback as Z } from "../avatar/avatar.js";
-import { Card as ee } from "../card/card.js";
-import { ButtonIcon as ae } from "../button-icon/button-icon.js";
-const G = "var(--ui-timeline-connector-color)", te = "var(--ui-timeline-gap)", p = "var(--ui-avatar-global-avatar-size)", P = "calc(var(--ui-button-icon-global-container-height) + var(--ui-gap-8))", V = r.createContext({
-  variant: "default"
-}), _ = r.createContext(null), M = (m, u) => String(m.key ?? u), ne = X("flex flex-col", {
-  variants: {
-    variant: {
-      default: "",
-      tree: ""
-    }
-  },
-  defaultVariants: {
-    variant: "default"
-  }
-}), D = r.forwardRef(
-  ({ className: m, variant: u, children: g, ...T }, C) => {
-    const o = u ?? "default", k = r.useMemo(() => ({ variant: o }), [o]), [$, f] = r.useState(
-      {}
-    ), h = r.Children.toArray(g).filter(
-      r.isValidElement
-    ), y = (e) => {
-      var a;
-      return ((a = h[e]) == null ? void 0 : a.props.level) ?? 1;
-    }, z = (e) => e + 1 < h.length && y(e + 1) > y(e), d = [];
-    let x = null;
-    h.forEach((e, a) => {
-      const t = e.props.level ?? 1;
-      if (x !== null && t > x) return;
-      x = null;
-      const v = e.props.expanded !== void 0, s = v ? !!e.props.expanded : $[M(e, a)] ?? e.props.defaultExpanded ?? !0, i = o === "tree" && z(a);
-      i && !s && (x = t), d.push({
-        element: e,
-        key: M(e, a),
-        level: t,
-        expanded: s,
-        isControlled: v,
-        hasToggle: i
-      });
-    });
-    const E = (e) => {
-      const a = d[e];
-      if (a == null || a.level <= 1) return !1;
-      const t = d[e - 1];
-      return a.element.props.branchStart ?? (t != null && a.level > t.level);
-    }, b = d.map((e, a) => {
-      const t = d[a + 1], v = t != null && (t.level > e.level ? (
-        // A deeper row bridges the gap with its own elbow, which starts exactly
-        // at this row's marker centre — so the line lands only if that elbow is
-        // actually drawn. It normally is, since a level jump derives one; it is
-        // not when the consumer refuses it with `branchStart={false}`, and then
-        // this line has nothing to meet.
-        E(a + 1)
-      ) : t.level === e.level && // Same level, but a `tree` row that reserves a disclosure button has a
-      // wider marker column than one that doesn't — so their markers sit at
-      // different offsets and a vertical line between them can't be straight.
-      // Figma only ever shows homogeneous siblings, so skip the line instead
-      // of drawing a crooked one.
-      t.hasToggle === e.hasToggle);
-      return /* @__PURE__ */ n(
-        _.Provider,
-        {
-          value: {
-            expanded: e.expanded,
-            connector: e.element.props.connector ?? v,
-            elbow: E(a),
-            hasToggle: e.hasToggle,
-            onToggle: () => {
-              var i, R;
-              const s = !e.expanded;
-              (R = (i = e.element.props).onExpandedChange) == null || R.call(i, s), e.isControlled || f((S) => ({
-                ...S,
-                [e.key]: s
-              }));
-            }
-          },
-          children: e.element
-        },
-        e.key
-      );
-    });
-    return /* @__PURE__ */ n(V.Provider, { value: k, children: /* @__PURE__ */ n(
-      "ol",
-      {
-        ref: C,
-        "data-variant": o,
-        style: {
-          // The indent step is the widest marker column plus the gap: a
-          // `tree` row reserves the disclosure button even when a given row
-          // is a leaf, so every level lines up.
-          "--timeline-step": `calc(${o === "tree" ? `${P} + ${p}` : p} + ${te})`
-        },
-        className: O(
-          ne({ variant: o }),
-          "gap-[var(--ui-gap-16)]",
-          m
-        ),
-        ...T,
-        children: b
-      }
-    ) });
-  }
-);
-D.displayName = "Timeline";
-const B = r.forwardRef(
-  ({
-    className: m,
-    title: u,
-    timestamp: g,
-    tag: T,
-    description: C,
-    icon: o,
-    initials: k,
-    color: $ = "blue",
-    level: f = 1,
-    branchStart: h,
-    connector: y,
-    // Destructured only to keep them off the `<li>`: the root reads them from
-    // `element.props`, because it owns the disclosure state for the whole branch.
-    expanded: z,
-    defaultExpanded: d,
-    onExpandedChange: x,
-    // The two controls can sit in the same `<li>`, so their default names have to
-    // name their own action — a shared generic default would give one row two
-    // buttons that are indistinguishable to a screen reader.
-    toggleLabel: E = "Toggle nested events",
-    collapsibleBody: b = !1,
-    bodyExpanded: e,
-    defaultBodyExpanded: a = !0,
-    onBodyExpandedChange: t,
-    bodyToggleLabel: v = "Toggle event details",
-    children: s,
-    ...i
-  }, R) => {
-    const { variant: S } = r.useContext(V), l = r.useContext(_), [F, K] = r.useState(a), w = e ?? F, q = () => {
-      const N = !w;
-      t == null || t(N), e === void 0 && K(N);
-    }, A = (l == null ? void 0 : l.expanded) ?? !0, H = l ? l.connector : y ?? !1, L = l ? l.elbow : !!h && f > 1, I = S === "tree" && ((l == null ? void 0 : l.hasToggle) ?? !1), J = I ? `calc(${P} + ${p})` : p, j = (N, Q, U) => /* @__PURE__ */ n(
-      ae,
-      {
-        type: "button",
-        "aria-label": Q,
-        "aria-expanded": N,
-        onClick: U,
-        className: O(
-          "shrink-0 transition-transform",
-          !N && "ltr:-rotate-90 rtl:rotate-90"
-        ),
-        children: /* @__PURE__ */ n(W, {})
-      }
-    );
-    return /* @__PURE__ */ c(
-      "li",
-      {
-        ref: R,
-        "data-level": f,
-        "data-branch-start": L || void 0,
-        "data-expanded": I ? A : void 0,
-        "data-body-expanded": b ? w : void 0,
-        style: {
-          "--timeline-indent": `calc(var(--timeline-step) * ${f - 1})`,
-          "--timeline-marker": J
-        },
-        className: O(
-          "relative flex items-start gap-[var(--ui-timeline-gap)]",
-          "ps-[var(--timeline-indent)]",
-          m
-        ),
-        ...i,
-        children: [
-          H && /* @__PURE__ */ n(
-            "span",
-            {
-              "data-slot": "timeline-connector",
-              "aria-hidden": !0,
-              className: "absolute top-[var(--ui-avatar-global-avatar-size)] bottom-[calc(var(--ui-gap-16)*-1)] w-px",
-              style: {
-                insetInlineStart: `calc(var(--timeline-indent) + var(--timeline-marker) - ${p} / 2)`,
-                backgroundColor: G
-              }
-            }
-          ),
-          L && /* @__PURE__ */ n(
-            "span",
-            {
-              "data-slot": "timeline-elbow",
-              "aria-hidden": !0,
-              className: "absolute top-0 h-[calc(var(--ui-avatar-global-avatar-size)/2)] w-[var(--ui-avatar-global-avatar-size)] border-b border-s",
-              style: {
-                insetInlineStart: `calc(var(--timeline-indent) - ${p})`,
-                borderColor: G
-              }
-            }
-          ),
-          /* @__PURE__ */ c("div", { className: "relative flex shrink-0 items-center gap-[var(--ui-gap-8)]", children: [
-            I && j(A, E, () => l == null ? void 0 : l.onToggle()),
-            /* @__PURE__ */ n(
-              Y,
-              {
-                "aria-hidden": !0,
-                color: $,
-                className: "[box-shadow:none] [&_svg]:size-[var(--ui-button-icon-global-icon-size)] [&_svg]:shrink-0",
-                children: o ?? (k ? /* @__PURE__ */ n(Z, { children: k }) : null)
-              }
-            )
-          ] }),
-          /* @__PURE__ */ c(ee, { className: "min-w-0 flex-1 shadow-none", children: [
-            /* @__PURE__ */ c("div", { className: "flex min-h-12 items-center gap-[var(--ui-gap-16)] px-4 py-2", children: [
-              /* @__PURE__ */ c("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-                /* @__PURE__ */ c("div", { className: "flex h-8 items-center gap-[var(--ui-gap-8)]", children: [
-                  /* @__PURE__ */ n("span", { className: "truncate text-base font-medium leading-6 text-foreground", children: u }),
-                  (T != null || g != null) && /* @__PURE__ */ c("div", { className: "flex h-full shrink-0 items-center gap-[var(--ui-gap-8)]", children: [
-                    T,
-                    g != null && /* @__PURE__ */ n("span", { className: "whitespace-nowrap text-xs leading-4 text-muted-foreground", children: g })
-                  ] })
-                ] }),
-                C != null && /* @__PURE__ */ n("div", { className: "flex items-center pb-1", children: /* @__PURE__ */ n("span", { className: "truncate text-xs leading-4 text-muted-foreground", children: C }) })
-              ] }),
-              b && j(w, v, q)
-            ] }),
-            s != null && (!b || w) && /* @__PURE__ */ n("div", { className: "border-t border-border py-2", children: s })
-          ] })
-        ]
-      }
-    );
-  }
-);
-B.displayName = "Timeline.Item";
-const ve = Object.assign(D, { Item: B });
-export {
-  ve as Timeline,
-  B as TimelineItem
-};
-//# sourceMappingURL=timeline.js.map
+"use client";
+import { cn as e } from "../../../lib/utils.js";
+import { cva as t } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { ButtonIcon as n } from "../button-icon/button-icon.js";
+import { Avatar as r, AvatarFallback as i } from "../avatar/avatar.js";
+import { Card as a } from "../card/card.js";
+import * as o from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { ChevronDownIcon as l } from "@acronis-platform/icons-react/stroke-mono";
+//#region src/components/ui/timeline/timeline.tsx
+var u = "var(--ui-timeline-connector-color)", d = "var(--ui-timeline-gap)", f = "var(--ui-avatar-global-avatar-size)", p = "calc(var(--ui-button-icon-global-container-height) + var(--ui-gap-8))", m = o.createContext({ variant: "default" }), h = o.createContext(null), g = (e, t) => String(e.key ?? t), _ = t("flex flex-col", {
+	variants: { variant: {
+		default: "",
+		tree: ""
+	} },
+	defaultVariants: { variant: "default" }
+}), v = o.forwardRef(({ className: t, variant: n, children: r, ...i }, a) => {
+	let c = n ?? "default", l = o.useMemo(() => ({ variant: c }), [c]), [u, v] = o.useState({}), y = o.Children.toArray(r).filter(o.isValidElement), b = (e) => y[e]?.props.level ?? 1, x = (e) => e + 1 < y.length && b(e + 1) > b(e), S = [], C = null;
+	y.forEach((e, t) => {
+		let n = e.props.level ?? 1;
+		if (C !== null && n > C) return;
+		C = null;
+		let r = e.props.expanded !== void 0, i = r ? !!e.props.expanded : u[g(e, t)] ?? e.props.defaultExpanded ?? !0, a = c === "tree" && x(t);
+		a && !i && (C = n), S.push({
+			element: e,
+			key: g(e, t),
+			level: n,
+			expanded: i,
+			isControlled: r,
+			hasToggle: a
+		});
+	});
+	let w = (e) => {
+		let t = S[e];
+		if (t == null || t.level <= 1) return !1;
+		let n = S[e - 1];
+		return t.element.props.branchStart ?? (n != null && t.level > n.level);
+	}, T = S.map((e, t) => {
+		let n = S[t + 1], r = n != null && (n.level > e.level ? w(t + 1) : n.level === e.level && n.hasToggle === e.hasToggle);
+		return /* @__PURE__ */ s(h.Provider, {
+			value: {
+				expanded: e.expanded,
+				connector: e.element.props.connector ?? r,
+				elbow: w(t),
+				hasToggle: e.hasToggle,
+				onToggle: () => {
+					let t = !e.expanded;
+					e.element.props.onExpandedChange?.(t), e.isControlled || v((n) => ({
+						...n,
+						[e.key]: t
+					}));
+				}
+			},
+			children: e.element
+		}, e.key);
+	});
+	return /* @__PURE__ */ s(m.Provider, {
+		value: l,
+		children: /* @__PURE__ */ s("ol", {
+			ref: a,
+			"data-variant": c,
+			style: { "--timeline-step": `calc(${c === "tree" ? `${p} + ${f}` : f} + ${d})` },
+			className: e(_({ variant: c }), "gap-[var(--ui-gap-16)]", t),
+			...i,
+			children: T
+		})
+	});
+});
+v.displayName = "Timeline";
+var y = o.forwardRef(({ className: t, title: d, timestamp: g, tag: _, description: v, icon: y, initials: b, color: x = "blue", level: S = 1, branchStart: C, connector: w, expanded: T, defaultExpanded: E, onExpandedChange: D, toggleLabel: O = "Toggle nested events", collapsibleBody: k = !1, bodyExpanded: A, defaultBodyExpanded: j = !0, onBodyExpandedChange: M, bodyToggleLabel: N = "Toggle event details", children: P, ...F }, I) => {
+	let { variant: L } = o.useContext(m), R = o.useContext(h), [z, B] = o.useState(j), V = A ?? z, H = () => {
+		let e = !V;
+		M?.(e), A === void 0 && B(e);
+	}, U = R?.expanded ?? !0, W = R ? R.connector : w ?? !1, G = R ? R.elbow : !!C && S > 1, K = L === "tree" && (R?.hasToggle ?? !1), q = K ? `calc(${p} + ${f})` : f, J = (t, r, i) => /* @__PURE__ */ s(n, {
+		type: "button",
+		"aria-label": r,
+		"aria-expanded": t,
+		onClick: i,
+		className: e("shrink-0 transition-transform", !t && "ltr:-rotate-90 rtl:rotate-90"),
+		children: /* @__PURE__ */ s(l, {})
+	});
+	return /* @__PURE__ */ c("li", {
+		ref: I,
+		"data-level": S,
+		"data-branch-start": G || void 0,
+		"data-expanded": K ? U : void 0,
+		"data-body-expanded": k ? V : void 0,
+		style: {
+			"--timeline-indent": `calc(var(--timeline-step) * ${S - 1})`,
+			"--timeline-marker": q
+		},
+		className: e("relative flex items-start gap-[var(--ui-timeline-gap)]", "ps-[var(--timeline-indent)]", t),
+		...F,
+		children: [
+			W && /* @__PURE__ */ s("span", {
+				"data-slot": "timeline-connector",
+				"aria-hidden": !0,
+				className: "absolute top-[var(--ui-avatar-global-avatar-size)] bottom-[calc(var(--ui-gap-16)*-1)] w-px",
+				style: {
+					insetInlineStart: `calc(var(--timeline-indent) + var(--timeline-marker) - ${f} / 2)`,
+					backgroundColor: u
+				}
+			}),
+			G && /* @__PURE__ */ s("span", {
+				"data-slot": "timeline-elbow",
+				"aria-hidden": !0,
+				className: "absolute top-0 h-[calc(var(--ui-avatar-global-avatar-size)/2)] w-[var(--ui-avatar-global-avatar-size)] border-b border-s",
+				style: {
+					insetInlineStart: `calc(var(--timeline-indent) - ${f})`,
+					borderColor: u
+				}
+			}),
+			/* @__PURE__ */ c("div", {
+				className: "relative flex shrink-0 items-center gap-[var(--ui-gap-8)]",
+				children: [K && J(U, O, () => R?.onToggle()), /* @__PURE__ */ s(r, {
+					"aria-hidden": !0,
+					color: x,
+					className: "[box-shadow:none] [&_svg]:size-[var(--ui-button-icon-global-icon-size)] [&_svg]:shrink-0",
+					children: y ?? (b ? /* @__PURE__ */ s(i, { children: b }) : null)
+				})]
+			}),
+			/* @__PURE__ */ c(a, {
+				className: "min-w-0 flex-1 shadow-none",
+				children: [/* @__PURE__ */ c("div", {
+					className: "flex min-h-12 items-center gap-[var(--ui-gap-16)] px-4 py-2",
+					children: [/* @__PURE__ */ c("div", {
+						className: "flex min-w-0 flex-1 flex-col",
+						children: [/* @__PURE__ */ c("div", {
+							className: "flex h-8 items-center gap-[var(--ui-gap-8)]",
+							children: [/* @__PURE__ */ s("span", {
+								className: "truncate text-base font-medium leading-6 text-foreground",
+								children: d
+							}), (_ != null || g != null) && /* @__PURE__ */ c("div", {
+								className: "flex h-full shrink-0 items-center gap-[var(--ui-gap-8)]",
+								children: [_, g != null && /* @__PURE__ */ s("span", {
+									className: "whitespace-nowrap text-xs leading-4 text-muted-foreground",
+									children: g
+								})]
+							})]
+						}), v != null && /* @__PURE__ */ s("div", {
+							className: "flex items-center pb-1",
+							children: /* @__PURE__ */ s("span", {
+								className: "truncate text-xs leading-4 text-muted-foreground",
+								children: v
+							})
+						})]
+					}), k && J(V, N, H)]
+				}), P != null && (!k || V) && /* @__PURE__ */ s("div", {
+					className: "border-t border-border py-2",
+					children: P
+				})]
+			})
+		]
+	});
+});
+y.displayName = "Timeline.Item";
+var b = Object.assign(v, { Item: y });
+//#endregion
+export { b as Timeline, y as TimelineItem };
+
+//# sourceMappingURL=timeline.js.map

package/dist/components/ui/timeline/timeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline.js","sources":["../../../../src/components/ui/timeline/timeline.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChevronDownIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\nimport { Avatar, AvatarFallback } from '../avatar';\nimport { ButtonIcon } from '../button-icon';\nimport { Card } from '../card';\n\n// A presentational, chronological *tree* of events — an activity feed / audit\n// log / status history. Each row is an Avatar marker plus a Card carrying the\n// title, an optional tag, the timestamp, a description, and an optional body;\n// rows join their parent through an elbow and their next sibling through a\n// vertical line. It owns structure, the connector geometry, and collapsing only;\n// it never sorts, groups, fetches, or interprets events, and it ships no domain\n// event types or icons. Rendered as a semantic ordered list (`<ol>`/`<li>`);\n// markers and connectors are decorative. Not a temporal chart — use a Line /\n// Area / Composed chart for that.\n//\n// Nesting is **flat**, mirroring the Figma `Nesting` variant: a consumer renders\n// one `Timeline.Item` per entry and declares its `level` (1-3). Depth is never\n// derived from JSX nesting — the level sequence *is* the tree. `Timeline` reads\n// that sequence and derives the rest: which rows get a disclosure control, which\n// rows are dropped when one collapses, and the whole connector geometry — both a\n// row's descending line and the elbow joining a branch's first row to its parent\n// (Figma's `-First`). `connector` and `branchStart` exist only to override those\n// two, and the pair is resolved together so neither half can be drawn alone.\n//\n// Collapsing is the **variant**, not a per-row flag. `tree` gives every row that\n// has descendants a disclosure button ahead of its marker and widens the indent\n// step to reserve it; `default` never collapses anything. There is no `collapsible`\n// prop, because the two would say the same thing: a tree branch nobody can collapse\n// is just `default` with a wider indent.\n//\n// An expandable *card* is a separate, orthogonal axis — `collapsibleBody` puts a\n// chevron at the trailing edge of a row's card header that folds that card's own\n// body (Figma's `Action Button`). It is not a variant: it behaves identically in\n// `default` and `tree`, and a tree row can carry both controls — the branch one\n// drops the rows below, this one folds this card. It lives here only because\n// `Card` cannot do it yet; move it there once it can.\n//\n// Connector geometry is reproduced with logical CSS borders rather than Figma's\n// two exported 1px SVG strokes (a straight line and a right angle): both are\n// design primitives, not iconography, and CSS borders mirror correctly under\n// `dir=\"rtl\"` where a baked-in asset cannot.\n//\n// The design references `components/Timeline/{connectorColor,gap}`, which now\n// ship as a `--ui-timeline-*` tier (imported in `src/styles/index.css`), so this\n// consumes them directly rather than the alias targets it used while the tier\n// was missing.\n//\n// Figma binds `Timeline/gap` to exactly one thing: the row's *horizontal* gap\n// between the marker column and the card (and, through it, the indent step).\n// The vertical rhythm between rows and the card header's own spacing are\n// unbound 16px literals in the design, so they stay on `--ui-gap-16` — do not\n// \"tidy\" them onto the Timeline token, or a future change to `Timeline/gap`\n// would silently retune the vertical layout the design never tied to it.\n\nconst CONNECTOR_COLOR = 'var(--ui-timeline-connector-color)';\n// Load-bearing invariant: the elbow's vertical lands on the parent's connector\n// only while GAP === MARKER / 2 (16 === 32 / 2 today). The elbow is offset from the\n// child's indent while the connector is offset from the parent's marker centre, and\n// those two coincide at exactly that ratio. If either token moves, every elbow\n// detaches — re-derive the elbow's `insetInlineStart` rather than nudging it.\nconst GAP = 'var(--ui-timeline-gap)';\n/** The Avatar marker's own width — also the elbow's horizontal reach. */\nconst MARKER = 'var(--ui-avatar-global-avatar-size)';\n/** Disclosure button + its gap, present only on a `tree` row with descendants. */\nconst TOGGLE =\n  'calc(var(--ui-button-icon-global-container-height) + var(--ui-gap-8))';\n\ntype TimelineVariant = 'default' | 'tree';\n\nconst TimelineContext = React.createContext<{ variant: TimelineVariant }>({\n  variant: 'default',\n});\n\n/**\n * Per-row disclosure state, resolved by the root so it can also drop the\n * collapsed row's descendants. Null when an item renders outside a `Timeline`,\n * in which case the item falls back to its own state.\n */\nconst TimelineRowContext = React.createContext<{\n  expanded: boolean;\n  connector: boolean;\n  elbow: boolean;\n  hasToggle: boolean;\n  onToggle: () => void;\n} | null>(null);\n\n/** A row's identity for the uncontrolled disclosure map. */\nconst key = (element: React.ReactElement, index: number) =>\n  String(element.key ?? index);\n\nconst timelineVariants = cva('flex flex-col', {\n  variants: {\n    variant: {\n      default: '',\n      tree: '',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\nexport interface TimelineProps\n  extends React.ComponentProps<'ol'>, VariantProps<typeof timelineVariants> {\n  /**\n   * Whether the list collapses. `default` never does; `tree` gives every row that\n   * has descendants a disclosure button ahead of its marker, which hides those\n   * descendants, and widens the indent step to reserve it on every row.\n   *\n   * Unrelated to `Timeline.Item`'s `collapsibleBody`, which folds a single card's\n   * own body and works the same under both variants.\n   */\n  variant?: TimelineVariant;\n  /**\n   * `Timeline.Item`s — pass them as direct children in visual order (never\n   * wrapped in a fragment, or their levels can't be read). Connectors are derived\n   * from the levels, so no row ever leaves a dangling line.\n   */\n  children?: React.ReactNode;\n}\n\nconst TimelineRoot = React.forwardRef<HTMLOListElement, TimelineProps>(\n  ({ className, variant, children, ...props }, ref) => {\n    const resolved = variant ?? 'default';\n    const context = React.useMemo(() => ({ variant: resolved }), [resolved]);\n    const [openState, setOpenState] = React.useState<Record<string, boolean>>(\n      {}\n    );\n\n    const items = React.Children.toArray(children).filter(\n      React.isValidElement\n    ) as React.ReactElement<TimelineItemProps>[];\n\n    // A row has descendants when the row *authored* after it is deeper. Read from\n    // the full child list, never the visible one: a collapsed row must keep its\n    // disclosure control, or there would be no way to expand it again.\n    const levelAt = (index: number) => items[index]?.props.level ?? 1;\n    const hasDescendants = (index: number) =>\n      index + 1 < items.length && levelAt(index + 1) > levelAt(index);\n\n    // Pass 1 — in `tree` mode only, drop the rows beneath a collapsed one. Rows\n    // deeper than a collapsed row are hidden until the level rises back to it; one\n    // cursor is enough, since a nested collapse can only ever narrow the range.\n    const visible: {\n      element: React.ReactElement<TimelineItemProps>;\n      key: string;\n      level: number;\n      expanded: boolean;\n      isControlled: boolean;\n      hasToggle: boolean;\n    }[] = [];\n    let hideBelowLevel: number | null = null;\n\n    items.forEach((element, index) => {\n      const level = element.props.level ?? 1;\n      if (hideBelowLevel !== null && level > hideBelowLevel) return;\n      hideBelowLevel = null;\n\n      const isControlled = element.props.expanded !== undefined;\n      const expanded = isControlled\n        ? Boolean(element.props.expanded)\n        : (openState[key(element, index)] ??\n          element.props.defaultExpanded ??\n          true);\n\n      // Collapsing is the variant, not a per-row opt-in: `tree` rows that have\n      // descendants get the control, `default` rows never do. A tree row without\n      // it would be a branch nobody can collapse — which is just `default` with a\n      // wider indent — so there is nothing for a `collapsible` prop to decide.\n      const hasToggle = resolved === 'tree' && hasDescendants(index);\n\n      if (hasToggle && !expanded) {\n        hideBelowLevel = level;\n      }\n\n      visible.push({\n        element,\n        key: key(element, index),\n        level,\n        expanded,\n        isControlled,\n        hasToggle,\n      });\n    });\n\n    // Pass 2 — the connector and the elbow are two halves of one join, so they are\n    // resolved together and neither can be drawn without the other.\n    //\n    // A row draws the elbow when it is deeper than the row above it: that is what\n    // \"opens a branch\" means, and reading it from the sequence keeps a level jump\n    // from having to be declared twice. `branchStart` overrides it, like\n    // `connector` overrides the descending line.\n    const drawsElbow = (index: number) => {\n      const row = visible[index];\n      if (row == null || row.level <= 1) return false;\n      const previous = visible[index - 1];\n      return (\n        row.element.props.branchStart ??\n        (previous != null && row.level > previous.level)\n      );\n    };\n\n    // A row's connector descends from its own marker to the *next visible* row, so\n    // it may only be drawn when it actually lands on something. Otherwise the line\n    // dangles in the margin: at the end of the list, at the end of a branch, and\n    // (the case that needs the two passes) once a collapse has removed the\n    // descendants it used to point at.\n    const rows = visible.map((row, index) => {\n      const next = visible[index + 1];\n      const reachesNextRow =\n        next != null &&\n        (next.level > row.level\n          ? // A deeper row bridges the gap with its own elbow, which starts exactly\n            // at this row's marker centre — so the line lands only if that elbow is\n            // actually drawn. It normally is, since a level jump derives one; it is\n            // not when the consumer refuses it with `branchStart={false}`, and then\n            // this line has nothing to meet.\n            drawsElbow(index + 1)\n          : next.level === row.level &&\n            // Same level, but a `tree` row that reserves a disclosure button has a\n            // wider marker column than one that doesn't — so their markers sit at\n            // different offsets and a vertical line between them can't be straight.\n            // Figma only ever shows homogeneous siblings, so skip the line instead\n            // of drawing a crooked one.\n            next.hasToggle === row.hasToggle);\n      return (\n        <TimelineRowContext.Provider\n          key={row.key}\n          value={{\n            expanded: row.expanded,\n            connector: row.element.props.connector ?? reachesNextRow,\n            elbow: drawsElbow(index),\n            hasToggle: row.hasToggle,\n            onToggle: () => {\n              const nextExpanded = !row.expanded;\n              row.element.props.onExpandedChange?.(nextExpanded);\n              if (!row.isControlled) {\n                setOpenState((state) => ({\n                  ...state,\n                  [row.key]: nextExpanded,\n                }));\n              }\n            },\n          }}\n        >\n          {row.element}\n        </TimelineRowContext.Provider>\n      );\n    });\n\n    return (\n      <TimelineContext.Provider value={context}>\n        <ol\n          ref={ref}\n          data-variant={resolved}\n          style={\n            {\n              // The indent step is the widest marker column plus the gap: a\n              // `tree` row reserves the disclosure button even when a given row\n              // is a leaf, so every level lines up.\n              '--timeline-step': `calc(${\n                resolved === 'tree' ? `${TOGGLE} + ${MARKER}` : MARKER\n              } + ${GAP})`,\n            } as React.CSSProperties\n          }\n          className={cn(\n            timelineVariants({ variant: resolved }),\n            'gap-[var(--ui-gap-16)]',\n            className\n          )}\n          {...props}\n        >\n          {rows}\n        </ol>\n      </TimelineContext.Provider>\n    );\n  }\n);\nTimelineRoot.displayName = 'Timeline';\n\nexport type TimelineLevel = 1 | 2 | 3;\n\n/** The marker Avatar's color scheme (Figma ships the Timeline marker as Blue). */\nexport type TimelineMarkerColor =\n  | 'blue'\n  | 'gray'\n  | 'green'\n  | 'teal'\n  | 'violet'\n  | 'red'\n  | 'yellow'\n  | 'orange';\n\nexport interface TimelineItemProps extends Omit<\n  React.ComponentProps<'li'>,\n  'title'\n> {\n  /** Event title (the primary line in the card header). */\n  title: React.ReactNode;\n  /** Event time — pass a `<time dateTime>` for an accessible, machine-readable stamp. */\n  timestamp?: React.ReactNode;\n  /** Slot beside the title, before the timestamp — e.g. a `Tag`. */\n  tag?: React.ReactNode;\n  /** Optional secondary description under the title. */\n  description?: React.ReactNode;\n  /** Icon rendered inside the marker Avatar. Takes precedence over `initials`. */\n  icon?: React.ReactNode;\n  /** Initials rendered inside the marker Avatar when no `icon` is given. */\n  initials?: string;\n  /** Marker Avatar color scheme. */\n  color?: TimelineMarkerColor;\n  /** Nesting depth (Figma `Nesting` L1-L3). Drives the indent only. */\n  level?: TimelineLevel;\n  /**\n   * Force the elbow joining this row to its parent's connector on or off (Figma's\n   * `Nesting` `-First`). Leave it unset — `Timeline` derives it from the levels,\n   * drawing it whenever this row is deeper than the one above it. Ignored at\n   * `level={1}`, which has no parent.\n   */\n  branchStart?: boolean;\n  /**\n   * Force the connector descending to the next row on or off (Figma\n   * `Connecting line`). Leave it unset — `Timeline` derives it from the levels,\n   * drawing it only when the next visible row is at this row's depth or deeper.\n   */\n  connector?: boolean;\n  /**\n   * Branch disclosure state (controlled). Only meaningful under `variant=\"tree\"`\n   * on a row that has descendants — those rows get the control automatically.\n   */\n  expanded?: boolean;\n  /** Initial branch disclosure state when uncontrolled. */\n  defaultExpanded?: boolean;\n  /** Called with the requested disclosure state whenever the control is activated. */\n  onExpandedChange?: (expanded: boolean) => void;\n  /**\n   * Accessible name for the branch disclosure control — the one that drops this\n   * row's descendant rows. Distinct from `bodyToggleLabel` by default, because a\n   * tree row can carry both controls at once.\n   */\n  toggleLabel?: string;\n  /**\n   * Give this row's card a chevron at the trailing edge of its header that shows\n   * and hides the body (Figma's `Action Button`).\n   *\n   * Orthogonal to `variant`: it is the *card's* disclosure, not the timeline's, so\n   * it works the same in `default` and `tree` and a tree row can have both — the\n   * branch control drops the rows below, this one folds this card's own body.\n   * (It lives here only until `Card` grows the behaviour itself.)\n   */\n  collapsibleBody?: boolean;\n  /** Card-body disclosure state (controlled). */\n  bodyExpanded?: boolean;\n  /** Initial card-body disclosure state when uncontrolled. */\n  defaultBodyExpanded?: boolean;\n  /** Called with the requested card-body disclosure state. */\n  onBodyExpandedChange?: (expanded: boolean) => void;\n  /**\n   * Accessible name for the card-body disclosure control — the one that folds this\n   * row's own body. Distinct from `toggleLabel` by default.\n   */\n  bodyToggleLabel?: string;\n  /** Card body, rendered below a divider. */\n  children?: React.ReactNode;\n}\n\nconst TimelineItem = React.forwardRef<HTMLLIElement, TimelineItemProps>(\n  (\n    {\n      className,\n      title,\n      timestamp,\n      tag,\n      description,\n      icon,\n      initials,\n      color = 'blue',\n      level = 1,\n      branchStart,\n      connector,\n      // Destructured only to keep them off the `<li>`: the root reads them from\n      // `element.props`, because it owns the disclosure state for the whole branch.\n      expanded: expandedProp,\n      defaultExpanded,\n      onExpandedChange,\n      // The two controls can sit in the same `<li>`, so their default names have to\n      // name their own action — a shared generic default would give one row two\n      // buttons that are indistinguishable to a screen reader.\n      toggleLabel = 'Toggle nested events',\n      collapsibleBody = false,\n      bodyExpanded: bodyExpandedProp,\n      defaultBodyExpanded = true,\n      onBodyExpandedChange,\n      bodyToggleLabel = 'Toggle event details',\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const { variant } = React.useContext(TimelineContext);\n    const row = React.useContext(TimelineRowContext);\n\n    // The card's own disclosure is entirely local — unlike the branch control, it\n    // changes nothing outside this row, so the root has no reason to own it.\n    const [localBodyExpanded, setLocalBodyExpanded] =\n      React.useState(defaultBodyExpanded);\n    const bodyExpanded = bodyExpandedProp ?? localBodyExpanded;\n    const handleBodyToggle = () => {\n      const next = !bodyExpanded;\n      onBodyExpandedChange?.(next);\n      if (bodyExpandedProp === undefined) setLocalBodyExpanded(next);\n    };\n\n    // All three are resolved by the root: `expanded` and the control depend on the\n    // row's descendants, which only the root can see, and it owns the uncontrolled\n    // state so it can drop those descendants too. Rendered outside a `Timeline`\n    // there is no branch at all, so an item is simply never collapsible.\n    const expanded = row?.expanded ?? true;\n    const drawConnector = row ? row.connector : (connector ?? false);\n    // Likewise derived by the root, which is the only place the row above is\n    // visible. Standalone there is no row above, so only the explicit prop can\n    // ask for an elbow — and it has nothing to meet, which is the consumer's call.\n    const drawElbow = row ? row.elbow : Boolean(branchStart) && level > 1;\n    const treeToggle = variant === 'tree' && (row?.hasToggle ?? false);\n    // A `tree` leaf drops the disclosure button, so its own marker column is\n    // narrower than the indent step — the connector tracks the Avatar, not the step.\n    const ownMarker = treeToggle ? `calc(${TOGGLE} + ${MARKER})` : MARKER;\n\n    // Collapsed, the chevron points toward the inline end — so it has to mirror\n    // under RTL; logical positioning can't rotate artwork.\n    const chevron = (\n      open: boolean,\n      label: string,\n      onClick: () => void\n    ) => (\n      <ButtonIcon\n        type=\"button\"\n        aria-label={label}\n        aria-expanded={open}\n        onClick={onClick}\n        className={cn(\n          'shrink-0 transition-transform',\n          !open && 'ltr:-rotate-90 rtl:rotate-90'\n        )}\n      >\n        <ChevronDownIcon />\n      </ButtonIcon>\n    );\n\n    return (\n      <li\n        ref={ref}\n        data-level={level}\n        data-branch-start={drawElbow || undefined}\n        data-expanded={treeToggle ? expanded : undefined}\n        data-body-expanded={collapsibleBody ? bodyExpanded : undefined}\n        style={\n          {\n            '--timeline-indent': `calc(var(--timeline-step) * ${level - 1})`,\n            '--timeline-marker': ownMarker,\n          } as React.CSSProperties\n        }\n        className={cn(\n          'relative flex items-start gap-[var(--ui-timeline-gap)]',\n          'ps-[var(--timeline-indent)]',\n          className\n        )}\n        {...props}\n      >\n        {drawConnector && (\n          <span\n            data-slot=\"timeline-connector\"\n            aria-hidden\n            // Descends from the marker's lower edge into the row gap, meeting\n            // the next row's elbow (or its marker) exactly.\n            className=\"absolute top-[var(--ui-avatar-global-avatar-size)] bottom-[calc(var(--ui-gap-16)*-1)] w-px\"\n            style={{\n              insetInlineStart: `calc(var(--timeline-indent) + var(--timeline-marker) - ${MARKER} / 2)`,\n              backgroundColor: CONNECTOR_COLOR,\n            }}\n          />\n        )}\n        {drawElbow && (\n          <span\n            data-slot=\"timeline-elbow\"\n            aria-hidden\n            // A right angle: down the parent's connector line, then across to\n            // this row's marker column. `border-s`/`border-b` mirror in RTL.\n            className=\"absolute top-0 h-[calc(var(--ui-avatar-global-avatar-size)/2)] w-[var(--ui-avatar-global-avatar-size)] border-b border-s\"\n            style={{\n              insetInlineStart: `calc(var(--timeline-indent) - ${MARKER})`,\n              borderColor: CONNECTOR_COLOR,\n            }}\n          />\n        )}\n\n        {/* Marker column: the optional tree disclosure button, then the Avatar. */}\n        <div className=\"relative flex shrink-0 items-center gap-[var(--ui-gap-8)]\">\n          {treeToggle && chevron(expanded, toggleLabel, () => row?.onToggle())}\n          <Avatar\n            aria-hidden\n            color={color}\n            // The Figma Timeline marker carries no stroke, so Avatar's 2px outset\n            // ring (which exists to separate overlapping avatars in a group) is\n            // switched off here.\n            className=\"[box-shadow:none] [&_svg]:size-[var(--ui-button-icon-global-icon-size)] [&_svg]:shrink-0\"\n          >\n            {icon ??\n              (initials ? <AvatarFallback>{initials}</AvatarFallback> : null)}\n          </Avatar>\n        </div>\n\n        {/* Content column: a Card header, plus an optional body below a divider. */}\n        <Card className=\"min-w-0 flex-1 shadow-none\">\n          <div className=\"flex min-h-12 items-center gap-[var(--ui-gap-16)] px-4 py-2\">\n            <div className=\"flex min-w-0 flex-1 flex-col\">\n              <div className=\"flex h-8 items-center gap-[var(--ui-gap-8)]\">\n                <span className=\"truncate text-base font-medium leading-6 text-foreground\">\n                  {title}\n                </span>\n                {(tag != null || timestamp != null) && (\n                  <div className=\"flex h-full shrink-0 items-center gap-[var(--ui-gap-8)]\">\n                    {tag}\n                    {timestamp != null && (\n                      <span className=\"whitespace-nowrap text-xs leading-4 text-muted-foreground\">\n                        {timestamp}\n                      </span>\n                    )}\n                  </div>\n                )}\n              </div>\n              {description != null && (\n                <div className=\"flex items-center pb-1\">\n                  <span className=\"truncate text-xs leading-4 text-muted-foreground\">\n                    {description}\n                  </span>\n                </div>\n              )}\n            </div>\n            {collapsibleBody &&\n              chevron(bodyExpanded, bodyToggleLabel, handleBodyToggle)}\n          </div>\n          {children != null && (!collapsibleBody || bodyExpanded) && (\n            <div className=\"border-t border-border py-2\">{children}</div>\n          )}\n        </Card>\n      </li>\n    );\n  }\n);\nTimelineItem.displayName = 'Timeline.Item';\n\nconst Timeline = Object.assign(TimelineRoot, { Item: TimelineItem });\n\nexport { Timeline, TimelineItem };\n"],"names":["CONNECTOR_COLOR","GAP","MARKER","TOGGLE","TimelineContext","React","TimelineRowContext","key","element","index","timelineVariants","cva","TimelineRoot","className","variant","children","props","ref","resolved","context","openState","setOpenState","items","levelAt","_a","hasDescendants","visible","hideBelowLevel","level","isControlled","expanded","hasToggle","drawsElbow","row","previous","rows","next","reachesNextRow","jsx","nextExpanded","_b","state","cn","TimelineItem","title","timestamp","tag","description","icon","initials","color","branchStart","connector","expandedProp","defaultExpanded","onExpandedChange","toggleLabel","collapsibleBody","bodyExpandedProp","defaultBodyExpanded","onBodyExpandedChange","bodyToggleLabel","localBodyExpanded","setLocalBodyExpanded","bodyExpanded","handleBodyToggle","drawConnector","drawElbow","treeToggle","ownMarker","chevron","open","label","onClick","ButtonIcon","ChevronDownIcon","jsxs","Avatar","AvatarFallback","Card","Timeline"],"mappings":"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"}
+{"version":3,"file":"timeline.js","names":[],"sources":["../../../../src/components/ui/timeline/timeline.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChevronDownIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\nimport { Avatar, AvatarFallback } from '../avatar';\nimport { ButtonIcon } from '../button-icon';\nimport { Card } from '../card';\n\n// A presentational, chronological *tree* of events — an activity feed / audit\n// log / status history. Each row is an Avatar marker plus a Card carrying the\n// title, an optional tag, the timestamp, a description, and an optional body;\n// rows join their parent through an elbow and their next sibling through a\n// vertical line. It owns structure, the connector geometry, and collapsing only;\n// it never sorts, groups, fetches, or interprets events, and it ships no domain\n// event types or icons. Rendered as a semantic ordered list (`<ol>`/`<li>`);\n// markers and connectors are decorative. Not a temporal chart — use a Line /\n// Area / Composed chart for that.\n//\n// Nesting is **flat**, mirroring the Figma `Nesting` variant: a consumer renders\n// one `Timeline.Item` per entry and declares its `level` (1-3). Depth is never\n// derived from JSX nesting — the level sequence *is* the tree. `Timeline` reads\n// that sequence and derives the rest: which rows get a disclosure control, which\n// rows are dropped when one collapses, and the whole connector geometry — both a\n// row's descending line and the elbow joining a branch's first row to its parent\n// (Figma's `-First`). `connector` and `branchStart` exist only to override those\n// two, and the pair is resolved together so neither half can be drawn alone.\n//\n// Collapsing is the **variant**, not a per-row flag. `tree` gives every row that\n// has descendants a disclosure button ahead of its marker and widens the indent\n// step to reserve it; `default` never collapses anything. There is no `collapsible`\n// prop, because the two would say the same thing: a tree branch nobody can collapse\n// is just `default` with a wider indent.\n//\n// An expandable *card* is a separate, orthogonal axis — `collapsibleBody` puts a\n// chevron at the trailing edge of a row's card header that folds that card's own\n// body (Figma's `Action Button`). It is not a variant: it behaves identically in\n// `default` and `tree`, and a tree row can carry both controls — the branch one\n// drops the rows below, this one folds this card. It lives here only because\n// `Card` cannot do it yet; move it there once it can.\n//\n// Connector geometry is reproduced with logical CSS borders rather than Figma's\n// two exported 1px SVG strokes (a straight line and a right angle): both are\n// design primitives, not iconography, and CSS borders mirror correctly under\n// `dir=\"rtl\"` where a baked-in asset cannot.\n//\n// The design references `components/Timeline/{connectorColor,gap}`, which now\n// ship as a `--ui-timeline-*` tier (imported in `src/styles/index.css`), so this\n// consumes them directly rather than the alias targets it used while the tier\n// was missing.\n//\n// Figma binds `Timeline/gap` to exactly one thing: the row's *horizontal* gap\n// between the marker column and the card (and, through it, the indent step).\n// The vertical rhythm between rows and the card header's own spacing are\n// unbound 16px literals in the design, so they stay on `--ui-gap-16` — do not\n// \"tidy\" them onto the Timeline token, or a future change to `Timeline/gap`\n// would silently retune the vertical layout the design never tied to it.\n\nconst CONNECTOR_COLOR = 'var(--ui-timeline-connector-color)';\n// Load-bearing invariant: the elbow's vertical lands on the parent's connector\n// only while GAP === MARKER / 2 (16 === 32 / 2 today). The elbow is offset from the\n// child's indent while the connector is offset from the parent's marker centre, and\n// those two coincide at exactly that ratio. If either token moves, every elbow\n// detaches — re-derive the elbow's `insetInlineStart` rather than nudging it.\nconst GAP = 'var(--ui-timeline-gap)';\n/** The Avatar marker's own width — also the elbow's horizontal reach. */\nconst MARKER = 'var(--ui-avatar-global-avatar-size)';\n/** Disclosure button + its gap, present only on a `tree` row with descendants. */\nconst TOGGLE =\n  'calc(var(--ui-button-icon-global-container-height) + var(--ui-gap-8))';\n\ntype TimelineVariant = 'default' | 'tree';\n\nconst TimelineContext = React.createContext<{ variant: TimelineVariant }>({\n  variant: 'default',\n});\n\n/**\n * Per-row disclosure state, resolved by the root so it can also drop the\n * collapsed row's descendants. Null when an item renders outside a `Timeline`,\n * in which case the item falls back to its own state.\n */\nconst TimelineRowContext = React.createContext<{\n  expanded: boolean;\n  connector: boolean;\n  elbow: boolean;\n  hasToggle: boolean;\n  onToggle: () => void;\n} | null>(null);\n\n/** A row's identity for the uncontrolled disclosure map. */\nconst key = (element: React.ReactElement, index: number) =>\n  String(element.key ?? index);\n\nconst timelineVariants = cva('flex flex-col', {\n  variants: {\n    variant: {\n      default: '',\n      tree: '',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\nexport interface TimelineProps\n  extends React.ComponentProps<'ol'>, VariantProps<typeof timelineVariants> {\n  /**\n   * Whether the list collapses. `default` never does; `tree` gives every row that\n   * has descendants a disclosure button ahead of its marker, which hides those\n   * descendants, and widens the indent step to reserve it on every row.\n   *\n   * Unrelated to `Timeline.Item`'s `collapsibleBody`, which folds a single card's\n   * own body and works the same under both variants.\n   */\n  variant?: TimelineVariant;\n  /**\n   * `Timeline.Item`s — pass them as direct children in visual order (never\n   * wrapped in a fragment, or their levels can't be read). Connectors are derived\n   * from the levels, so no row ever leaves a dangling line.\n   */\n  children?: React.ReactNode;\n}\n\nconst TimelineRoot = React.forwardRef<HTMLOListElement, TimelineProps>(\n  ({ className, variant, children, ...props }, ref) => {\n    const resolved = variant ?? 'default';\n    const context = React.useMemo(() => ({ variant: resolved }), [resolved]);\n    const [openState, setOpenState] = React.useState<Record<string, boolean>>(\n      {}\n    );\n\n    const items = React.Children.toArray(children).filter(\n      React.isValidElement\n    ) as React.ReactElement<TimelineItemProps>[];\n\n    // A row has descendants when the row *authored* after it is deeper. Read from\n    // the full child list, never the visible one: a collapsed row must keep its\n    // disclosure control, or there would be no way to expand it again.\n    const levelAt = (index: number) => items[index]?.props.level ?? 1;\n    const hasDescendants = (index: number) =>\n      index + 1 < items.length && levelAt(index + 1) > levelAt(index);\n\n    // Pass 1 — in `tree` mode only, drop the rows beneath a collapsed one. Rows\n    // deeper than a collapsed row are hidden until the level rises back to it; one\n    // cursor is enough, since a nested collapse can only ever narrow the range.\n    const visible: {\n      element: React.ReactElement<TimelineItemProps>;\n      key: string;\n      level: number;\n      expanded: boolean;\n      isControlled: boolean;\n      hasToggle: boolean;\n    }[] = [];\n    let hideBelowLevel: number | null = null;\n\n    items.forEach((element, index) => {\n      const level = element.props.level ?? 1;\n      if (hideBelowLevel !== null && level > hideBelowLevel) return;\n      hideBelowLevel = null;\n\n      const isControlled = element.props.expanded !== undefined;\n      const expanded = isControlled\n        ? Boolean(element.props.expanded)\n        : (openState[key(element, index)] ??\n          element.props.defaultExpanded ??\n          true);\n\n      // Collapsing is the variant, not a per-row opt-in: `tree` rows that have\n      // descendants get the control, `default` rows never do. A tree row without\n      // it would be a branch nobody can collapse — which is just `default` with a\n      // wider indent — so there is nothing for a `collapsible` prop to decide.\n      const hasToggle = resolved === 'tree' && hasDescendants(index);\n\n      if (hasToggle && !expanded) {\n        hideBelowLevel = level;\n      }\n\n      visible.push({\n        element,\n        key: key(element, index),\n        level,\n        expanded,\n        isControlled,\n        hasToggle,\n      });\n    });\n\n    // Pass 2 — the connector and the elbow are two halves of one join, so they are\n    // resolved together and neither can be drawn without the other.\n    //\n    // A row draws the elbow when it is deeper than the row above it: that is what\n    // \"opens a branch\" means, and reading it from the sequence keeps a level jump\n    // from having to be declared twice. `branchStart` overrides it, like\n    // `connector` overrides the descending line.\n    const drawsElbow = (index: number) => {\n      const row = visible[index];\n      if (row == null || row.level <= 1) return false;\n      const previous = visible[index - 1];\n      return (\n        row.element.props.branchStart ??\n        (previous != null && row.level > previous.level)\n      );\n    };\n\n    // A row's connector descends from its own marker to the *next visible* row, so\n    // it may only be drawn when it actually lands on something. Otherwise the line\n    // dangles in the margin: at the end of the list, at the end of a branch, and\n    // (the case that needs the two passes) once a collapse has removed the\n    // descendants it used to point at.\n    const rows = visible.map((row, index) => {\n      const next = visible[index + 1];\n      const reachesNextRow =\n        next != null &&\n        (next.level > row.level\n          ? // A deeper row bridges the gap with its own elbow, which starts exactly\n            // at this row's marker centre — so the line lands only if that elbow is\n            // actually drawn. It normally is, since a level jump derives one; it is\n            // not when the consumer refuses it with `branchStart={false}`, and then\n            // this line has nothing to meet.\n            drawsElbow(index + 1)\n          : next.level === row.level &&\n            // Same level, but a `tree` row that reserves a disclosure button has a\n            // wider marker column than one that doesn't — so their markers sit at\n            // different offsets and a vertical line between them can't be straight.\n            // Figma only ever shows homogeneous siblings, so skip the line instead\n            // of drawing a crooked one.\n            next.hasToggle === row.hasToggle);\n      return (\n        <TimelineRowContext.Provider\n          key={row.key}\n          value={{\n            expanded: row.expanded,\n            connector: row.element.props.connector ?? reachesNextRow,\n            elbow: drawsElbow(index),\n            hasToggle: row.hasToggle,\n            onToggle: () => {\n              const nextExpanded = !row.expanded;\n              row.element.props.onExpandedChange?.(nextExpanded);\n              if (!row.isControlled) {\n                setOpenState((state) => ({\n                  ...state,\n                  [row.key]: nextExpanded,\n                }));\n              }\n            },\n          }}\n        >\n          {row.element}\n        </TimelineRowContext.Provider>\n      );\n    });\n\n    return (\n      <TimelineContext.Provider value={context}>\n        <ol\n          ref={ref}\n          data-variant={resolved}\n          style={\n            {\n              // The indent step is the widest marker column plus the gap: a\n              // `tree` row reserves the disclosure button even when a given row\n              // is a leaf, so every level lines up.\n              '--timeline-step': `calc(${\n                resolved === 'tree' ? `${TOGGLE} + ${MARKER}` : MARKER\n              } + ${GAP})`,\n            } as React.CSSProperties\n          }\n          className={cn(\n            timelineVariants({ variant: resolved }),\n            'gap-[var(--ui-gap-16)]',\n            className\n          )}\n          {...props}\n        >\n          {rows}\n        </ol>\n      </TimelineContext.Provider>\n    );\n  }\n);\nTimelineRoot.displayName = 'Timeline';\n\nexport type TimelineLevel = 1 | 2 | 3;\n\n/** The marker Avatar's color scheme (Figma ships the Timeline marker as Blue). */\nexport type TimelineMarkerColor =\n  | 'blue'\n  | 'gray'\n  | 'green'\n  | 'teal'\n  | 'violet'\n  | 'red'\n  | 'yellow'\n  | 'orange';\n\nexport interface TimelineItemProps extends Omit<\n  React.ComponentProps<'li'>,\n  'title'\n> {\n  /** Event title (the primary line in the card header). */\n  title: React.ReactNode;\n  /** Event time — pass a `<time dateTime>` for an accessible, machine-readable stamp. */\n  timestamp?: React.ReactNode;\n  /** Slot beside the title, before the timestamp — e.g. a `Tag`. */\n  tag?: React.ReactNode;\n  /** Optional secondary description under the title. */\n  description?: React.ReactNode;\n  /** Icon rendered inside the marker Avatar. Takes precedence over `initials`. */\n  icon?: React.ReactNode;\n  /** Initials rendered inside the marker Avatar when no `icon` is given. */\n  initials?: string;\n  /** Marker Avatar color scheme. */\n  color?: TimelineMarkerColor;\n  /** Nesting depth (Figma `Nesting` L1-L3). Drives the indent only. */\n  level?: TimelineLevel;\n  /**\n   * Force the elbow joining this row to its parent's connector on or off (Figma's\n   * `Nesting` `-First`). Leave it unset — `Timeline` derives it from the levels,\n   * drawing it whenever this row is deeper than the one above it. Ignored at\n   * `level={1}`, which has no parent.\n   */\n  branchStart?: boolean;\n  /**\n   * Force the connector descending to the next row on or off (Figma\n   * `Connecting line`). Leave it unset — `Timeline` derives it from the levels,\n   * drawing it only when the next visible row is at this row's depth or deeper.\n   */\n  connector?: boolean;\n  /**\n   * Branch disclosure state (controlled). Only meaningful under `variant=\"tree\"`\n   * on a row that has descendants — those rows get the control automatically.\n   */\n  expanded?: boolean;\n  /** Initial branch disclosure state when uncontrolled. */\n  defaultExpanded?: boolean;\n  /** Called with the requested disclosure state whenever the control is activated. */\n  onExpandedChange?: (expanded: boolean) => void;\n  /**\n   * Accessible name for the branch disclosure control — the one that drops this\n   * row's descendant rows. Distinct from `bodyToggleLabel` by default, because a\n   * tree row can carry both controls at once.\n   */\n  toggleLabel?: string;\n  /**\n   * Give this row's card a chevron at the trailing edge of its header that shows\n   * and hides the body (Figma's `Action Button`).\n   *\n   * Orthogonal to `variant`: it is the *card's* disclosure, not the timeline's, so\n   * it works the same in `default` and `tree` and a tree row can have both — the\n   * branch control drops the rows below, this one folds this card's own body.\n   * (It lives here only until `Card` grows the behaviour itself.)\n   */\n  collapsibleBody?: boolean;\n  /** Card-body disclosure state (controlled). */\n  bodyExpanded?: boolean;\n  /** Initial card-body disclosure state when uncontrolled. */\n  defaultBodyExpanded?: boolean;\n  /** Called with the requested card-body disclosure state. */\n  onBodyExpandedChange?: (expanded: boolean) => void;\n  /**\n   * Accessible name for the card-body disclosure control — the one that folds this\n   * row's own body. Distinct from `toggleLabel` by default.\n   */\n  bodyToggleLabel?: string;\n  /** Card body, rendered below a divider. */\n  children?: React.ReactNode;\n}\n\nconst TimelineItem = React.forwardRef<HTMLLIElement, TimelineItemProps>(\n  (\n    {\n      className,\n      title,\n      timestamp,\n      tag,\n      description,\n      icon,\n      initials,\n      color = 'blue',\n      level = 1,\n      branchStart,\n      connector,\n      // Destructured only to keep them off the `<li>`: the root reads them from\n      // `element.props`, because it owns the disclosure state for the whole branch.\n      expanded: expandedProp,\n      defaultExpanded,\n      onExpandedChange,\n      // The two controls can sit in the same `<li>`, so their default names have to\n      // name their own action — a shared generic default would give one row two\n      // buttons that are indistinguishable to a screen reader.\n      toggleLabel = 'Toggle nested events',\n      collapsibleBody = false,\n      bodyExpanded: bodyExpandedProp,\n      defaultBodyExpanded = true,\n      onBodyExpandedChange,\n      bodyToggleLabel = 'Toggle event details',\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const { variant } = React.useContext(TimelineContext);\n    const row = React.useContext(TimelineRowContext);\n\n    // The card's own disclosure is entirely local — unlike the branch control, it\n    // changes nothing outside this row, so the root has no reason to own it.\n    const [localBodyExpanded, setLocalBodyExpanded] =\n      React.useState(defaultBodyExpanded);\n    const bodyExpanded = bodyExpandedProp ?? localBodyExpanded;\n    const handleBodyToggle = () => {\n      const next = !bodyExpanded;\n      onBodyExpandedChange?.(next);\n      if (bodyExpandedProp === undefined) setLocalBodyExpanded(next);\n    };\n\n    // All three are resolved by the root: `expanded` and the control depend on the\n    // row's descendants, which only the root can see, and it owns the uncontrolled\n    // state so it can drop those descendants too. Rendered outside a `Timeline`\n    // there is no branch at all, so an item is simply never collapsible.\n    const expanded = row?.expanded ?? true;\n    const drawConnector = row ? row.connector : (connector ?? false);\n    // Likewise derived by the root, which is the only place the row above is\n    // visible. Standalone there is no row above, so only the explicit prop can\n    // ask for an elbow — and it has nothing to meet, which is the consumer's call.\n    const drawElbow = row ? row.elbow : Boolean(branchStart) && level > 1;\n    const treeToggle = variant === 'tree' && (row?.hasToggle ?? false);\n    // A `tree` leaf drops the disclosure button, so its own marker column is\n    // narrower than the indent step — the connector tracks the Avatar, not the step.\n    const ownMarker = treeToggle ? `calc(${TOGGLE} + ${MARKER})` : MARKER;\n\n    // Collapsed, the chevron points toward the inline end — so it has to mirror\n    // under RTL; logical positioning can't rotate artwork.\n    const chevron = (\n      open: boolean,\n      label: string,\n      onClick: () => void\n    ) => (\n      <ButtonIcon\n        type=\"button\"\n        aria-label={label}\n        aria-expanded={open}\n        onClick={onClick}\n        className={cn(\n          'shrink-0 transition-transform',\n          !open && 'ltr:-rotate-90 rtl:rotate-90'\n        )}\n      >\n        <ChevronDownIcon />\n      </ButtonIcon>\n    );\n\n    return (\n      <li\n        ref={ref}\n        data-level={level}\n        data-branch-start={drawElbow || undefined}\n        data-expanded={treeToggle ? expanded : undefined}\n        data-body-expanded={collapsibleBody ? bodyExpanded : undefined}\n        style={\n          {\n            '--timeline-indent': `calc(var(--timeline-step) * ${level - 1})`,\n            '--timeline-marker': ownMarker,\n          } as React.CSSProperties\n        }\n        className={cn(\n          'relative flex items-start gap-[var(--ui-timeline-gap)]',\n          'ps-[var(--timeline-indent)]',\n          className\n        )}\n        {...props}\n      >\n        {drawConnector && (\n          <span\n            data-slot=\"timeline-connector\"\n            aria-hidden\n            // Descends from the marker's lower edge into the row gap, meeting\n            // the next row's elbow (or its marker) exactly.\n            className=\"absolute top-[var(--ui-avatar-global-avatar-size)] bottom-[calc(var(--ui-gap-16)*-1)] w-px\"\n            style={{\n              insetInlineStart: `calc(var(--timeline-indent) + var(--timeline-marker) - ${MARKER} / 2)`,\n              backgroundColor: CONNECTOR_COLOR,\n            }}\n          />\n        )}\n        {drawElbow && (\n          <span\n            data-slot=\"timeline-elbow\"\n            aria-hidden\n            // A right angle: down the parent's connector line, then across to\n            // this row's marker column. `border-s`/`border-b` mirror in RTL.\n            className=\"absolute top-0 h-[calc(var(--ui-avatar-global-avatar-size)/2)] w-[var(--ui-avatar-global-avatar-size)] border-b border-s\"\n            style={{\n              insetInlineStart: `calc(var(--timeline-indent) - ${MARKER})`,\n              borderColor: CONNECTOR_COLOR,\n            }}\n          />\n        )}\n\n        {/* Marker column: the optional tree disclosure button, then the Avatar. */}\n        <div className=\"relative flex shrink-0 items-center gap-[var(--ui-gap-8)]\">\n          {treeToggle && chevron(expanded, toggleLabel, () => row?.onToggle())}\n          <Avatar\n            aria-hidden\n            color={color}\n            // The Figma Timeline marker carries no stroke, so Avatar's 2px outset\n            // ring (which exists to separate overlapping avatars in a group) is\n            // switched off here.\n            className=\"[box-shadow:none] [&_svg]:size-[var(--ui-button-icon-global-icon-size)] [&_svg]:shrink-0\"\n          >\n            {icon ??\n              (initials ? <AvatarFallback>{initials}</AvatarFallback> : null)}\n          </Avatar>\n        </div>\n\n        {/* Content column: a Card header, plus an optional body below a divider. */}\n        <Card className=\"min-w-0 flex-1 shadow-none\">\n          <div className=\"flex min-h-12 items-center gap-[var(--ui-gap-16)] px-4 py-2\">\n            <div className=\"flex min-w-0 flex-1 flex-col\">\n              <div className=\"flex h-8 items-center gap-[var(--ui-gap-8)]\">\n                <span className=\"truncate text-base font-medium leading-6 text-foreground\">\n                  {title}\n                </span>\n                {(tag != null || timestamp != null) && (\n                  <div className=\"flex h-full shrink-0 items-center gap-[var(--ui-gap-8)]\">\n                    {tag}\n                    {timestamp != null && (\n                      <span className=\"whitespace-nowrap text-xs leading-4 text-muted-foreground\">\n                        {timestamp}\n                      </span>\n                    )}\n                  </div>\n                )}\n              </div>\n              {description != null && (\n                <div className=\"flex items-center pb-1\">\n                  <span className=\"truncate text-xs leading-4 text-muted-foreground\">\n                    {description}\n                  </span>\n                </div>\n              )}\n            </div>\n            {collapsibleBody &&\n              chevron(bodyExpanded, bodyToggleLabel, handleBodyToggle)}\n          </div>\n          {children != null && (!collapsibleBody || bodyExpanded) && (\n            <div className=\"border-t border-border py-2\">{children}</div>\n          )}\n        </Card>\n      </li>\n    );\n  }\n);\nTimelineItem.displayName = 'Timeline.Item';\n\nconst Timeline = Object.assign(TimelineRoot, { Item: TimelineItem });\n\nexport { Timeline, TimelineItem };\n"],"mappings":"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"}