@m3000/market 0.0.1

package/dist/components/blocks/auction/AuctionLayout.d.ts

@@ -0,0 +1,63 @@
+import { ReactNode } from "react";
+
+//#region src/components/blocks/auction/AuctionLayout.d.ts
+interface AuctionLayoutProps {
+  children: ReactNode;
+  className?: string;
+  height?: string | number;
+}
+declare function AuctionLayout({
+  children,
+  className,
+  height
+}: AuctionLayoutProps): React.ReactElement;
+interface AuctionDetailsProps {
+  children: ReactNode;
+  className?: string;
+}
+declare function AuctionDetails({
+  children,
+  className
+}: AuctionDetailsProps): React.ReactElement;
+interface AuctionDetailsHeaderProps {
+  children: ReactNode;
+  className?: string;
+}
+declare function AuctionDetailsHeader({
+  children,
+  className
+}: AuctionDetailsHeaderProps): React.ReactElement;
+interface AuctionDetailsBodyProps {
+  children: ReactNode;
+  className?: string;
+}
+declare function AuctionDetailsBody({
+  children,
+  className
+}: AuctionDetailsBodyProps): React.ReactElement;
+interface AuctionDetailsFooterProps {
+  children: ReactNode;
+  className?: string;
+}
+declare function AuctionDetailsFooter({
+  children,
+  className
+}: AuctionDetailsFooterProps): React.ReactElement;
+interface AuctionRankingsContainerProps {
+  children: ReactNode;
+  className?: string;
+}
+declare function AuctionRankingsContainer({
+  children,
+  className
+}: AuctionRankingsContainerProps): React.ReactElement;
+interface AuctionBiddingPanelProps {
+  children: ReactNode;
+  className?: string;
+}
+declare function AuctionBiddingPanel({
+  children,
+  className
+}: AuctionBiddingPanelProps): React.ReactElement;
+//#endregion
+export { AuctionBiddingPanel, AuctionBiddingPanelProps, AuctionDetails, AuctionDetailsBody, AuctionDetailsBodyProps, AuctionDetailsFooter, AuctionDetailsFooterProps, AuctionDetailsHeader, AuctionDetailsHeaderProps, AuctionDetailsProps, AuctionLayout, AuctionLayoutProps, AuctionRankingsContainer, AuctionRankingsContainerProps };

package/dist/components/blocks/auction/AuctionLayout.js

@@ -0,0 +1,80 @@
+"use client";
+
+import { useAuctionContext } from "./AuctionContext.js";
+import { cn } from "../../../lib/cn.js";
+import { Button } from "../../primitives/Button.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/blocks/auction/AuctionLayout.tsx
+function AuctionLayout({ children, className, height = "calc(100vh - 4rem)" }) {
+	const heightStyle = typeof height === "number" ? `${height}px` : height;
+	const { isBiddingActive } = useAuctionContext();
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("relative grid overflow-hidden grid-rows-[minmax(0,1fr)_minmax(0,1fr)]", isBiddingActive && "grid-rows-1", "lg:grid-cols-2 lg:grid-rows-1", className),
+		style: { height: heightStyle },
+		children
+	});
+}
+function AuctionDetails({ children, className }) {
+	const { isBiddingActive } = useAuctionContext();
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("relative flex h-full min-h-0 flex-col overflow-hidden", "border-border", "lg:border-r", isBiddingActive && "overflow-hidden", className),
+		children
+	});
+}
+function AuctionDetailsHeader({ children, className }) {
+	const { isBiddingActive } = useAuctionContext();
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex min-h-0 grow flex-col p-6", isBiddingActive && [
+			"max-lg:overflow-hidden",
+			"max-lg:[&>*:nth-child(n+3):not(:last-child)]:hidden",
+			"max-lg:[&>*:last-child]:pointer-events-none",
+			"max-lg:[&>*:last-child]:absolute",
+			"max-lg:[&>*:last-child]:inset-x-6",
+			"max-lg:[&>*:last-child]:bottom-6",
+			"max-lg:[&>*:last-child]:top-28",
+			"max-lg:[&>*:last-child]:min-h-0",
+			"max-lg:[&>*:last-child]:overflow-hidden"
+		].join(" "), className),
+		children
+	});
+}
+function AuctionDetailsBody({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("hidden p-6 lg:block lg:min-h-0 lg:flex-1 lg:overflow-y-auto", className),
+		children
+	});
+}
+function AuctionDetailsFooter({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("mt-auto shrink-0 border-t border-border p-6", className),
+		children
+	});
+}
+function AuctionRankingsContainer({ children, className }) {
+	const { isBiddingActive } = useAuctionContext();
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("grid h-full min-h-0 grid-rows-[minmax(0,1fr)_auto]", isBiddingActive && "max-lg:absolute max-lg:inset-x-0 max-lg:bottom-0 max-lg:top-0 max-lg:z-20 max-lg:overflow-hidden max-lg:rounded-t-[1.75rem] max-lg:border-t max-lg:border-border max-lg:bg-background/95 max-lg:shadow-2xl max-lg:backdrop-blur-sm", className),
+		children
+	});
+}
+function AuctionBiddingPanel({ children, className }) {
+	const { isBiddingActive, startBidding, isAuctionEnded, setShowBidPreview } = useAuctionContext();
+	const handleStartBidding = () => {
+		startBidding();
+		setShowBidPreview(true);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("row-start-2 rounded-t-[1.75rem] border-t border-border bg-background p-6 lg:rounded-xl", className),
+		children: !isBiddingActive ? /* @__PURE__ */ jsx(Button, {
+			className: "w-full",
+			size: "lg",
+			disabled: isAuctionEnded,
+			onClick: handleStartBidding,
+			children: isAuctionEnded ? "Auction Ended" : "Start Bidding"
+		}) : children
+	});
+}
+
+//#endregion
+export { AuctionBiddingPanel, AuctionDetails, AuctionDetailsBody, AuctionDetailsFooter, AuctionDetailsHeader, AuctionLayout, AuctionRankingsContainer };

