admin-ui-starter-kit 0.1.0

package/dist/components/composed/timelines/index.js

@@ -0,0 +1,594 @@
+import { useStrings as e } from "../../../lib/strings.js";
+import { cn as t } from "../../../lib/utils.js";
+import { t as n } from "../../../_shared/text-DIxMTECE.js";
+import { t as r } from "../../../_shared/badge-BbUN6W7E.js";
+import { t as i } from "../../../_shared/smart-card-hJ01usWt.js";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Activity as c, Check as l, Circle as u, Clock as d, Flag as f, GitCommit as p, Loader2 as m, Minus as h, Plus as g, Wrench as _, X as v } from "lucide-react";
+//#region src/components/composed/timelines/steps-card/steps-card.tsx
+var y = {
+	completed: {
+		dot: "bg-success text-success-foreground",
+		line: "bg-success",
+		title: "text-foreground",
+		Icon: l
+	},
+	current: {
+		dot: "bg-primary text-white ring-4 ring-primary/20",
+		line: "bg-border",
+		title: "text-foreground",
+		Icon: m
+	},
+	upcoming: {
+		dot: "bg-muted text-muted-foreground",
+		line: "bg-border",
+		title: "text-muted-foreground",
+		Icon: u
+	}
+};
+function b({ status: e }) {
+	let { dot: n, Icon: r } = y[e], i = e === "current";
+	return /* @__PURE__ */ o("div", {
+		className: t("steps-card--component", "relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full transition-all", n),
+		children: /* @__PURE__ */ o(r, { className: t("h-4 w-4", i && "animate-spin") })
+	});
+}
+function x({ title: e, description: a, steps: c, footerText: l, className: u }) {
+	return /* @__PURE__ */ o(i, {
+		title: e,
+		description: a,
+		footerText: l,
+		className: u,
+		children: /* @__PURE__ */ o("div", {
+			className: "relative",
+			children: c.map((e, i) => {
+				let a = i === c.length - 1, { line: l, title: u } = y[e.status];
+				return /* @__PURE__ */ s("div", {
+					className: "relative flex gap-4",
+					children: [/* @__PURE__ */ s("div", {
+						className: "flex flex-col items-center",
+						children: [/* @__PURE__ */ o(b, { status: e.status }), !a && /* @__PURE__ */ o("div", { className: t("w-0.5 flex-1 min-h-6", l) })]
+					}), /* @__PURE__ */ s("div", {
+						className: t("flex-1 pb-6", a && "pb-0"),
+						children: [
+							/* @__PURE__ */ s("div", {
+								className: "flex items-center gap-2 pt-1",
+								children: [/* @__PURE__ */ o(n, {
+									weight: "semibold",
+									className: u,
+									children: e.title
+								}), !!e.badge && /* @__PURE__ */ o(r, {
+									variant: e.badgeVariant ?? "secondary",
+									children: e.badge
+								})]
+							}),
+							!!e.description && /* @__PURE__ */ o(n, {
+								size: "xs",
+								type: "secondary",
+								className: "mt-0.5",
+								children: e.description
+							}),
+							!!e.timestamp && /* @__PURE__ */ o(n, {
+								size: "xxs",
+								type: "discrete",
+								className: "mt-1",
+								children: e.timestamp
+							}),
+							!!e.content && /* @__PURE__ */ o("div", {
+								className: "mt-2",
+								children: e.content
+							})
+						]
+					})]
+				}, e.id);
+			})
+		})
+	});
+}
+x.displayName = "StepsCard";
+function S({ status: e, stepNumber: t }) {
+	return e === "completed" ? /* @__PURE__ */ o("div", {
+		className: "relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-success text-success-foreground",
+		children: /* @__PURE__ */ o(l, { className: "h-4 w-4" })
+	}) : e === "current" ? /* @__PURE__ */ o("div", {
+		className: "relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary text-white",
+		children: /* @__PURE__ */ o(n, {
+			weight: "bold",
+			className: "text-white",
+			children: t
+		})
+	}) : /* @__PURE__ */ o("div", {
+		className: "relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border-2 border-muted text-muted-foreground",
+		children: /* @__PURE__ */ o(n, {
+			weight: "medium",
+			className: "text-muted-foreground",
+			children: t
+		})
+	});
+}
+function C({ title: e, description: r, steps: a, footerText: c, className: l }) {
+	return /* @__PURE__ */ o(i, {
+		title: e,
+		description: r,
+		footerText: c,
+		className: l,
+		children: /* @__PURE__ */ o("div", {
+			className: "overflow-x-auto -mx-1 px-1",
+			children: /* @__PURE__ */ o("div", {
+				className: "flex min-w-fit items-start",
+				children: a.map((e, r) => {
+					let i = r === a.length - 1, c = e.status === "completed" ? "bg-success" : "bg-border";
+					return /* @__PURE__ */ o("div", {
+						className: "flex min-w-[110px] flex-1 items-start",
+						children: /* @__PURE__ */ s("div", {
+							className: "flex w-full flex-col items-center",
+							children: [/* @__PURE__ */ s("div", {
+								className: "flex w-full items-center",
+								children: [
+									r > 0 && /* @__PURE__ */ o("div", { className: t("h-0.5 flex-1", a[r - 1].status === "completed" ? "bg-success" : "bg-border") }),
+									r === 0 && /* @__PURE__ */ o("div", { className: "flex-1" }),
+									/* @__PURE__ */ o(S, {
+										status: e.status,
+										stepNumber: r + 1
+									}),
+									!i && /* @__PURE__ */ o("div", { className: t("h-0.5 flex-1", c) }),
+									!!i && /* @__PURE__ */ o("div", { className: "flex-1" })
+								]
+							}), /* @__PURE__ */ s("div", {
+								className: "mt-2 flex w-full flex-col items-center px-1 text-center",
+								children: [/* @__PURE__ */ o(n, {
+									size: "xs",
+									weight: "semibold",
+									className: t("leading-snug line-clamp-2", e.status === "upcoming" ? "text-muted-foreground" : "text-foreground"),
+									children: e.title
+								}), !!e.description && /* @__PURE__ */ o(n, {
+									size: "xxs",
+									type: "secondary",
+									className: "mt-0.5 leading-snug line-clamp-2",
+									children: e.description
+								})]
+							})]
+						})
+					}, e.id);
+				})
+			})
+		})
+	});
+}
+C.displayName = "StepsHorizontal";
+//#endregion
+//#region src/components/composed/timelines/order-timeline/order-timeline.tsx
+var w = {
+	completed: "bg-success",
+	current: "bg-primary ring-3 ring-primary/20",
+	pending: "bg-muted"
+};
+function T({ title: e, description: r, events: a, footerText: c, className: l }) {
+	return /* @__PURE__ */ o(i, {
+		title: e,
+		description: r,
+		footerText: c,
+		className: t("order-timeline--component", l),
+		children: /* @__PURE__ */ o("div", {
+			className: "relative space-y-0",
+			children: a.map((e, r) => /* @__PURE__ */ s("div", {
+				className: "relative flex gap-3 pb-4 last:pb-0",
+				children: [
+					r !== a.length - 1 && /* @__PURE__ */ o("div", { className: "absolute left-[5px] top-[14px] h-[calc(100%-6px)] w-px bg-border" }),
+					/* @__PURE__ */ o("div", {
+						className: "relative z-10 mt-[5px] flex-shrink-0",
+						children: /* @__PURE__ */ o("div", { className: t("h-[11px] w-[11px] rounded-full", w[e.status]) })
+					}),
+					/* @__PURE__ */ s("div", {
+						className: "min-w-0 flex-1",
+						children: [/* @__PURE__ */ s("div", {
+							className: "flex items-baseline justify-between gap-2",
+							children: [/* @__PURE__ */ o(n, {
+								weight: "medium",
+								className: "truncate",
+								children: e.title
+							}), /* @__PURE__ */ o(n, {
+								size: "xxs",
+								type: "secondary",
+								className: "flex-shrink-0 font-mono tabular-nums",
+								children: e.timestamp
+							})]
+						}), !!e.description && /* @__PURE__ */ o(n, {
+							size: "xs",
+							type: "secondary",
+							className: "mt-0.5",
+							children: e.description
+						})]
+					})
+				]
+			}, e.id))
+		})
+	});
+}
+//#endregion
+//#region src/components/composed/timelines/payment-timeline/payment-timeline.tsx
+function E({ events: e, className: r }) {
+	return /* @__PURE__ */ o(i, {
+		title: "Payment Timeline",
+		className: t("payment-timeline--component", r),
+		children: /* @__PURE__ */ o("div", {
+			className: "mt-5 space-y-0",
+			children: e.map((r, i) => {
+				let a = r.icon;
+				return /* @__PURE__ */ s("div", {
+					className: "flex gap-4",
+					children: [/* @__PURE__ */ s("div", {
+						className: "flex flex-col items-center",
+						children: [/* @__PURE__ */ o("div", {
+							className: t("flex size-8 items-center justify-center rounded-full", r.done ? "bg-success/20" : "bg-muted"),
+							children: /* @__PURE__ */ o(a, { className: t("size-3.5", r.done ? "text-success" : "text-muted-foreground") })
+						}), i < e.length - 1 && /* @__PURE__ */ o("div", { className: t("mt-1 h-8 w-px", r.done ? "bg-success/30" : "bg-border") })]
+					}), /* @__PURE__ */ s("div", {
+						className: "pb-6",
+						children: [
+							/* @__PURE__ */ o(n, {
+								weight: "medium",
+								children: r.label
+							}),
+							/* @__PURE__ */ o(n, {
+								size: "xs",
+								type: "secondary",
+								children: r.date
+							}),
+							!!r.amount && /* @__PURE__ */ o(n, {
+								size: "xs",
+								weight: "medium",
+								className: "mt-0.5 tabular-nums text-success",
+								children: r.amount
+							})
+						]
+					})]
+				}, r.label);
+			})
+		})
+	});
+}
+//#endregion
+//#region src/components/composed/timelines/activity-stream/types.ts
+var D = {
+	title: "Activity",
+	empty: "No activity yet"
+}, O = {
+	primary: "bg-primary/10 text-primary",
+	secondary: "bg-secondary text-secondary-foreground",
+	success: "bg-success/15 text-success",
+	info: "bg-info/15 text-info",
+	warning: "bg-warning/30 text-warning-foreground",
+	error: "bg-destructive/15 text-destructive"
+};
+function k({ items: r, className: a, strings: l }) {
+	let d = e(D, l);
+	return r.length === 0 ? /* @__PURE__ */ o(i, {
+		icon: /* @__PURE__ */ o(c, { className: "size-4" }),
+		title: d.title,
+		className: t("activity-stream--component", a),
+		children: /* @__PURE__ */ o(n, {
+			type: "secondary",
+			align: "center",
+			className: "py-6",
+			children: d.empty
+		})
+	}) : /* @__PURE__ */ o(i, {
+		icon: /* @__PURE__ */ o(c, { className: "size-4" }),
+		title: d.title,
+		className: a,
+		children: /* @__PURE__ */ o("ul", {
+			className: "space-y-3",
+			children: r.map((e, i) => {
+				let a = e.icon ?? u, c = i === r.length - 1;
+				return /* @__PURE__ */ s("li", {
+					className: "relative flex gap-3",
+					children: [/* @__PURE__ */ s("div", {
+						className: "relative flex flex-col items-center",
+						children: [/* @__PURE__ */ o("div", {
+							className: t("flex size-7 items-center justify-center rounded-full", O[e.iconVariant ?? "primary"]),
+							children: /* @__PURE__ */ o(a, { className: "size-3.5" })
+						}), !c && /* @__PURE__ */ o("div", { className: "mt-1 w-px flex-1 bg-border" })]
+					}), /* @__PURE__ */ s("div", {
+						className: "min-w-0 flex-1 pb-3",
+						children: [
+							/* @__PURE__ */ s("div", {
+								className: "flex flex-wrap items-baseline gap-x-1.5",
+								children: [
+									!!e.actor && /* @__PURE__ */ o(n, {
+										tag: "span",
+										weight: "semibold",
+										children: e.actor
+									}),
+									/* @__PURE__ */ o(n, {
+										tag: "span",
+										type: "secondary",
+										children: e.action
+									}),
+									!!e.target && /* @__PURE__ */ o(n, {
+										tag: "span",
+										weight: "medium",
+										children: e.target
+									})
+								]
+							}),
+							!!e.metadata && e.metadata.length > 0 && /* @__PURE__ */ o("div", {
+								className: "mt-1 flex flex-wrap gap-x-3 gap-y-0.5",
+								children: e.metadata.map((e) => /* @__PURE__ */ s(n, {
+									size: "xs",
+									type: "secondary",
+									children: [/* @__PURE__ */ s(n, {
+										tag: "span",
+										size: "xs",
+										type: "discrete",
+										children: [e.label, ": "]
+									}), e.value]
+								}, e.label))
+							}),
+							/* @__PURE__ */ o(n, {
+								size: "xxs",
+								type: "discrete",
+								className: "mt-0.5 tabular-nums",
+								children: e.timestamp
+							})
+						]
+					})]
+				}, e.id);
+			})
+		})
+	});
+}
+k.displayName = "ActivityStreamCard";
+//#endregion
+//#region src/components/composed/timelines/shared/timeline.tsx
+var A = {
+	sm: "size-2.5",
+	base: "size-3.5",
+	lg: "size-5"
+}, j = {
+	sm: "size-2",
+	base: "size-2.5",
+	lg: "size-3"
+}, M = {
+	completed: {
+		bg: "bg-success",
+		text: "text-success-foreground",
+		ring: "ring-success/20",
+		line: "bg-success/40"
+	},
+	current: {
+		bg: "bg-primary",
+		text: "text-primary-foreground",
+		ring: "ring-primary/30",
+		line: "bg-primary/40"
+	},
+	pending: {
+		bg: "bg-muted",
+		text: "text-muted-foreground",
+		ring: "ring-border",
+		line: "bg-border"
+	},
+	success: {
+		bg: "bg-success",
+		text: "text-success-foreground",
+		ring: "ring-success/20",
+		line: "bg-success/40"
+	},
+	warning: {
+		bg: "bg-warning",
+		text: "text-warning-foreground",
+		ring: "ring-warning/30",
+		line: "bg-warning/40"
+	},
+	error: {
+		bg: "bg-destructive",
+		text: "text-destructive-foreground",
+		ring: "ring-destructive/30",
+		line: "bg-destructive/40"
+	},
+	neutral: {
+		bg: "bg-card",
+		text: "text-foreground",
+		ring: "ring-border",
+		line: "bg-border"
+	}
+};
+function N({ items: e, dotSize: r = "base", className: i }) {
+	return /* @__PURE__ */ o("ol", {
+		className: t("timeline--component", "relative space-y-4", i),
+		children: e.map((i, a) => {
+			let c = M[i.status ?? "neutral"], l = i.icon;
+			return /* @__PURE__ */ s("li", {
+				className: "relative flex gap-3",
+				children: [
+					a !== e.length - 1 && /* @__PURE__ */ o("span", {
+						"aria-hidden": "true",
+						className: t("absolute left-[7px] top-4 bottom-[-1rem] w-px", c.line, r === "lg" && "left-[10px]", r === "sm" && "left-[5px]")
+					}),
+					/* @__PURE__ */ o("div", {
+						className: "relative z-[1] mt-0.5 flex shrink-0 items-start",
+						children: /* @__PURE__ */ o("span", {
+							className: t("inline-flex items-center justify-center rounded-full ring-2", c.bg, c.text, c.ring, A[r]),
+							children: !!l && /* @__PURE__ */ o(l, { className: j[r] })
+						})
+					}),
+					/* @__PURE__ */ s("div", {
+						className: "min-w-0 flex-1 pb-2",
+						children: [
+							/* @__PURE__ */ s("div", {
+								className: "flex items-baseline justify-between gap-2",
+								children: [/* @__PURE__ */ o(n, {
+									weight: "medium",
+									className: "leading-tight",
+									children: i.title
+								}), !!i.timestamp && /* @__PURE__ */ o(n, {
+									size: "xs",
+									type: "secondary",
+									className: "shrink-0 tabular-nums",
+									children: i.timestamp
+								})]
+							}),
+							!!i.description && /* @__PURE__ */ o(n, {
+								size: "xs",
+								type: "secondary",
+								className: "mt-0.5",
+								children: i.description
+							}),
+							!!i.children && /* @__PURE__ */ o("div", {
+								className: "mt-2",
+								children: i.children
+							})
+						]
+					})
+				]
+			}, i.id);
+		})
+	});
+}
+N.displayName = "Timeline";
+//#endregion
+//#region src/components/composed/timelines/changelog/types.ts
+var P = {
+	title: "Changelog",
+	added: "Added",
+	removed: "Removed",
+	modified: "Modified",
+	fixed: "Fixed"
+}, F = {
+	added: "success",
+	removed: "error",
+	modified: "warning",
+	fixed: "current"
+}, I = {
+	added: "success",
+	removed: "error",
+	modified: "warning",
+	fixed: "info"
+}, L = {
+	added: g,
+	removed: h,
+	modified: _,
+	fixed: p
+};
+function R({ entries: c, className: l, strings: u }) {
+	let d = e(P, u), f = {
+		added: d.added,
+		removed: d.removed,
+		modified: d.modified,
+		fixed: d.fixed
+	}, m = c.map((e) => ({
+		id: e.id,
+		title: /* @__PURE__ */ s("span", {
+			className: "inline-flex flex-wrap items-center gap-1.5",
+			children: [
+				/* @__PURE__ */ o(r, {
+					variant: I[e.kind],
+					children: f[e.kind]
+				}),
+				/* @__PURE__ */ o("span", { children: e.title }),
+				!!e.version && /* @__PURE__ */ o(n, {
+					tag: "span",
+					size: "xxs",
+					type: "secondary",
+					className: "font-mono",
+					children: e.version
+				})
+			]
+		}),
+		description: e.author ? /* @__PURE__ */ s(a, { children: [e.description, /* @__PURE__ */ s(n, {
+			tag: "span",
+			size: "xxs",
+			type: "discrete",
+			className: "ml-2",
+			children: ["— ", e.author]
+		})] }) : e.description,
+		timestamp: e.timestamp,
+		icon: L[e.kind],
+		status: F[e.kind]
+	}));
+	return /* @__PURE__ */ o(i, {
+		icon: /* @__PURE__ */ o(p, { className: "size-4" }),
+		title: d.title,
+		className: t("changelog-timeline--component", l),
+		children: /* @__PURE__ */ o(N, {
+			items: m,
+			dotSize: "base"
+		})
+	});
+}
+R.displayName = "ChangelogTimelineCard";
+//#endregion
+//#region src/components/composed/timelines/milestones/types.ts
+var z = {
+	title: "Milestones",
+	completed: "Completed",
+	in_progress: "In progress",
+	upcoming: "Upcoming",
+	blocked: "Blocked",
+	dueOn: "Due"
+}, B = {
+	completed: "completed",
+	in_progress: "current",
+	upcoming: "pending",
+	blocked: "error"
+}, V = {
+	completed: l,
+	in_progress: d,
+	upcoming: u,
+	blocked: v
+}, H = {
+	completed: "success",
+	in_progress: "primary",
+	upcoming: "secondary",
+	blocked: "error"
+};
+function U({ milestones: a, className: c, strings: l }) {
+	let u = e(z, l), d = {
+		completed: u.completed,
+		in_progress: u.in_progress,
+		upcoming: u.upcoming,
+		blocked: u.blocked
+	}, p = a.map((e) => ({
+		id: e.id,
+		title: /* @__PURE__ */ s("span", {
+			className: "inline-flex flex-wrap items-center gap-1.5",
+			children: [/* @__PURE__ */ o("span", { children: e.title }), /* @__PURE__ */ o(r, {
+				variant: H[e.status],
+				children: d[e.status]
+			})]
+		}),
+		description: e.description,
+		timestamp: e.dueDate ? `${u.dueOn} ${e.dueDate}` : void 0,
+		icon: V[e.status],
+		status: B[e.status],
+		children: e.status === "in_progress" && typeof e.progress == "number" ? /* @__PURE__ */ s("div", {
+			className: "space-y-1",
+			children: [/* @__PURE__ */ o("div", {
+				className: "h-1.5 w-full overflow-hidden rounded-full bg-muted",
+				children: /* @__PURE__ */ o("div", {
+					className: t("h-full rounded-full bg-primary transition-[width] duration-300"),
+					style: { width: `${Math.max(0, Math.min(100, e.progress))}%` }
+				})
+			}), /* @__PURE__ */ s(n, {
+				size: "xxs",
+				type: "secondary",
+				className: "tabular-nums",
+				children: [Math.round(e.progress), "%"]
+			})]
+		}) : void 0
+	}));
+	return /* @__PURE__ */ o(i, {
+		icon: /* @__PURE__ */ o(f, { className: "size-4" }),
+		title: u.title,
+		className: t("milestones-timeline--component", c),
+		children: /* @__PURE__ */ o(N, {
+			items: p,
+			dotSize: "base"
+		})
+	});
+}
+U.displayName = "MilestonesTimelineCard";
+//#endregion
+export { k as ActivityStreamCard, R as ChangelogTimelineCard, U as MilestonesTimelineCard, T as OrderTimelineCard, E as PaymentTimelineCard, x as StepsCard, C as StepsHorizontal, N as Timeline, D as defaultActivityStreamStrings, P as defaultChangelogTimelineStrings, z as defaultMilestonesTimelineStrings };
+
+//# sourceMappingURL=index.js.map