themelia-react-ui 2.0.0 → 2.0.1

package/dist/{timelines-CxuAFIc2.js → timelines-C_SBwHNP.js}

@@ -1,35 +1,36 @@
 "use client";
 import { useStrings as e } from "./lib/strings.js";
-import { t } from "./utils-Cospvlj1.js";
-import { s as n } from "./typography-CAr3dQhX.js";
-import { t as r } from "./structure-hzCW-XsV.js";
-import { g as i, m as a } from "./primitives-BHrwQXFC.js";
-import { n as o } from "./number-CKRBYmZK.js";
-import { t as s } from "./badge-0tATj-tW.js";
-import { n as c } from "./display-DrdvPwF0.js";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { Check as d, Circle as f, Clock as p, GitCommit as m, Loader2 as h, Minus as g, Plus as _, Wrench as v, X as y } from "lucide-react";
+import { t } from "./utils-l5LpDw2z.js";
+import { s as n } from "./typography-DTRkE9zL.js";
+import { t as r } from "./structure-DC2dygdA.js";
+import { r as i } from "./tone-recipes-CPoExcTE.js";
+import { g as a, m as o } from "./primitives-B-CkiEMU.js";
+import { n as s } from "./number-DMhe-Vsk.js";
+import { t as c } from "./badge-MrKVNzW9.js";
+import { n as l } from "./display-DsQTVzMz.js";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Check as f, Circle as p, Clock as m, GitCommit as h, Loader2 as g, Minus as _, Plus as v, Wrench as y, X as b } from "lucide-react";
 //#region src/components/blocks/timelines/shared/timeline.tsx