package/dist/components/blocks/auction/AuctionRankings.d.ts

@@ -0,0 +1,16 @@
+import { AuctionBid } from "../../../types/index.js";
+import { GroupItemContextValue } from "../../primitives/ranked-list/Ranking.js";
+//#region src/components/blocks/auction/AuctionRankings.d.ts
+interface AuctionRankingsProps {
+  className?: string;
+  renderBidRow?: (bid: AuctionBid, context: GroupItemContextValue<AuctionBid> & {
+    isOutbid: boolean;
+  }) => React.ReactNode;
+}
+declare function RankingsSkeleton(): React.ReactElement;
+declare function AuctionRankings({
+  className,
+  renderBidRow
+}: AuctionRankingsProps): React.ReactElement;
+//#endregion
+export { AuctionRankings, AuctionRankingsProps, RankingsSkeleton };

package/dist/components/blocks/auction/AuctionRankings.js

@@ -0,0 +1,334 @@
+"use client";
+
+import { formatShortRelative } from "../../../utils/format.js";
+import { getProjectedRankForPrice } from "../../../utils/rank-utils.js";
+import { useAuctionContext } from "./AuctionContext.js";
+import { cn } from "../../../lib/cn.js";
+import { Button } from "../../primitives/Button.js";
+import { Text } from "../../primitives/Text.js";
+import { Separator } from "../../primitives/Separator.js";
+import { Ranking } from "../../primitives/ranked-list/Ranking.js";
+import { Skeleton } from "../../primitives/Skeleton.js";
+import { useEffect, useMemo, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/blocks/auction/AuctionRankings.tsx
+function BidRow({ bid, rank, isOutbid, isUserBid, onTopUp, isAuctionEnded, formatPrice, currencySymbol }) {
+	const timeShort = formatShortRelative(bid.createdAt);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center justify-between gap-2 px-6 py-2", isOutbid && "opacity-50", isUserBid && "shadow-[inset_2px_0_0_0_var(--color-primary)]"),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 items-center gap-3",
+			children: [/* @__PURE__ */ jsxs(Text, {
+				color: "tertiary",
+				className: "w-8 shrink-0",
+				size: "1",
+				children: ["#", rank]
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "flex min-w-0 items-center gap-3",
+				children: [bid.bidder.avatarUrl && /* @__PURE__ */ jsx("img", {
+					src: bid.bidder.avatarUrl,
+					alt: "",
+					className: "size-6 shrink-0 rounded-full object-cover"
+				}), /* @__PURE__ */ jsx(Text, {
+					className: "truncate",
+					children: isUserBid ? "You" : bid.bidder.name || `${bid.bidder.id.slice(0, 6)}...`
+				})]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex shrink-0 items-center gap-4",
+			children: [
+				isUserBid && !isAuctionEnded && /* @__PURE__ */ jsx(Button, {
+					size: "xs",
+					color: "secondary",
+					onClick: onTopUp,
+					children: "Top up"
+				}),
+				/* @__PURE__ */ jsxs(Text, { children: [
+					formatPrice(bid.price),
+					" ",
+					currencySymbol
+				] }),
+				/* @__PURE__ */ jsx(Text, {
+					size: "1",
+					color: "tertiary",
+					className: "min-w-9 text-right tabular-nums",
+					suppressHydrationWarning: true,
+					children: timeShort
+				})
+			]
+		})]
+	});
+}
+function BidPreviewRow({ price, rank, onCancel, formatPrice, currencySymbol, previewRef }) {
+	return /* @__PURE__ */ jsxs("div", {
+		ref: previewRef,
+		className: "relative",
+		children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-0 animate-[pulse_2s_ease-in-out_infinite] bg-success/10" }), /* @__PURE__ */ jsxs("div", {
+			className: "relative flex items-center justify-between gap-2 px-6 py-2",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 items-center gap-3",
+				children: [/* @__PURE__ */ jsxs(Text, {
+					color: "tertiary",
+					className: "w-8 shrink-0",
+					size: "1",
+					children: ["#", rank]
+				}), /* @__PURE__ */ jsx("span", {
+					className: "flex min-w-0 items-center gap-3",
+					children: /* @__PURE__ */ jsx(Text, {
+						color: "secondary",
+						children: "New bid preview"
+					})
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 items-center gap-4",
+				children: [
+					/* @__PURE__ */ jsx(Button, {
+						size: "xs",
+						color: "tertiary",
+						onClick: onCancel,
+						children: "Cancel"
+					}),
+					/* @__PURE__ */ jsxs(Text, {
+						weight: "medium",
+						tabularNums: true,
+						children: [
+							formatPrice(price),
+							" ",
+							currencySymbol
+						]
+					}),
+					/* @__PURE__ */ jsx("span", { className: "min-w-9" })
+				]
+			})]
+		})]
+	});
+}
+function TopUpPreviewRow({ price, rank, onCancel, formatPrice, currencySymbol }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative shadow-[inset_2px_0_0_0_var(--color-success)]",
+		children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-0 animate-[pulse_2s_ease-in-out_infinite] bg-success/10" }), /* @__PURE__ */ jsxs("div", {
+			className: "relative flex items-center justify-between gap-2 px-6 py-2",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 items-center gap-3",
+				children: [/* @__PURE__ */ jsxs(Text, {
+					color: "tertiary",
+					className: "w-8 shrink-0",
+					size: "1",
+					children: ["#", rank]
+				}), /* @__PURE__ */ jsx("span", {
+					className: "flex min-w-0 items-center gap-3",
+					children: /* @__PURE__ */ jsx(Text, {
+						color: "secondary",
+						children: "Top-up preview"
+					})
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 items-center gap-4",
+				children: [
+					/* @__PURE__ */ jsx(Button, {
+						size: "xs",
+						color: "tertiary",
+						onClick: onCancel,
+						children: "Cancel"
+					}),
+					/* @__PURE__ */ jsxs(Text, {
+						weight: "medium",
+						tabularNums: true,
+						children: [
+							formatPrice(price),
+							" ",
+							currencySymbol
+						]
+					}),
+					/* @__PURE__ */ jsx("span", { className: "min-w-9" })
+				]
+			})]
+		})]
+	});
+}
+function RankingsSkeleton() {
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-between gap-2 px-6 py-3",
+		children: [/* @__PURE__ */ jsx(Text, {
+			render: /* @__PURE__ */ jsx("p", {}),
+			size: "3",
+			children: /* @__PURE__ */ jsx(Skeleton, { children: "username" })
+		}), /* @__PURE__ */ jsx(Text, {
+			render: /* @__PURE__ */ jsx("p", {}),
+			size: "3",
+			children: /* @__PURE__ */ jsx(Skeleton, { children: "0.00420 USD 11m" })
+		})]
+	}), /* @__PURE__ */ jsx(Separator, { orientation: "horizontal" })] });
+}
+function AuctionRankings({ className, renderBidRow }) {
+	const { mergedForRank, maxTotalItems, formatPrice, currencySymbol, bidValue, setBidValue, minBidValue, userBids, lockedBid, setLockedBid, showBidPreview, isAuctionEnded, cancelBidding, isBiddingActive } = useAuctionContext();
+	const userBidMap = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const ub of userBids) map.set(ub.id, ub);
+		return map;
+	}, [userBids]);
+	const previewRef = useRef(null);
+	const scrollContainerRef = useRef(null);
+	const showPreview = useMemo(() => {
+		if (!showBidPreview) return false;
+		if (lockedBid !== null) return false;
+		return bidValue >= minBidValue;
+	}, [
+		showBidPreview,
+		bidValue,
+		minBidValue,
+		lockedBid
+	]);
+	const previewIndex = useMemo(() => {
+		if (!showPreview) return 0;
+		const result = getProjectedRankForPrice(bidValue, mergedForRank, maxTotalItems);
+		return result.rank ? result.rank - 1 : 0;
+	}, [
+		showPreview,
+		bidValue,
+		mergedForRank,
+		maxTotalItems
+	]);
+	const prevBiddingActiveRef = useRef(false);
+	useEffect(() => {
+		const justStartedBidding = isBiddingActive && !prevBiddingActiveRef.current;
+		prevBiddingActiveRef.current = isBiddingActive;
+		if (!showPreview) return;
+		const scrollToPreview = () => {
+			if (previewRef.current && scrollContainerRef.current) {
+				const container = scrollContainerRef.current;
+				const preview = previewRef.current;
+				const stickyOffset = container.querySelector("[data-ranking-group-divider]")?.offsetHeight ?? 0;
+				const containerRect = container.getBoundingClientRect();
+				const previewRect = preview.getBoundingClientRect();
+				const visibleTop = containerRect.top + stickyOffset;
+				const visibleBottom = containerRect.bottom;
+				const isAbove = previewRect.top < visibleTop;
+				const isBelow = previewRect.bottom > visibleBottom;
+				if (justStartedBidding || isAbove || isBelow) {
+					let targetScrollTop = container.scrollTop;
+					if (justStartedBidding) {
+						const visibleHeight = container.clientHeight - stickyOffset;
+						targetScrollTop += previewRect.top - visibleTop - (visibleHeight - previewRect.height) / 2;
+					} else if (isAbove) targetScrollTop += previewRect.top - visibleTop;
+					else if (isBelow) targetScrollTop += previewRect.bottom - visibleBottom;
+					container.scrollTo({
+						top: Math.max(0, targetScrollTop),
+						behavior: "auto"
+					});
+				}
+			}
+		};
+		const frameId = requestAnimationFrame(() => {
+			requestAnimationFrame(scrollToPreview);
+		});
+		return () => cancelAnimationFrame(frameId);
+	}, [showPreview, isBiddingActive]);
+	const { lockedBidId, lockedBidOriginalIndex } = useMemo(() => {
+		if (lockedBid === null) return {
+			lockedBidId: null,
+			lockedBidOriginalIndex: null
+		};
+		const bidId = userBids.find((ub) => ub.globalBidId === lockedBid.bidId)?.id ?? null;
+		return {
+			lockedBidId: bidId,
+			lockedBidOriginalIndex: bidId !== null ? mergedForRank.findIndex((b) => b.id === bidId) : null
+		};
+	}, [
+		lockedBid,
+		userBids,
+		mergedForRank
+	]);
+	const allBids = useMemo(() => mergedForRank.filter((b) => b.id !== lockedBidId).map((b) => ({
+		id: b.id,
+		price: BigInt(b.price),
+		createdAt: new Date(b.created_at),
+		bidder: b.bidder ?? {
+			id: b.id,
+			name: "Unknown"
+		}
+	})), [mergedForRank, lockedBidId]);
+	const topUpPreviewIndex = useMemo(() => {
+		if (lockedBid === null || lockedBidId === null) return null;
+		const result = getProjectedRankForPrice(bidValue, mergedForRank.filter((b) => b.id !== lockedBidId), maxTotalItems);
+		return result.rank ? result.rank - 1 : 0;
+	}, [
+		lockedBid,
+		lockedBidId,
+		bidValue,
+		mergedForRank,
+		maxTotalItems
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: scrollContainerRef,
+		className: cn("min-h-0 flex-1 overflow-y-auto", className),
+		children: /* @__PURE__ */ jsxs(Ranking.Root, {
+			items: allBids,
+			getKey: (bid) => bid.id,
+			boundaries: [maxTotalItems],
+			labels: ["Winning Bids", "Outbid"],
+			children: [
+				showPreview && /* @__PURE__ */ jsx(Ranking.Slot, {
+					slotKey: "preview",
+					atIndex: previewIndex,
+					children: (context) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(BidPreviewRow, {
+						price: bidValue,
+						rank: context.rank,
+						onCancel: cancelBidding,
+						formatPrice,
+						currencySymbol,
+						previewRef
+					}), !context.isLastInGroup && /* @__PURE__ */ jsx(Separator, { orientation: "horizontal" })] })
+				}),
+				lockedBid !== null && topUpPreviewIndex !== null && /* @__PURE__ */ jsx(Ranking.Slot, {
+					slotKey: "topup-preview",
+					atIndex: topUpPreviewIndex,
+					children: (context) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TopUpPreviewRow, {
+						price: bidValue,
+						rank: context.rank,
+						onCancel: cancelBidding,
+						formatPrice,
+						currencySymbol
+					}), !context.isLastInGroup && /* @__PURE__ */ jsx(Separator, { orientation: "horizontal" })] })
+				}),
+				/* @__PURE__ */ jsx(Ranking.Empty, { children: /* @__PURE__ */ jsx(Text, {
+					color: "tertiary",
+					children: "No activity"
+				}) }),
+				/* @__PURE__ */ jsxs(Ranking.Group, { children: [/* @__PURE__ */ jsx(Ranking.GroupDivider, { className: "rounded-xl" }), /* @__PURE__ */ jsx(Ranking.GroupItem, { children: /* @__PURE__ */ jsx(Ranking.GroupItemValue, { children: (bid, context) => {
+					const isOutbid = context.groupIndex === 1;
+					const isBelowLockedBid = lockedBid !== null && lockedBidOriginalIndex !== null && lockedBidOriginalIndex >= 0 && context.globalIndex >= lockedBidOriginalIndex;
+					const extendedContext = {
+						...context,
+						isOutbid
+					};
+					const userBid = userBidMap.get(bid.id);
+					const isUserBid = !!userBid;
+					const handleTopUp = () => {
+						if (userBid) {
+							setLockedBid({
+								bidId: userBid.globalBidId,
+								priceValue: userBid.price
+							});
+							setBidValue(userBid.price);
+						}
+					};
+					return /* @__PURE__ */ jsxs(Fragment, { children: [renderBidRow ? renderBidRow(bid, extendedContext) : /* @__PURE__ */ jsx(BidRow, {
+						bid,
+						rank: context.globalIndex + 1,
+						isOutbid: isOutbid || isBelowLockedBid,
+						isUserBid,
+						onTopUp: handleTopUp,
+						isAuctionEnded,
+						formatPrice,
+						currencySymbol
+					}), !context.isLastInGroup && /* @__PURE__ */ jsx(Separator, { orientation: "horizontal" })] });
+				} }) })] })
+			]
+		})
+	});
+}
+
+//#endregion
+export { AuctionRankings, RankingsSkeleton };

