@classytic/fluid 0.4.1 → 0.5.0

package/dist/timeline-HJtWf4Op.mjs

@@ -0,0 +1,804 @@
+import { t as cn } from "./utils-DQ5SCVoW.mjs";
+import * as React$1 from "react";
+import { memo, useState } from "react";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { AlertTriangle, Check, ChevronDownIcon, ChevronUpIcon, Circle, Copy, MinusIcon, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+
+//#region src/components/accordion-wrapper.tsx
+/**
+* AccordionSection - Single collapsible section with smooth animation
+*
+* @example
+* ```tsx
+* <AccordionSection title="Settings" icon={<Settings className="h-4 w-4" />}>
+*   <div>Content here</div>
+* </AccordionSection>
+* ```
+*/
+const AccordionSection = memo(function AccordionSection({ title, icon, children, defaultOpen = false, className, badge }) {
+	return /* @__PURE__ */ jsx(Accordion, {
+		defaultValue: defaultOpen ? ["section"] : [],
+		className,
+		children: /* @__PURE__ */ jsxs(AccordionItem, {
+			value: "section",
+			className: "border-0",
+			children: [/* @__PURE__ */ jsx(AccordionTrigger, {
+				className: "py-3 hover:no-underline",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [
+						icon && /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground",
+							children: icon
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "font-medium",
+							children: title
+						}),
+						badge
+					]
+				})
+			}), /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx("div", {
+				className: "pt-2",
+				children
+			}) })]
+		})
+	});
+});
+/**
+* FaqAccordion - FAQ-style accordion where only one item can be open by default
+*
+* @example
+* ```tsx
+* <FaqAccordion
+*   items={[
+*     { id: "1", question: "What is this?", answer: "A FAQ accordion" },
+*     { id: "2", question: "How does it work?", answer: "Click to expand" },
+*   ]}
+* />
+* ```
+*/
+const FaqAccordion = memo(function FaqAccordion({ items, defaultOpen, className, multiple = false }) {
+	return /* @__PURE__ */ jsx(Accordion, {
+		defaultValue: defaultOpen ? [defaultOpen] : [],
+		multiple,
+		className: cn("w-full", className),
+		children: items.map((item) => /* @__PURE__ */ jsxs(AccordionItem, {
+			value: item.id,
+			children: [/* @__PURE__ */ jsx(AccordionTrigger, {
+				className: "text-left",
+				children: item.question
+			}), /* @__PURE__ */ jsx(AccordionContent, { children: item.answer })]
+		}, item.id))
+	});
+});
+
+//#endregion
+//#region src/components/card-wrapper.tsx
+const CARD_VARIANTS = {
+	default: "",
+	outline: "border-2",
+	ghost: "border-0 shadow-none bg-transparent",
+	elevated: "shadow-lg border-0",
+	primary: "border-primary/20 bg-primary/5",
+	secondary: "border-secondary/20 bg-secondary/5",
+	destructive: "border-destructive/20 bg-destructive/5",
+	success: "border-green-500/20 bg-green-500/5",
+	warning: "border-yellow-500/20 bg-yellow-500/5"
+};
+const CARD_SIZES = {
+	sm: "p-3",
+	default: "p-6",
+	lg: "p-8",
+	xl: "p-10"
+};
+const CARD_CONTENT_SIZES = {
+	sm: "pt-3",
+	default: "pt-6",
+	lg: "pt-8",
+	xl: "pt-10"
+};
+function CardWrapper({ title, description, headerRight, children, footer, className, headerClassName, contentClassName, footerClassName, variant = "default", size = "default", hideHeader = false }) {
+	return /* @__PURE__ */ jsxs(Card, {
+		className: cn(CARD_VARIANTS[variant], className),
+		children: [
+			!hideHeader && (title || description || headerRight) && /* @__PURE__ */ jsx(CardHeader, {
+				className: cn(CARD_SIZES[size], "pb-4", headerClassName),
+				children: /* @__PURE__ */ jsxs("div", {
+					className: cn("flex items-start justify-between gap-4", !headerRight && "flex-col"),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: headerRight ? "" : "space-y-1.5",
+						children: [title && /* @__PURE__ */ jsx(CardTitle, {
+							className: "text-lg font-semibold",
+							children: title
+						}), description && /* @__PURE__ */ jsx(CardDescription, { children: description })]
+					}), headerRight && /* @__PURE__ */ jsx("div", {
+						className: "shrink-0",
+						children: headerRight
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsx(CardContent, {
+				className: cn(hideHeader ? CARD_SIZES[size] : CARD_CONTENT_SIZES[size], contentClassName),
+				children
+			}),
+			footer && /* @__PURE__ */ jsx(CardFooter, {
+				className: cn(CARD_SIZES[size], "pt-4 border-t", footerClassName),
+				children: /* @__PURE__ */ jsx("div", {
+					className: "w-full",
+					children: footer
+				})
+			})
+		]
+	});
+}
+const DATA_CARD_COLS = {
+	1: "grid-cols-1",
+	2: "grid-cols-2",
+	3: "grid-cols-2 md:grid-cols-3",
+	4: "grid-cols-2 md:grid-cols-4"
+};
+function DataCard({ title, data, cols = 3, className, ...props }) {
+	return /* @__PURE__ */ jsx(CardWrapper, {
+		title,
+		className: cn("space-y-4", className),
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("grid gap-4", DATA_CARD_COLS[cols]),
+			children: data.map((item, index) => /* @__PURE__ */ jsxs("div", {
+				className: "space-y-1",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "text-sm text-muted-foreground",
+					children: item.label
+				}), /* @__PURE__ */ jsx("p", {
+					className: cn("text-lg font-semibold", item.color),
+					children: item.value
+				})]
+			}, index))
+		})
+	});
+}
+function LoadingCard({ title, description, className, ...props }) {
+	return /* @__PURE__ */ jsx(CardWrapper, {
+		title,
+		description,
+		className,
+		...props,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-center py-8",
+			children: [/* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-primary" }), /* @__PURE__ */ jsx("span", {
+				className: "ml-2",
+				children: "Loading..."
+			})]
+		})
+	});
+}
+const STATS_CARD_VARIANTS = {
+	default: "",
+	success: "bg-green-50 border-green-200 dark:bg-green-950/30 dark:border-green-900",
+	warning: "bg-yellow-50 border-yellow-200 dark:bg-yellow-950/30 dark:border-yellow-900",
+	danger: "bg-red-50 border-red-200 dark:bg-red-950/30 dark:border-red-900",
+	info: "bg-blue-50 border-blue-200 dark:bg-blue-950/30 dark:border-blue-900"
+};
+const STATS_ICON_VARIANTS = {
+	default: "text-muted-foreground",
+	success: "text-green-600 dark:text-green-400",
+	warning: "text-yellow-600 dark:text-yellow-400",
+	danger: "text-red-600 dark:text-red-400",
+	info: "text-blue-600 dark:text-blue-400"
+};
+const STATS_ICON_WRAPPER_VARIANTS = {
+	default: "bg-muted border border-border",
+	success: "bg-green-100/50 dark:bg-green-900/30",
+	warning: "bg-yellow-100/50 dark:bg-yellow-900/30",
+	danger: "bg-red-100/50 dark:bg-red-900/30",
+	info: "bg-blue-100/50 dark:bg-blue-900/30",
+	purple: "bg-purple-100/50 dark:bg-purple-900/30",
+	orange: "bg-orange-100/50 dark:bg-orange-900/30"
+};
+const ICON_COLOR_TEXT = {
+	default: "text-muted-foreground",
+	success: "text-green-600 dark:text-green-400",
+	warning: "text-yellow-600 dark:text-yellow-400",
+	danger: "text-red-600 dark:text-red-400",
+	info: "text-blue-600 dark:text-blue-400",
+	purple: "text-purple-600 dark:text-purple-400",
+	orange: "text-orange-600 dark:text-orange-400"
+};
+function StatsCard({ title, value, description, icon, trend, className, statsVariant = "default", iconColor, iconClassName, ...props }) {
+	const effectiveIconWrapperClass = iconColor ? STATS_ICON_WRAPPER_VARIANTS[iconColor] ?? STATS_ICON_WRAPPER_VARIANTS.default : STATS_ICON_WRAPPER_VARIANTS[statsVariant];
+	const effectiveIconTextClass = iconColor ? ICON_COLOR_TEXT[iconColor] ?? ICON_COLOR_TEXT.default : STATS_ICON_VARIANTS[statsVariant];
+	return /* @__PURE__ */ jsxs(CardWrapper, {
+		className: cn("relative overflow-hidden", iconColor ? "" : STATS_CARD_VARIANTS[statsVariant], className),
+		size: "sm",
+		hideHeader: true,
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "space-y-1",
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						className: "text-sm font-medium text-muted-foreground",
+						children: title
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-2xl font-bold",
+						children: value
+					}),
+					description && /* @__PURE__ */ jsx("p", {
+						className: "text-xs text-muted-foreground",
+						children: description
+					})
+				]
+			}), icon && /* @__PURE__ */ jsx("div", {
+				className: cn("p-2 rounded-md", effectiveIconWrapperClass, effectiveIconTextClass, iconClassName),
+				children: icon
+			})]
+		}), trend && /* @__PURE__ */ jsx("div", {
+			className: cn("absolute top-2 right-2 text-xs px-2 py-1 rounded-full", trend.type === "up" && "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300", trend.type === "down" && "bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-300", trend.type === "neutral" && "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300"),
+			children: trend.value
+		})]
+	});
+}
+function DraggableCard({ title, subtitle, badges, actions, details, dragHandleProps, className, isDragging, isHidden, children, ...props }) {
+	return /* @__PURE__ */ jsx(CardWrapper, {
+		hideHeader: true,
+		className: cn("transition-all", isDragging && "shadow-lg rotate-2", isHidden && "opacity-50", className),
+		contentClassName: "!pt-4",
+		...props,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-3",
+			children: [
+				dragHandleProps && /* @__PURE__ */ jsx("div", {
+					...dragHandleProps,
+					className: "mt-1 cursor-grab hover:text-foreground",
+					children: dragHandleProps.icon || /* @__PURE__ */ jsxs("svg", {
+						xmlns: "http://www.w3.org/2000/svg",
+						width: "16",
+						height: "16",
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "2",
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						className: "text-muted-foreground",
+						children: [
+							/* @__PURE__ */ jsx("circle", {
+								cx: "9",
+								cy: "12",
+								r: "1"
+							}),
+							/* @__PURE__ */ jsx("circle", {
+								cx: "9",
+								cy: "5",
+								r: "1"
+							}),
+							/* @__PURE__ */ jsx("circle", {
+								cx: "9",
+								cy: "19",
+								r: "1"
+							}),
+							/* @__PURE__ */ jsx("circle", {
+								cx: "15",
+								cy: "12",
+								r: "1"
+							}),
+							/* @__PURE__ */ jsx("circle", {
+								cx: "15",
+								cy: "5",
+								r: "1"
+							}),
+							/* @__PURE__ */ jsx("circle", {
+								cx: "15",
+								cy: "19",
+								r: "1"
+							})
+						]
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex-1 min-w-0 space-y-3",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-wrap items-center gap-2",
+							children: [title && /* @__PURE__ */ jsx("h4", {
+								className: "font-medium",
+								children: title
+							}), badges && /* @__PURE__ */ jsx("div", {
+								className: "flex flex-wrap gap-1",
+								children: badges
+							})]
+						}),
+						subtitle && /* @__PURE__ */ jsx("p", {
+							className: "text-xs text-muted-foreground break-words",
+							children: subtitle
+						}),
+						details,
+						children
+					]
+				}),
+				actions && /* @__PURE__ */ jsx("div", {
+					className: "flex items-center gap-2 flex-shrink-0",
+					children: actions
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+//#region src/components/detail-view.tsx
+const COLUMN_CLASSES = {
+	1: "grid-cols-1",
+	2: "grid-cols-1 sm:grid-cols-2",
+	3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
+};
+const SIZE_LABEL = {
+	sm: "text-xs",
+	default: "text-sm",
+	lg: "text-sm"
+};
+const SIZE_VALUE = {
+	sm: "text-sm",
+	default: "text-sm",
+	lg: "text-base"
+};
+function DetailView({ items, columns = 1, layout = "stacked", size = "default", dividers = false, striped = false, bordered = false, title, description, className, children }) {
+	const visibleItems = items?.filter((item) => !item.hidden) || [];
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(bordered && "border rounded-lg overflow-hidden", className),
+		children: [(title || description) && /* @__PURE__ */ jsxs("div", {
+			className: cn("space-y-1", bordered ? "px-4 py-3 border-b bg-muted/30" : "mb-4"),
+			children: [title && /* @__PURE__ */ jsx("h3", {
+				className: "text-base font-semibold",
+				children: title
+			}), description && /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-muted-foreground",
+				children: description
+			})]
+		}), children ? /* @__PURE__ */ jsx("div", {
+			className: cn("grid", COLUMN_CLASSES[columns], bordered && "p-4"),
+			children
+		}) : layout === "horizontal" ? /* @__PURE__ */ jsx(HorizontalLayout, {
+			items: visibleItems,
+			size,
+			dividers,
+			striped,
+			bordered
+		}) : layout === "inline" ? /* @__PURE__ */ jsx(InlineLayout, {
+			items: visibleItems,
+			columns,
+			size,
+			bordered
+		}) : /* @__PURE__ */ jsx(StackedLayout, {
+			items: visibleItems,
+			columns,
+			size,
+			dividers,
+			bordered
+		})]
+	});
+}
+function StackedLayout({ items, columns, size, dividers, bordered }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("grid gap-4", COLUMN_CLASSES[columns], bordered && "p-4"),
+		children: items.map((item, index) => /* @__PURE__ */ jsxs("div", {
+			className: cn("space-y-1", item.fullWidth && columns > 1 && "col-span-full", dividers && index > 0 && "pt-4 border-t"),
+			children: [/* @__PURE__ */ jsx("dt", {
+				className: cn("text-muted-foreground font-medium", SIZE_LABEL[size]),
+				children: item.label
+			}), /* @__PURE__ */ jsx("dd", {
+				className: cn("text-foreground", SIZE_VALUE[size], item.className),
+				children: item.render ? item.render() : item.value ?? /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground/50",
+					children: "-"
+				})
+			})]
+		}, index))
+	});
+}
+function HorizontalLayout({ items, size, dividers, striped, bordered }) {
+	return /* @__PURE__ */ jsx("dl", {
+		className: cn(bordered && "divide-y"),
+		children: items.map((item, index) => /* @__PURE__ */ jsxs("div", {
+			className: cn("flex items-start gap-4 py-3", bordered && "px-4", striped && index % 2 === 0 && "bg-muted/30", dividers && !bordered && index > 0 && "border-t"),
+			children: [/* @__PURE__ */ jsx("dt", {
+				className: cn("text-muted-foreground font-medium w-1/3 shrink-0", SIZE_LABEL[size]),
+				children: item.label
+			}), /* @__PURE__ */ jsx("dd", {
+				className: cn("text-foreground flex-1 min-w-0", SIZE_VALUE[size], item.className),
+				children: item.render ? item.render() : item.value ?? /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground/50",
+					children: "-"
+				})
+			})]
+		}, index))
+	});
+}
+function InlineLayout({ items, columns, size, bordered }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("grid gap-x-6 gap-y-2", COLUMN_CLASSES[columns], bordered && "p-4"),
+		children: items.map((item, index) => /* @__PURE__ */ jsxs("div", {
+			className: cn("flex items-center justify-between gap-2 py-1", item.fullWidth && columns > 1 && "col-span-full"),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: cn("text-muted-foreground", SIZE_LABEL[size]),
+				children: item.label
+			}), /* @__PURE__ */ jsx("span", {
+				className: cn("text-foreground font-medium text-right", SIZE_VALUE[size], item.className),
+				children: item.render ? item.render() : item.value ?? "-"
+			})]
+		}, index))
+	});
+}
+function DetailItem({ label, children, value, className, labelClassName, layout = "stacked" }) {
+	const content = children ?? value ?? /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground/50",
+		children: "-"
+	});
+	if (layout === "horizontal") return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-start gap-4 py-3", className),
+		children: [/* @__PURE__ */ jsx("dt", {
+			className: cn("text-sm text-muted-foreground font-medium w-1/3 shrink-0", labelClassName),
+			children: label
+		}), /* @__PURE__ */ jsx("dd", {
+			className: "text-sm text-foreground flex-1 min-w-0",
+			children: content
+		})]
+	});
+	if (layout === "inline") return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center justify-between gap-2 py-1", className),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: cn("text-sm text-muted-foreground", labelClassName),
+			children: label
+		}), /* @__PURE__ */ jsx("span", {
+			className: "text-sm text-foreground font-medium text-right",
+			children: content
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("space-y-1", className),
+		children: [/* @__PURE__ */ jsx("dt", {
+			className: cn("text-sm text-muted-foreground font-medium", labelClassName),
+			children: label
+		}), /* @__PURE__ */ jsx("dd", {
+			className: "text-sm text-foreground",
+			children: content
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/copy-button.tsx
+async function copyToClipboard(text, options) {
+	try {
+		await navigator.clipboard.writeText(text);
+		return true;
+	} catch {
+		return false;
+	}
+}
+function CopyButton({ value, className, size = "sm", variant = "ghost", showToast = true, toastMessage = "Copied to clipboard", errorMessage = "Failed to copy to clipboard", timeout = 2e3, children, ...props }) {
+	const [copied, setCopied] = useState(false);
+	const handleCopy = async () => {
+		if (!value) return;
+		if (await copyToClipboard(value, {
+			showToast,
+			successMessage: toastMessage,
+			errorMessage
+		})) {
+			setCopied(true);
+			setTimeout(() => setCopied(false), timeout);
+		}
+	};
+	return /* @__PURE__ */ jsx(Button, {
+		variant,
+		size,
+		className: cn("h-6 w-6 p-0", className),
+		onClick: handleCopy,
+		disabled: !value,
+		"aria-label": copied ? "Copied to clipboard" : "Copy to clipboard",
+		...props,
+		children: children || (copied ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 text-green-600" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" }))
+	});
+}
+function CopyText({ value, displayValue, className, textClassName, buttonClassName, maxLength = 30, showButton = true, ...buttonProps }) {
+	const truncatedValue = displayValue || (value && value.length > maxLength ? `${value.substring(0, maxLength)}...` : value || "N/A");
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-2", className),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: cn("font-medium", textClassName),
+			title: value || "N/A",
+			children: truncatedValue
+		}), showButton && value && /* @__PURE__ */ jsx(CopyButton, {
+			value,
+			className: buttonClassName,
+			...buttonProps
+		})]
+	});
+}
+function CopyCodeBlock({ value, className, language, showLineNumbers = false, ...buttonProps }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative group", className),
+		children: [/* @__PURE__ */ jsx("pre", {
+			className: "bg-muted p-4 rounded-md overflow-x-auto text-sm",
+			children: /* @__PURE__ */ jsx("code", {
+				className: language ? `language-${language}` : "",
+				children: value
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity",
+			children: /* @__PURE__ */ jsx(CopyButton, {
+				value,
+				variant: "secondary",
+				size: "sm",
+				...buttonProps
+			})
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/info-row.tsx
+function InfoRow({ label, value, copyable = false, icon: Icon }) {
+	if (!value && value !== 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col sm:flex-row sm:justify-between sm:items-center py-3 gap-2 group hover:bg-muted rounded-md px-3 -mx-3 transition-colors",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 min-w-0",
+			children: [Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-muted-foreground flex-shrink-0" }), /* @__PURE__ */ jsx("span", {
+				className: "text-sm font-medium text-muted-foreground truncate",
+				children: label
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "sm:text-right min-w-0 flex-shrink-0",
+			children: copyable ? /* @__PURE__ */ jsx(CopyText, {
+				value: String(value),
+				textClassName: "text-foreground font-semibold",
+				maxLength: 40,
+				className: "justify-start sm:justify-end"
+			}) : /* @__PURE__ */ jsx("span", {
+				className: "font-semibold text-foreground block truncate max-w-full sm:max-w-[250px]",
+				title: value?.toString() || "N/A",
+				children: value?.toString() || "N/A"
+			})
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/pill.tsx
+function Pill({ variant = "secondary", themed = false, className, ...props }) {
+	return /* @__PURE__ */ jsx(Badge, {
+		className: cn("gap-2 rounded-full px-3 py-1.5 font-normal", className),
+		variant,
+		...props
+	});
+}
+function PillAvatar({ fallback, className, src, alt, ...props }) {
+	return /* @__PURE__ */ jsxs(Avatar, {
+		className: cn("-ml-1 h-4 w-4", className),
+		children: [/* @__PURE__ */ jsx(AvatarImage, {
+			src,
+			alt,
+			...props
+		}), /* @__PURE__ */ jsx(AvatarFallback, { children: fallback })]
+	});
+}
+function PillButton({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		className: cn("-my-2 -mr-2 size-6 rounded-full p-0.5 hover:bg-foreground/5", className),
+		size: "icon",
+		variant: "ghost",
+		...props
+	});
+}
+function PillStatus({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center gap-2 border-r pr-2 font-medium", className),
+		...props,
+		children
+	});
+}
+function PillIndicator({ variant = "success", pulse = false }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "relative flex size-2",
+		children: [
+			pulse && /* @__PURE__ */ jsx("span", { className: cn("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75", variant === "success" && "bg-emerald-400", variant === "error" && "bg-rose-400", variant === "warning" && "bg-amber-400", variant === "info" && "bg-sky-400") }),
+			/* @__PURE__ */ jsx("span", { className: cn("relative inline-flex size-2 rounded-full", variant === "success" && "bg-emerald-500", variant === "error" && "bg-rose-500", variant === "warning" && "bg-amber-500", variant === "info" && "bg-sky-500") }),
+			/* @__PURE__ */ jsxs("span", {
+				className: "sr-only",
+				children: [variant, " status"]
+			})
+		]
+	});
+}
+function PillDelta({ className, delta }) {
+	if (!delta) return /* @__PURE__ */ jsx(MinusIcon, { className: cn("size-3 text-muted-foreground", className) });
+	if (delta > 0) return /* @__PURE__ */ jsx(ChevronUpIcon, { className: cn("size-3 text-emerald-500", className) });
+	return /* @__PURE__ */ jsx(ChevronDownIcon, { className: cn("size-3 text-rose-500", className) });
+}
+function PillIcon({ icon: Icon, className, ...props }) {
+	return /* @__PURE__ */ jsx(Icon, {
+		className: cn("size-3 text-muted-foreground", className),
+		size: 12,
+		...props
+	});
+}
+function PillAvatarGroup({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("-space-x-1 flex items-center", "[&>*:not(:first-of-type)]:mask-[radix-gradient(circle_9px_at_-4px_50%,transparent_99%,white_100%)]", className),
+		...props,
+		children
+	});
+}
+
+//#endregion
+//#region src/components/timeline.tsx
+const STATUS_CONFIG = {
+	default: {
+		dotClass: "bg-muted-foreground/20 text-muted-foreground",
+		lineClass: "bg-border",
+		defaultIcon: Circle
+	},
+	success: {
+		dotClass: "bg-green-500/20 text-green-600 dark:text-green-400",
+		lineClass: "bg-green-500/30",
+		defaultIcon: Check
+	},
+	error: {
+		dotClass: "bg-red-500/20 text-red-600 dark:text-red-400",
+		lineClass: "bg-red-500/30",
+		defaultIcon: X
+	},
+	warning: {
+		dotClass: "bg-yellow-500/20 text-yellow-600 dark:text-yellow-400",
+		lineClass: "bg-yellow-500/30",
+		defaultIcon: AlertTriangle
+	},
+	pending: {
+		dotClass: "bg-muted text-muted-foreground animate-pulse",
+		lineClass: "bg-border border-dashed",
+		defaultIcon: Circle
+	},
+	active: {
+		dotClass: "bg-primary/20 text-primary ring-2 ring-primary/30",
+		lineClass: "bg-primary/30",
+		defaultIcon: Circle
+	}
+};
+const SIZE_CONFIG = {
+	sm: {
+		dot: "h-6 w-6",
+		icon: "h-3 w-3",
+		gap: "gap-3",
+		text: "text-xs"
+	},
+	default: {
+		dot: "h-8 w-8",
+		icon: "h-4 w-4",
+		gap: "gap-4",
+		text: "text-sm"
+	},
+	lg: {
+		dot: "h-10 w-10",
+		icon: "h-5 w-5",
+		gap: "gap-5",
+		text: "text-base"
+	}
+};
+function Timeline({ items, orientation = "vertical", size = "default", showConnectors = true, reverse = false, className }) {
+	const sizeConfig = SIZE_CONFIG[size];
+	const orderedItems = reverse ? [...items].reverse() : items;
+	if (orientation === "horizontal") return /* @__PURE__ */ jsx("div", {
+		className: cn("flex overflow-x-auto", sizeConfig.gap, className),
+		children: orderedItems.map((item, index) => /* @__PURE__ */ jsx(HorizontalTimelineItem, {
+			item,
+			isLast: index === orderedItems.length - 1,
+			showConnector: showConnectors,
+			size
+		}, index))
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("relative", className),
+		children: orderedItems.map((item, index) => /* @__PURE__ */ jsx(VerticalTimelineItem, {
+			item,
+			isLast: index === orderedItems.length - 1,
+			showConnector: showConnectors,
+			size
+		}, index))
+	});
+}
+function VerticalTimelineItem({ item, isLast, showConnector, size }) {
+	const config = STATUS_CONFIG[item.status || "default"];
+	const sizeConfig = SIZE_CONFIG[size];
+	const renderIcon = () => {
+		if (React$1.isValidElement(item.icon)) return item.icon;
+		return /* @__PURE__ */ jsx(item.icon || config.defaultIcon, { className: sizeConfig.icon });
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex", sizeConfig.gap, "pb-6 last:pb-0"),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center shrink-0",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: cn("flex items-center justify-center rounded-full shrink-0", sizeConfig.dot, config.dotClass),
+				children: renderIcon()
+			}), showConnector && !isLast && /* @__PURE__ */ jsx("div", { className: cn("w-0.5 flex-1 mt-2", config.lineClass) })]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1 pt-0.5 pb-2",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-start justify-between gap-2",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "min-w-0",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: cn("font-medium leading-tight", sizeConfig.text),
+							children: item.title
+						}), item.label && /* @__PURE__ */ jsx("p", {
+							className: "text-xs text-muted-foreground mt-0.5",
+							children: item.label
+						})]
+					}), item.timestamp && /* @__PURE__ */ jsx("time", {
+						className: "text-xs text-muted-foreground whitespace-nowrap shrink-0",
+						children: item.timestamp
+					})]
+				}),
+				item.description && /* @__PURE__ */ jsx("div", {
+					className: "text-sm text-muted-foreground mt-1",
+					children: item.description
+				}),
+				item.content && /* @__PURE__ */ jsx("div", {
+					className: "mt-2",
+					children: item.content
+				})
+			]
+		})]
+	});
+}
+function HorizontalTimelineItem({ item, isLast, showConnector, size }) {
+	const config = STATUS_CONFIG[item.status || "default"];
+	const sizeConfig = SIZE_CONFIG[size];
+	const renderIcon = () => {
+		if (React$1.isValidElement(item.icon)) return item.icon;
+		return /* @__PURE__ */ jsx(item.icon || config.defaultIcon, { className: sizeConfig.icon });
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-center min-w-[120px]",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center w-full",
+			children: [
+				/* @__PURE__ */ jsx("div", { className: cn("h-0.5 flex-1", showConnector ? config.lineClass : "bg-transparent") }),
+				/* @__PURE__ */ jsx("div", {
+					className: cn("flex items-center justify-center rounded-full shrink-0 mx-1", sizeConfig.dot, config.dotClass),
+					children: renderIcon()
+				}),
+				/* @__PURE__ */ jsx("div", { className: cn("h-0.5 flex-1", showConnector && !isLast ? config.lineClass : "bg-transparent") })
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "text-center mt-2 px-2",
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: cn("font-medium leading-tight", sizeConfig.text),
+					children: item.title
+				}),
+				item.timestamp && /* @__PURE__ */ jsx("time", {
+					className: "text-xs text-muted-foreground",
+					children: item.timestamp
+				}),
+				item.description && /* @__PURE__ */ jsx("div", {
+					className: "text-xs text-muted-foreground mt-1",
+					children: item.description
+				})
+			]
+		})]
+	});
+}
+
+//#endregion
+export { FaqAccordion as S, DataCard as _, PillButton as a, StatsCard as b, PillIndicator as c, CopyButton as d, CopyCodeBlock as f, CardWrapper as g, DetailView as h, PillAvatarGroup as i, PillStatus as l, DetailItem as m, Pill as n, PillDelta as o, CopyText as p, PillAvatar as r, PillIcon as s, Timeline as t, InfoRow as u, DraggableCard as v, AccordionSection as x, LoadingCard as y };