/*! ratio-ui · design system for knowledge sharing · https://github.com/losol/ratio-ui · (c) 2026 Losol AS · MPL-2.0 */
import { cn } from "../../utils/cn.js";
import "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/core/Timeline/Timeline.tsx
var dotStatusClasses = {
	neutral: "bg-(--border-2)",
	info: "bg-info",
	success: "bg-success",
	warning: "bg-warning",
	error: "bg-error"
};
var Root = ({ children, className, testId }) => /* @__PURE__ */ jsx("ol", {
	className: cn("relative m-0 list-none p-0", className),
	"data-testid": testId,
	children
});
var Item = ({ children, className, timestamp, title, actor, status = "neutral", icon, testId }) => /* @__PURE__ */ jsxs("li", {
	className: cn("relative border-l-2 border-border-1 pb-6 pl-6 last:border-transparent last:pb-0", className),
	"data-testid": testId,
	children: [
		/* @__PURE__ */ jsx("span", {
			className: cn("absolute left-0 top-1 flex h-3 w-3 -translate-x-1/2 items-center justify-center rounded-full ring-4 ring-(--surface)", !icon && dotStatusClasses[status]),
			"aria-hidden": "true",
			children: icon
		}),
		/* @__PURE__ */ jsxs("div", {
			className: "flex flex-wrap items-baseline gap-x-2 text-xs text-(--text-muted)",
			children: [/* @__PURE__ */ jsx("time", { children: timestamp }), actor && /* @__PURE__ */ jsxs("span", { children: ["· ", actor] })]
		}),
		/* @__PURE__ */ jsx("div", {
			className: "mt-0.5 text-sm font-medium text-(--text)",
			children: title
		}),
		children && /* @__PURE__ */ jsx("div", {
			className: "mt-2 text-sm text-(--text-muted)",
			children
		})
	]
});
/**
* Vertical timeline for chronological event lists (audit logs, order history,
* registration activity, business events).
*
* @beta This component is experimental. The prop shape and visual design may
* change before release.
*
* @example
* <Timeline>
*   <Timeline.Item timestamp="2026-04-19 10:22" title="Order created" status="success" />
*   <Timeline.Item timestamp="2026-04-19 10:25" title="Payment method updated" actor="Ada">
*     <pre>{JSON.stringify(metadata, null, 2)}</pre>
*   </Timeline.Item>
* </Timeline>
*/
var Timeline = Object.assign(Root, { Item });
//#endregion
export { Timeline };

//# sourceMappingURL=Timeline.js.map