package/dist/components/blocks/auction/AuctionStatusTag.d.ts

@@ -0,0 +1,15 @@
+//#region src/components/blocks/auction/AuctionStatusTag.d.ts
+interface AuctionStatusTagProps {
+  opensAt: Date | null;
+  endsAt: Date | null;
+  background?: "filled" | "transparent";
+  showCountdown?: boolean;
+}
+declare function AuctionStatusTag({
+  opensAt,
+  endsAt,
+  background,
+  showCountdown
+}: AuctionStatusTagProps): React.ReactElement | null;
+//#endregion
+export { AuctionStatusTag, AuctionStatusTagProps };

package/dist/components/blocks/auction/AuctionStatusTag.js

@@ -0,0 +1,60 @@
+"use client";
+
+import { formatDateTime } from "../../../utils/format.js";
+import { cn } from "../../../lib/cn.js";
+import { Countdown } from "../../primitives/countdown/Countdown.js";
+import { Text } from "../../primitives/Text.js";
+import { Tag } from "../../primitives/Tag.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/blocks/auction/AuctionStatusTag.tsx
+function getAuctionState(opensAt, endsAt) {
+	if (!opensAt || !endsAt) return "live";
+	const now = Date.now();
+	const open = opensAt.getTime();
+	const end = endsAt.getTime();
+	if (now < open) return "upcoming";
+	if (now > end) return "closed";
+	return "live";
+}
+const transparentTagClassName = "bg-transparent border-transparent p-0";
+function AuctionStatusTag({ opensAt, endsAt, background = "filled", showCountdown = false }) {
+	const state = getAuctionState(opensAt, endsAt);
+	const countdownTo = state === "live" ? endsAt : state === "upcoming" ? opensAt : null;
+	const tagClassName = cn("inline-flex items-center gap-1.5 p-2", background === "transparent" && transparentTagClassName);
+	if (state === "live" && endsAt) return /* @__PURE__ */ jsxs(Tag, {
+		className: tagClassName,
+		"aria-label": "Auction is live",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "relative flex size-2 shrink-0",
+			"aria-hidden": true,
+			children: [/* @__PURE__ */ jsx("span", { className: "absolute inline-flex size-full animate-ping rounded-full bg-success opacity-75" }), /* @__PURE__ */ jsx("span", { className: "relative inline-flex size-2 rounded-full bg-success" })]
+		}), /* @__PURE__ */ jsx(Text, {
+			size: "1",
+			suppressHydrationWarning: true,
+			children: showCountdown && countdownTo ? /* @__PURE__ */ jsxs(Fragment, { children: ["Live - ", /* @__PURE__ */ jsx(Countdown, { to: countdownTo })] }) : /* @__PURE__ */ jsxs(Fragment, { children: ["Live - Until ", formatDateTime(endsAt)] })
+		})]
+	});
+	if (state === "upcoming" && opensAt) return /* @__PURE__ */ jsx(Tag, {
+		className: tagClassName,
+		children: /* @__PURE__ */ jsx(Text, {
+			size: "1",
+			suppressHydrationWarning: true,
+			children: showCountdown && countdownTo ? /* @__PURE__ */ jsxs(Fragment, { children: ["Opens in ", /* @__PURE__ */ jsx(Countdown, { to: countdownTo })] }) : /* @__PURE__ */ jsxs(Fragment, { children: ["Opens ", formatDateTime(opensAt)] })
+		})
+	});
+	if (state === "closed" && endsAt) return /* @__PURE__ */ jsxs(Tag, {
+		className: tagClassName,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "size-2.5 shrink-0 rounded-full bg-muted-foreground",
+			"aria-hidden": true
+		}), /* @__PURE__ */ jsxs(Text, {
+			suppressHydrationWarning: true,
+			children: ["Closed - ended ", formatDateTime(endsAt)]
+		})]
+	});
+	return null;
+}
+
+//#endregion
+export { AuctionStatusTag };