-var b = {
+var x = {
 	sm: "size-2.5",
 	md: "size-icon-md",
 	lg: "size-icon-lg"
-}, x = {
+}, S = {
 	sm: "size-2",
 	md: "size-2.5",
 	lg: "size-icon-sm"
-}, S = {
+}, C = {
 	completed: {
-		bg: "bg-success",
+		bg: i.success.solid,
 		text: "text-success-foreground",
-		ring: "ring-success/20",
-		line: "bg-success/40"
+		ring: i.success.halo,
+		line: i.success.line
 	},
 	current: {
-		bg: "bg-primary",
+		bg: i.primary.solid,
 		text: "text-primary-foreground",
-		ring: "ring-primary/30",
-		line: "bg-primary/40"
+		ring: i.primary.halo,
+		line: i.primary.line
 	},
 	pending: {
 		bg: "bg-muted",
@@ -38,22 +39,22 @@ var b = {
 		line: "bg-border"
 	},
 	success: {
-		bg: "bg-success",
+		bg: i.success.solid,
 		text: "text-success-foreground",
-		ring: "ring-success/20",
-		line: "bg-success/40"
+		ring: i.success.halo,
+		line: i.success.line
 	},
 	warning: {
-		bg: "bg-warning",
+		bg: i.warning.solid,
 		text: "text-warning-foreground",
-		ring: "ring-warning/30",
-		line: "bg-warning/40"
+		ring: i.warning.halo,
+		line: i.warning.line
 	},
 	error: {
-		bg: "bg-destructive",
+		bg: i.destructive.solid,
 		text: "text-destructive-foreground",
-		ring: "ring-destructive/30",
-		line: "bg-destructive/40"
+		ring: i.destructive.halo,
+		line: i.destructive.line
 	},
 	neutral: {
 		bg: "bg-card",
@@ -62,46 +63,48 @@ var b = {
 		line: "bg-border"
 	}
 };
-function C({ items: e, dotSize: a = "md", className: o }) {
-	return /* @__PURE__ */ l("ol", {
+function w({ items: e, dotSize: i = "md", className: o }) {
+	return /* @__PURE__ */ u("ol", {
 		className: t("timeline--component", "relative m-0 p-0 list-none space-y-space-xl", o),
 		children: e.map((o, s) => {
-			let c = S[o.status ?? "neutral"], d = o.icon, f = s === e.length - 1;
-			return /* @__PURE__ */ u("li", {
-				className: "relative flex gap-space-lg",
+			let c = o.status ?? "neutral", l = C[c], f = o.icon, p = s === e.length - 1;
+			return /* @__PURE__ */ d("li", {
+				"data-status": c,
+				"aria-current": c === "current" ? "step" : void 0,
+				className: "timeline--item relative flex gap-space-lg",
 				children: [
-					!f && /* @__PURE__ */ l("span", {
+					!p && /* @__PURE__ */ u("span", {
 						"aria-hidden": "true",
-						className: t("absolute left-[7px] top-4 bottom-[-1rem] w-px", c.line, a === "lg" && "left-[10px]", a === "sm" && "left-[5px]")
+						className: t("absolute left-[7px] top-4 bottom-[-1rem] w-px", l.line, i === "lg" && "left-[10px]", i === "sm" && "left-[5px]")
 					}),
-					/* @__PURE__ */ l("div", {
+					/* @__PURE__ */ u("div", {
 						className: "relative z-[1] mt-0.5 flex shrink-0 items-start",
-						children: /* @__PURE__ */ l("span", {
-							className: t("inline-flex items-center justify-center rounded-full ring-2", c.bg, c.text, c.ring, b[a]),
-							children: !!d && /* @__PURE__ */ l(d, { className: x[a] })
+						children: /* @__PURE__ */ u("span", {
+							className: t("inline-flex items-center justify-center rounded-full ring-2", l.bg, l.text, l.ring, x[i]),
+							children: !!f && /* @__PURE__ */ u(f, { className: S[i] })
 						})
 					}),
-					/* @__PURE__ */ u("div", {
+					/* @__PURE__ */ d("div", {
 						className: "min-w-0 flex-1 pb-space-md",
-						children: [/* @__PURE__ */ u(r, {
+						children: [/* @__PURE__ */ d(r, {
 							gap: "dense",
-							children: [/* @__PURE__ */ u("div", {
+							children: [/* @__PURE__ */ d("div", {
 								className: "flex items-baseline justify-between gap-space-md",
-								children: [/* @__PURE__ */ l(n, {
+								children: [/* @__PURE__ */ u(n, {
 									weight: "medium",
 									className: "leading-tight",
 									children: o.title
-								}), !!o.timestamp && /* @__PURE__ */ l(i, {
+								}), !!o.timestamp && /* @__PURE__ */ u(a, {
 									size: "xs",
 									className: "shrink-0 tabular-nums",
 									children: o.timestamp
 								})]
-							}), !!o.description && /* @__PURE__ */ l(n, {
+							}), !!o.description && /* @__PURE__ */ u(n, {
 								size: "xs",
 								type: "secondary",
 								children: o.description
 							})]
-						}), !!o.children && /* @__PURE__ */ l("div", {
+						}), !!o.children && /* @__PURE__ */ u("div", {
 							className: "mt-space-md",
 							children: o.children
 						})]
@@ -111,43 +114,43 @@ function C({ items: e, dotSize: a = "md", className: o }) {
 		})
 	});
 }
-C.displayName = "Timeline";
+w.displayName = "Timeline";
 //#endregion
 //#region src/components/blocks/timelines/steps-card/steps-card.tsx
-var w = {
+var T = {
 	completed: {
 		dot: "bg-success text-success-foreground",
 		line: "bg-success",
 		title: "text-foreground",
-		Icon: d
+		Icon: f
 	},
 	current: {
-		dot: "bg-primary text-primary-foreground ring-4 ring-primary/20",
+		dot: `bg-primary text-primary-foreground ring-4 ${i.primary.halo}`,
 		line: "bg-border",
 		title: "text-foreground",
-		Icon: h
+		Icon: g
 	},
 	upcoming: {
 		dot: "bg-muted text-muted-foreground",
 		line: "bg-border",
 		title: "text-muted-foreground",
-		Icon: f
+		Icon: p
 	}
 };
-function T({ title: e, description: r, steps: i, footerText: a, className: o }) {
-	let d = i.map((e) => {
-		let { Icon: t, title: r } = w[e.status];
+function E({ title: e, description: r, steps: i, footerText: a, className: o }) {
+	let s = i.map((e) => {
+		let { Icon: t, title: r } = T[e.status];
 		return {
 			id: e.id,
-			title: /* @__PURE__ */ u("span", {
+			title: /* @__PURE__ */ d("span", {
 				className: "inline-flex flex-wrap items-center gap-space-sm",
-				children: [/* @__PURE__ */ l(n, {
+				children: [/* @__PURE__ */ u(n, {
 					tag: "span",
 					size: "inherit",
 					weight: "semibold",
 					className: r,
 					children: e.title
-				}), e.badge ? /* @__PURE__ */ l(s, {
+				}), e.badge ? /* @__PURE__ */ u(c, {
 					tone: e.badgeTone ?? "secondary",
 					children: e.badge
 				}) : null]
@@ -159,76 +162,76 @@ function T({ title: e, description: r, steps: i, footerText: a, className: o })
 			children: e.content
 		};
 	});
-	return /* @__PURE__ */ l(c, {
+	return /* @__PURE__ */ u(l, {
 		"data-component": "steps-card",
 		"data-slot": "steps-card",
 		title: e,
 		description: r,
 		footerText: a,
 		className: t("steps-card--component", o),
-		children: /* @__PURE__ */ l(C, {
-			items: d,
+		children: /* @__PURE__ */ u(w, {
+			items: s,
 			dotSize: "lg"
 		})
 	});
 }
-T.displayName = "StepsCard";
-function E({ status: e, stepNumber: t }) {
-	return e === "completed" ? /* @__PURE__ */ l("div", {
+E.displayName = "StepsCard";
+function D({ status: e, stepNumber: t }) {
+	return e === "completed" ? /* @__PURE__ */ u("div", {
 		className: "relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-radius bg-success text-success-foreground",
-		children: /* @__PURE__ */ l(d, { className: "h-4 w-4" })
-	}) : e === "current" ? /* @__PURE__ */ l("div", {
+		children: /* @__PURE__ */ u(f, { className: "h-4 w-4" })
+	}) : e === "current" ? /* @__PURE__ */ u("div", {
 		className: "relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-radius bg-primary text-primary-foreground",
-		children: /* @__PURE__ */ l(n, {
+		children: /* @__PURE__ */ u(n, {
 			weight: "bold",
 			className: "text-primary-foreground",
 			children: t
 		})
-	}) : /* @__PURE__ */ l("div", {
+	}) : /* @__PURE__ */ u("div", {
 		className: "relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-radius border-2 border-muted text-muted-foreground",
-		children: /* @__PURE__ */ l(n, {
+		children: /* @__PURE__ */ u(n, {
 			weight: "medium",
 			className: "text-muted-foreground",
 			children: t
 		})
 	});
 }
-function D({ title: e, description: i, steps: a, footerText: o, className: s }) {
-	return /* @__PURE__ */ u("div", {
+function O({ title: e, description: i, steps: a, footerText: o, className: s }) {
+	return /* @__PURE__ */ d("div", {
 		"data-component": "steps-horizontal",
 		"data-slot": "steps-horizontal",
 		className: t("steps-horizontal--component @container/steps-horizontal grid min-w-0 gap-space-md", s),
 		children: [
-			!!(e || i) && /* @__PURE__ */ u("div", {
+			!!(e || i) && /* @__PURE__ */ d("div", {
 				className: "steps-horizontal--header grid min-w-0 gap-normal",
-				children: [!!e && /* @__PURE__ */ l(n, {
+				children: [!!e && /* @__PURE__ */ u(n, {
 					weight: "semibold",
 					children: e
-				}), !!i && /* @__PURE__ */ l(n, {
+				}), !!i && /* @__PURE__ */ u(n, {
 					type: "secondary",
 					children: i
 				})]
 			}),
-			/* @__PURE__ */ l("div", {
+			/* @__PURE__ */ u("div", {
 				className: "space-y-space-lg @xl/steps-horizontal:hidden",
 				children: a.map((e, i) => {
 					let o = i === a.length - 1, s = e.status === "completed" ? "bg-success" : "bg-border";
-					return /* @__PURE__ */ u("div", {
+					return /* @__PURE__ */ d("div", {
 						className: "flex gap-space-lg",
-						children: [/* @__PURE__ */ u("div", {
+						children: [/* @__PURE__ */ d("div", {
 							className: "flex flex-col items-center",
-							children: [/* @__PURE__ */ l(E, {
+							children: [/* @__PURE__ */ u(D, {
 								status: e.status,
 								stepNumber: i + 1
-							}), !o && /* @__PURE__ */ l("div", { className: t("mt-1 w-0.5 flex-1 min-h-5", s) })]
-						}), /* @__PURE__ */ u(r, {
+							}), !o && /* @__PURE__ */ u("div", { className: t("mt-1 w-0.5 flex-1 min-h-5", s) })]
+						}), /* @__PURE__ */ d(r, {
 							gap: "dense",
 							className: t("min-w-0 flex-1 pb-space-md", o && "pb-0"),
-							children: [/* @__PURE__ */ l(n, {
+							children: [/* @__PURE__ */ u(n, {
 								weight: "semibold",
 								className: t("leading-snug", e.status === "upcoming" ? "text-muted-foreground" : "text-foreground"),
 								children: e.title
-							}), !!e.description && /* @__PURE__ */ l(n, {
+							}), !!e.description && /* @__PURE__ */ u(n, {
 								size: "xs",
 								type: "secondary",
 								className: "line-clamp-2",
@@ -238,36 +241,36 @@ function D({ title: e, description: i, steps: a, footerText: o, className: s })
 					}, e.id);
 				})
 			}),
-			/* @__PURE__ */ l("div", {
+			/* @__PURE__ */ u("div", {
 				className: "hidden overflow-x-auto @xl/steps-horizontal:block",
-				children: /* @__PURE__ */ l("div", {
+				children: /* @__PURE__ */ u("div", {
 					className: "flex min-w-fit items-start",
 					children: a.map((e, i) => {
 						let o = i === a.length - 1, s = e.status === "completed" ? "bg-success" : "bg-border";
-						return /* @__PURE__ */ l("div", {
+						return /* @__PURE__ */ u("div", {
 							className: "flex min-w-28 flex-1 items-start",
-							children: /* @__PURE__ */ u("div", {
+							children: /* @__PURE__ */ d("div", {
 								className: "flex w-full flex-col items-center",
-								children: [/* @__PURE__ */ u("div", {
+								children: [/* @__PURE__ */ d("div", {
 									className: "flex w-full items-center",
 									children: [
-										i > 0 && /* @__PURE__ */ l("div", { className: t("h-0.5 flex-1", a[i - 1].status === "completed" ? "bg-success" : "bg-border") }),
-										i === 0 && /* @__PURE__ */ l("div", { className: "flex-1" }),
-										/* @__PURE__ */ l(E, {
+										i > 0 && /* @__PURE__ */ u("div", { className: t("h-0.5 flex-1", a[i - 1].status === "completed" ? "bg-success" : "bg-border") }),
+										i === 0 && /* @__PURE__ */ u("div", { className: "flex-1" }),
+										/* @__PURE__ */ u(D, {
 											status: e.status,
 											stepNumber: i + 1
 										}),
-										!o && /* @__PURE__ */ l("div", { className: t("h-0.5 flex-1", s) }),
-										!!o && /* @__PURE__ */ l("div", { className: "flex-1" })
+										!o && /* @__PURE__ */ u("div", { className: t("h-0.5 flex-1", s) }),
+										!!o && /* @__PURE__ */ u("div", { className: "flex-1" })
 									]
-								}), /* @__PURE__ */ u(r, {
+								}), /* @__PURE__ */ d(r, {
 									gap: "dense",
 									className: "mt-space-md flex w-full flex-col items-center px-space-xs text-center",
-									children: [/* @__PURE__ */ l(n, {
+									children: [/* @__PURE__ */ u(n, {
 										weight: "semibold",
 										className: t("leading-snug line-clamp-2", e.status === "upcoming" ? "text-muted-foreground" : "text-foreground"),
 										children: e.title
-									}), !!e.description && /* @__PURE__ */ l(n, {
+									}), !!e.description && /* @__PURE__ */ u(n, {
 										size: "xs",
 										type: "secondary",
 										className: "leading-snug line-clamp-2",
@@ -279,7 +282,7 @@ function D({ title: e, description: i, steps: a, footerText: o, className: s })
 					})
 				})
 			}),
-			!!o && /* @__PURE__ */ l(n, {
+			!!o && /* @__PURE__ */ u(n, {
 				size: "xs",
 				type: "secondary",
 				children: o
@@ -287,53 +290,53 @@ function D({ title: e, description: i, steps: a, footerText: o, className: s })
 		]
 	});
 }
-D.displayName = "StepsHorizontal";
+O.displayName = "StepsHorizontal";
 //#endregion
 //#region src/components/blocks/timelines/changelog/types.ts
-var O = {
+var k = {
 	title: "Changelog",
 	added: "Added",
 	removed: "Removed",
 	modified: "Modified",
 	fixed: "Fixed"
-}, k = {
-	added: _,
-	removed: g,
-	modified: v,
-	fixed: m
+}, A = {
+	added: v,
+	removed: _,
+	modified: y,
+	fixed: h
 };
-function A({ entries: i, className: o, strings: c }) {
-	let d = e(O, c), f = {
-		added: d.added,
-		removed: d.removed,
-		modified: d.modified,
-		fixed: d.fixed
+function j({ entries: i, className: a, strings: s }) {
+	let l = e(k, s), f = {
+		added: l.added,
+		removed: l.removed,
+		modified: l.modified,
+		fixed: l.fixed
 	}, p = i.map((e) => ({
 		id: e.id,
-		title: /* @__PURE__ */ u("span", {
+		title: /* @__PURE__ */ d("span", {
 			className: "inline-flex flex-wrap items-center gap-space-sm",
 			children: [
-				/* @__PURE__ */ l(s, { children: f[e.kind] }),
-				/* @__PURE__ */ l(n, {
+				/* @__PURE__ */ u(c, { children: f[e.kind] }),
+				/* @__PURE__ */ u(n, {
 					tag: "span",
 					size: "inherit",
 					weight: "medium",
 					lineHeight: "tight",
 					children: e.title
 				}),
-				!!e.version && /* @__PURE__ */ l(a, {
+				!!e.version && /* @__PURE__ */ u(o, {
 					size: "xs",
 					className: "text-muted-foreground",
 					children: e.version
 				})
 			]
 		}),
-		description: e.author ? /* @__PURE__ */ u(r, {
-			render: /* @__PURE__ */ l("span", {}),
+		description: e.author ? /* @__PURE__ */ d(r, {
+			render: /* @__PURE__ */ u("span", {}),
 			direction: "horizontal",
 			gap: "md",
 			className: "inline-flex",
-			children: [e.description, /* @__PURE__ */ u(n, {
+			children: [e.description, /* @__PURE__ */ d(n, {
 				tag: "span",
 				size: "xs",
 				type: "discrete",
@@ -341,79 +344,79 @@ function A({ entries: i, className: o, strings: c }) {
 			})]
 		}) : e.description,
 		timestamp: e.timestamp,
-		icon: k[e.kind],
+		icon: A[e.kind],
 		status: "neutral"
 	}));
-	return /* @__PURE__ */ l("div", {
+	return /* @__PURE__ */ u("div", {
 		"data-component": "changelog-timeline",
 		"data-slot": "changelog-timeline",
-		className: t("changelog-timeline--component", o),
-		children: /* @__PURE__ */ l(C, {
+		className: t("changelog-timeline--component", a),
+		children: /* @__PURE__ */ u(w, {
 			items: p,
 			dotSize: "md"
 		})
 	});
 }
-A.displayName = "ChangelogTimeline";
+j.displayName = "ChangelogTimeline";
 //#endregion
 //#region src/components/blocks/timelines/milestones/types.ts
-var j = {
+var M = {
 	title: "Milestones",
 	completed: "Completed",
 	in_progress: "In progress",
 	upcoming: "Upcoming",
 	blocked: "Blocked",
 	dueOn: "Due"
-}, M = {
+}, N = {
 	completed: "completed",
 	in_progress: "current",
 	upcoming: "pending",
 	blocked: "error"
-}, N = {
-	completed: d,
-	in_progress: p,
-	upcoming: f,
-	blocked: y
 }, P = {
+	completed: f,
+	in_progress: m,
+	upcoming: p,
+	blocked: b
+}, F = {
 	completed: "success",
 	in_progress: "info",
 	upcoming: "secondary",
 	blocked: "destructive"
 };
-function F({ milestones: r, className: i, strings: a }) {
-	let c = e(j, a), d = {
-		completed: c.completed,
-		in_progress: c.in_progress,
-		upcoming: c.upcoming,
-		blocked: c.blocked
+function I({ milestones: r, className: i, strings: a }) {
+	let o = e(M, a), l = {
+		completed: o.completed,
+		in_progress: o.in_progress,
+		upcoming: o.upcoming,
+		blocked: o.blocked
 	}, f = r.map((e) => ({
 		id: e.id,
-		title: /* @__PURE__ */ u("span", {
+		title: /* @__PURE__ */ d("span", {
 			className: "inline-flex flex-wrap items-center gap-space-sm",
-			children: [/* @__PURE__ */ l(n, {
+			children: [/* @__PURE__ */ u(n, {
 				tag: "span",
 				size: "inherit",
 				weight: "medium",
 				lineHeight: "tight",
 				children: e.title
-			}), /* @__PURE__ */ l(s, {
-				tone: P[e.status],
-				children: d[e.status]
+			}), /* @__PURE__ */ u(c, {
+				tone: F[e.status],
+				children: l[e.status]
 			})]
 		}),
 		description: e.description,
-		timestamp: e.dueDate ? `${c.dueOn} ${e.dueDate}` : void 0,
-		icon: N[e.status],
-		status: M[e.status],
-		children: e.status === "in_progress" && typeof e.progress == "number" ? /* @__PURE__ */ u("div", {
+		timestamp: e.dueDate ? `${o.dueOn} ${e.dueDate}` : void 0,
+		icon: P[e.status],
+		status: N[e.status],
+		children: e.status === "in_progress" && typeof e.progress == "number" ? /* @__PURE__ */ d("div", {
 			className: "space-y-space-xs",
-			children: [/* @__PURE__ */ l("div", {
+			children: [/* @__PURE__ */ u("div", {
 				className: "h-1.5 w-full overflow-hidden rounded-full bg-muted",
-				children: /* @__PURE__ */ l("div", {
+				children: /* @__PURE__ */ u("div", {
 					className: t("h-full rounded-full bg-primary transition-[width] duration-300"),
 					style: { width: `${Math.max(0, Math.min(100, e.progress))}%` }
 				})
-			}), /* @__PURE__ */ l(o, {
+			}), /* @__PURE__ */ u(s, {
 				value: Math.round(e.progress),
 				scaled: !0,
 				size: "xs",
@@ -422,18 +425,18 @@ function F({ milestones: r, className: i, strings: a }) {
 			})]
 		}) : void 0
 	}));
-	return /* @__PURE__ */ l("div", {
+	return /* @__PURE__ */ u("div", {
 		"data-component": "milestones-timeline",
 		"data-slot": "milestones-timeline",
 		className: t("milestones-timeline--component", i),
-		children: /* @__PURE__ */ l(C, {
+		children: /* @__PURE__ */ u(w, {
 			items: f,
 			dotSize: "md"
 		})
 	});
 }
-F.displayName = "MilestonesTimeline";
+I.displayName = "MilestonesTimeline";
 //#endregion
-export { T as a, O as i, j as n, D as o, A as r, C as s, F as t };
+export { E as a, k as i, M as n, O as o, j as r, w as s, I as t };
 
-//# sourceMappingURL=timelines-CxuAFIc2.js.map
+//# sourceMappingURL=timelines-C_SBwHNP.js.map