import { t as e } from "../../utils-B7XIe3qq.js";
import * as t from "react";
import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
//#region src/react/primitives/timeline.tsx
function a(e) {
	return e instanceof Date ? e : new Date(e);
}
function o(e) {
	return e.toLocaleString(void 0, {
		month: "short",
		day: "numeric",
		year: "numeric",
		hour: "2-digit",
		minute: "2-digit"
	});
}
function s(e) {
	return e.toLocaleDateString(void 0, {
		weekday: "long",
		month: "long",
		day: "numeric",
		year: "numeric"
	});
}
function c(e) {
	return `${String(e.getFullYear())}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}`;
}
function l({ event: t, showTimestamps: n, dateFormat: o, onEventClick: s }) {
	return /* @__PURE__ */ i("div", {
		className: e("bg-glass border-border-glass cursor-pointer rounded-lg border p-3 backdrop-blur-[20px] transition-all", "hover:border-border-glass/80 hover:shadow-sm"),
		onClick: () => s?.(t),
		onKeyDown: (e) => {
			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), s?.(t));
		},
		tabIndex: 0,
		role: "button",
		"aria-label": t.title,
		children: [
			/* @__PURE__ */ i("div", {
				className: "text-foreground flex items-center gap-1.5 text-sm font-medium",
				children: [t.icon && /* @__PURE__ */ r("span", {
					className: "text-foreground-secondary",
					"aria-hidden": "true",
					children: t.icon
				}), t.title]
			}),
			t.description && /* @__PURE__ */ r("div", {
				className: "text-foreground-secondary mt-1 text-xs",
				children: t.description
			}),
			n && /* @__PURE__ */ r("div", {
				className: "text-foreground-secondary mt-1.5 text-[11px]",
				children: o(a(t.timestamp))
			}),
			t.metadata && /* @__PURE__ */ r("div", {
				className: "mt-2 flex flex-wrap gap-x-3 gap-y-1",
				children: Object.entries(t.metadata).map(([e, t]) => /* @__PURE__ */ i("span", {
					className: "text-[11px]",
					children: [
						/* @__PURE__ */ i("span", {
							className: "text-foreground-secondary",
							children: [e, ":"]
						}),
						" ",
						/* @__PURE__ */ r("span", {
							className: "text-foreground",
							children: t
						})
					]
				}, e))
			})
		]
	});
}
function u({ sorted: e, showTimestamps: o, dateFormat: u, groupByDate: d, onEventClick: f }) {
	if (d) {
		let d = /* @__PURE__ */ new Map(), p = [];
		for (let t of e) {
			let e = c(a(t.timestamp)), n = d.get(e);
			n ? n.push(t) : (d.set(e, [t]), p.push(e));
		}
		return /* @__PURE__ */ r(n, { children: p.map((e) => {
			let n = d.get(e), c = n[0];
			return /* @__PURE__ */ i(t.Fragment, { children: [/* @__PURE__ */ r("div", {
				className: "relative z-10 py-2",
				children: /* @__PURE__ */ r("span", {
					className: "bg-surface-secondary text-foreground-secondary rounded-full px-3 py-1 text-xs font-medium",
					children: s(a(c.timestamp))
				})
			}), n.map((e) => /* @__PURE__ */ i("div", {
				className: "relative flex gap-4 pb-6",
				"data-event-id": e.id,
				children: [/* @__PURE__ */ i("div", {
					className: "relative flex flex-col items-center",
					children: [/* @__PURE__ */ r("div", {
						className: "z-10 mt-1.5 size-3 shrink-0 rounded-full border-2 border-white/20",
						style: { background: e.color ?? "var(--color-accent-cyan, #06b6d4)" },
						"aria-hidden": "true"
					}), /* @__PURE__ */ r("div", {
						className: "bg-border-glass w-px flex-1",
						"aria-hidden": "true"
					})]
				}), /* @__PURE__ */ r("div", {
					className: "min-w-0 flex-1 pb-1",
					children: /* @__PURE__ */ r(l, {
						event: e,
						showTimestamps: o,
						dateFormat: u,
						onEventClick: f
					})
				})]
			}, e.id))] }, e);
		}) });
	}
	return /* @__PURE__ */ r(n, { children: e.map((e) => /* @__PURE__ */ i("div", {
		className: "relative flex gap-4 pb-6",
		"data-event-id": e.id,
		children: [/* @__PURE__ */ i("div", {
			className: "relative flex flex-col items-center",
			children: [/* @__PURE__ */ r("div", {
				className: "z-10 mt-1.5 size-3 shrink-0 rounded-full border-2 border-white/20",
				style: { background: e.color ?? "var(--color-accent-cyan, #06b6d4)" },
				"aria-hidden": "true"
			}), /* @__PURE__ */ r("div", {
				className: "bg-border-glass w-px flex-1",
				"aria-hidden": "true"
			})]
		}), /* @__PURE__ */ r("div", {
			className: "min-w-0 flex-1 pb-1",
			children: /* @__PURE__ */ r(l, {
				event: e,
				showTimestamps: o,
				dateFormat: u,
				onEventClick: f
			})
		})]
	}, e.id)) });
}
function d({ sorted: e, showTimestamps: t, dateFormat: n, onEventClick: a }) {
	return /* @__PURE__ */ i("div", {
		className: "relative flex items-start gap-6 overflow-x-auto pb-4",
		children: [/* @__PURE__ */ r("div", {
			className: "bg-border-glass absolute left-0 right-0 top-1.5 h-px",
			"aria-hidden": "true"
		}), e.map((e) => /* @__PURE__ */ i("div", {
			className: "relative flex shrink-0 flex-col items-center",
			"data-event-id": e.id,
			children: [/* @__PURE__ */ r("div", {
				className: "z-10 size-3 shrink-0 rounded-full border-2 border-white/20",
				style: { background: e.color ?? "var(--color-accent-cyan, #06b6d4)" },
				"aria-hidden": "true"
			}), /* @__PURE__ */ r("div", {
				className: "mt-3 w-48",
				children: /* @__PURE__ */ r(l, {
					event: e,
					showTimestamps: t,
					dateFormat: n,
					onEventClick: a
				})
			})]
		}, e.id))]
	});
}
function f({ events: n, orientation: i = "vertical", showTimestamps: s = !0, dateFormat: c = o, onEventClick: l, groupByDate: f = !1, className: p, ...m }) {
	let h = t.useMemo(() => [...n].sort((e, t) => a(e.timestamp).getTime() - a(t.timestamp).getTime()), [n]);
	return /* @__PURE__ */ r("div", {
		"data-slot": "timeline",
		className: e("relative", p),
		...m,
		children: i === "horizontal" ? /* @__PURE__ */ r(d, {
			sorted: h,
			showTimestamps: s,
			dateFormat: c,
			onEventClick: l
		}) : /* @__PURE__ */ r(u, {
			sorted: h,
			showTimestamps: s,
			dateFormat: c,
			groupByDate: f,
			onEventClick: l
		})
	});
}
f.displayName = "Timeline";
//#endregion
export { f as Timeline, l as TimelineItem };

//# sourceMappingURL=timeline.js.map