package/dist/components/blocks/auction/AuctionSuggestedBids.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+
+//#region src/components/blocks/auction/AuctionSuggestedBids.d.ts
+interface SuggestedBidContextValue {
+  value: bigint;
+  display: string;
+  position: number;
+  index: number;
+  isSelected: boolean;
+  onSelect: () => void;
+  disabled: boolean;
+  projectedRank: number | null;
+  isWinning: boolean;
+}
+declare function useSuggestedBid(): SuggestedBidContextValue;
+interface AuctionSuggestedBidsProps {
+  className?: string;
+  count?: number;
+  children: (context: SuggestedBidContextValue) => React.ReactNode;
+}
+declare function AuctionSuggestedBidsRoot({
+  className,
+  count,
+  children
+}: AuctionSuggestedBidsProps): React.ReactElement | null;
+interface AuctionSuggestedBidsItemProps {
+  labels?: string[];
+}
+declare function AuctionSuggestedBidsItem({
+  labels
+}: AuctionSuggestedBidsItemProps): React.ReactElement;
+interface AuctionSuggestedBidsComponent {
+  Root: typeof AuctionSuggestedBidsRoot;
+  Item: typeof AuctionSuggestedBidsItem;
+}
+declare const AuctionSuggestedBids: AuctionSuggestedBidsComponent;
+//#endregion
+export { AuctionSuggestedBids, AuctionSuggestedBidsProps, SuggestedBidContextValue, useSuggestedBid };