@mohasinac/appkit 2.3.0 → 2.3.1

package/dist/features/auctions/columns/index.js

@@ -0,0 +1,63 @@
+import { buildColumns, } from "../../../ui/columns";
+// --- Auction columns ----------------------------------------------------------
+/**
+ * Default admin column definitions for an auction table.
+ *
+ * @example
+ * const columns = buildAuctionColumns<MyAuction>({
+ *   extras: [{ key: "reservePrice", header: "Reserve", render: (a) => a.reservePrice ?? "—" }],
+ * });
+ */
+export const auctionAdminColumns = [
+    { key: "title", header: "Title", sortable: true },
+    {
+        key: "startingBid",
+        header: "Starting Bid",
+        sortable: true,
+        render: (a) => `${a.currency} ${a.startingBid.toLocaleString()}`,
+    },
+    {
+        key: "currentBid",
+        header: "Current Bid",
+        sortable: true,
+        render: (a) => a.currentBid != null
+            ? `${a.currency} ${a.currentBid.toLocaleString()}`
+            : "No bids",
+    },
+    {
+        key: "bidCount",
+        header: "Bids",
+        sortable: true,
+        render: (a) => a.bidCount.toLocaleString(),
+    },
+    { key: "status", header: "Status", sortable: true },
+    {
+        key: "featured",
+        header: "Featured",
+        render: (a) => (a.featured ? "Yes" : "No"),
+    },
+    { key: "auctionEndDate", header: "Ends At", sortable: true },
+    { key: "createdAt", header: "Created", sortable: true },
+];
+export function buildAuctionColumns(opts) {
+    return buildColumns(auctionAdminColumns, opts);
+}
+// --- Bid columns --------------------------------------------------------------
+export const bidAdminColumns = [
+    { key: "bidderDisplayName", header: "Bidder" },
+    {
+        key: "amount",
+        header: "Amount",
+        sortable: true,
+        render: (b) => `${b.currency} ${b.amount.toLocaleString()}`,
+    },
+    {
+        key: "isWinning",
+        header: "Winning",
+        render: (b) => (b.isWinning ? "Yes" : "—"),
+    },
+    { key: "placedAt", header: "Placed At", sortable: true },
+];
+export function buildBidColumns(opts) {
+    return buildColumns(bidAdminColumns, opts);
+}

package/dist/features/auctions/components/AuctionCard.d.ts

@@ -0,0 +1,26 @@
+import type { AuctionItem } from "../types";
+interface AuctionCountdownProps {
+    endsAt: string;
+    className?: string;
+    labels?: {
+        ended?: string;
+        hours?: string;
+        mins?: string;
+        secs?: string;
+    };
+}
+export declare function AuctionCountdown({ endsAt, className, labels, }: AuctionCountdownProps): import("react/jsx-runtime").JSX.Element;
+interface AuctionCardProps {
+    auction: AuctionItem;
+    labels?: {
+        currentBid?: string;
+        startingBid?: string;
+        bids?: string;
+        placeBid?: string;
+        ended?: string;
+    };
+    onBid?: (auction: AuctionItem) => void;
+    className?: string;
+}
+export declare function AuctionCard({ auction, labels, onBid, className, }: AuctionCardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/features/auctions/components/AuctionCard.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Article, Button, Div, Heading, Row, Span, Text } from "../../../ui";
+import { formatCurrency } from "../../../utils/number.formatter";
+import { getDefaultCurrency } from "../../../core/baseline-resolver";
+import { THEME_CONSTANTS } from "../../../tokens";
+function useCountdown(endsAt) {
+    const [msLeft, setMsLeft] = useState(() => new Date(endsAt).getTime() - Date.now());
+    useEffect(() => {
+        const id = setInterval(() => {
+            setMsLeft(new Date(endsAt).getTime() - Date.now());
+        }, 1000);
+        return () => clearInterval(id);
+    }, [endsAt]);
+    if (msLeft <= 0)
+        return null;
+    const totalSecs = Math.floor(msLeft / 1000);
+    const h = Math.floor(totalSecs / 3600);
+    const m = Math.floor((totalSecs % 3600) / 60);
+    const s = totalSecs % 60;
+    return { h, m, s };
+}
+export function AuctionCountdown({ endsAt, className = "", labels = {}, }) {
+    const countdown = useCountdown(endsAt);
+    if (!countdown) {
+        return (_jsx(Span, { className: `text-sm font-medium text-red-600 ${className}`, children: labels.ended ?? "Ended" }));
+    }
+    const pad = (n) => String(n).padStart(2, "0");
+    return (_jsxs(Row, { className: `gap-1 text-sm font-mono ${className}`, children: [_jsx(Span, { className: "rounded bg-gray-900 dark:bg-slate-700 px-1.5 py-0.5 text-white", children: pad(countdown.h) }), _jsx(Span, { className: "text-gray-400 dark:text-zinc-500", children: ":" }), _jsx(Span, { className: "rounded bg-gray-900 dark:bg-slate-700 px-1.5 py-0.5 text-white", children: pad(countdown.m) }), _jsx(Span, { className: "text-gray-400 dark:text-zinc-500", children: ":" }), _jsx(Span, { className: "rounded bg-gray-900 dark:bg-slate-700 px-1.5 py-0.5 text-white", children: pad(countdown.s) })] }));
+}
+export function AuctionCard({ auction, labels = {}, onBid, className = "", }) {
+    const hasEnded = new Date(auction.auctionEndDate) <= new Date();
+    const displayBid = auction.currentBid ?? auction.startingBid;
+    return (_jsxs(Article, { className: `rounded-xl border border-gray-200 dark:border-slate-700 bg-white dark:bg-slate-900 overflow-hidden shadow-sm hover:shadow-md transition-shadow ${className}`, children: [auction.mainImage && (_jsxs(Div, { className: "aspect-square overflow-hidden relative", children: [_jsx(Div, { role: "img", "aria-label": auction.title, className: "h-full w-full bg-center bg-cover", style: { backgroundImage: `url(${auction.mainImage})` } }), _jsx(Span, { className: "absolute top-2 left-2 rounded-full bg-orange-500 px-2 py-0.5 text-xs font-bold text-white", children: "AUCTION" })] })), _jsxs(Div, { className: "p-4", children: [_jsx(Heading, { level: 3, className: `font-semibold text-gray-900 dark:text-zinc-100 text-sm leading-snug mb-2 ${THEME_CONSTANTS.utilities.textClamp2}`, children: auction.title }), _jsxs(Row, { justify: "between", className: "mb-2", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-xs text-gray-400 dark:text-zinc-500", children: labels.currentBid ?? "Current bid" }), _jsx(Text, { className: "text-base font-bold text-gray-900 dark:text-zinc-100", children: formatCurrency(displayBid, getDefaultCurrency()) })] }), _jsx(Div, { className: "text-right", children: _jsxs(Text, { className: "text-xs text-gray-400 dark:text-zinc-500", children: [auction.bidCount, " ", labels.bids ?? "bids"] }) })] }), _jsx(Div, { className: "mb-3", children: _jsx(AuctionCountdown, { endsAt: auction.auctionEndDate, labels: { ended: labels.ended } }) }), !hasEnded && onBid && (_jsx(Button, { type: "button", variant: "warning", onClick: () => onBid(auction), className: "w-full rounded-lg bg-orange-500 py-2 text-sm font-medium text-white hover:bg-orange-600 transition-colors", children: labels.placeBid ?? "Place Bid" }))] })] }));
+}

package/dist/features/auctions/components/AuctionDetailPageView.d.ts

@@ -0,0 +1,4 @@
+export interface AuctionDetailPageViewProps {
+    id: string;
+}
+export declare function AuctionDetailPageView({ id }: AuctionDetailPageViewProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/features/auctions/components/AuctionDetailPageView.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { productRepository } from "../../../repositories";
+import { listBidsByProduct } from "../../auctions/actions/bid-actions";
+import { ROUTES } from "../../../next";
+import { getDefaultCurrency } from "../../../core/baseline-resolver";
+import { Button, Container, Div, Heading, Input, Main, Row, Section, Span, Stack, Text, } from "../../../ui";
+import { AuctionDetailView } from "../../products/components/AuctionDetailView";
+import { BidHistory } from "../../products/components/BidHistory";
+import { RelatedProducts } from "../../products/components/RelatedProducts";
+import { MarketplaceAuctionGrid } from "./MarketplaceAuctionGrid";
+export async function AuctionDetailPageView({ id }) {
+    const [product, bidsResult] = await Promise.all([
+        productRepository.findByIdOrSlug(id).catch(() => undefined),
+        listBidsByProduct(id, { pageSize: 20 }).catch(() => null),
+    ]);
+    const relatedDocs = product
+        ? await productRepository
+            .findByCategory(product.category ?? "")
+            .catch(() => [])
+        : [];
+    if (!product) {
+        return (_jsx(Main, { children: _jsx(Section, { className: "py-20", children: _jsx(Container, { size: "md", children: _jsxs(Stack, { align: "center", gap: "md", className: "text-center", children: [_jsx(Heading, { level: 1, className: "text-2xl font-semibold text-zinc-900 dark:text-zinc-50", children: "Auction Not Found" }), _jsx(Text, { className: "text-zinc-500", children: "This auction may have ended or the link is incorrect." }), _jsx(Link, { href: String(ROUTES.PUBLIC.AUCTIONS), className: "text-sm font-medium text-primary-600 hover:underline", children: "Browse Auctions" })] }) }) }) }));
+    }
+    const p = product;
+    const currency = p.currency || getDefaultCurrency();
+    const currentBid = typeof p.currentBid === "number" ? p.currentBid : p.startingBid ?? p.price ?? 0;
+    const currentBidFormatted = new Intl.NumberFormat(undefined, {
+        style: "currency",
+        currency,
+    }).format(currentBid);
+    const startingBidFormatted = new Intl.NumberFormat(undefined, {
+        style: "currency",
+        currency,
+    }).format(p.startingBid ?? p.price ?? 0);
+    const images = Array.isArray(p.images) ? p.images : p.imageUrl ? [p.imageUrl] : [];
+    const primaryImage = images[0];
+    const endDate = p.auctionEndDate ? new Date(p.auctionEndDate) : null;
+    const isEnded = endDate ? endDate < new Date() : false;
+    const bidCount = typeof p.bidCount === "number" ? p.bidCount : 0;
+    return (_jsx(AuctionDetailView, { renderGallery: () => primaryImage ? (_jsx(Div, { className: "overflow-hidden rounded-xl border border-zinc-100 dark:border-zinc-800", children: _jsx(Div, { role: "img", "aria-label": p.title ?? p.name ?? "Auction item", className: "aspect-square w-full bg-cover bg-center", style: { backgroundImage: `url(${primaryImage})` } }) })) : (_jsx(Div, { className: "overflow-hidden rounded-xl border border-zinc-100 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900", children: _jsx(Div, { className: "flex aspect-square items-center justify-center text-zinc-300 dark:text-zinc-700", children: _jsxs("svg", { width: "64", height: "64", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }), _jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), _jsx("path", { d: "M21 15l-5-5L5 21" })] }) }) })), renderInfo: () => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 1, className: "text-2xl font-bold text-zinc-900 dark:text-zinc-50", children: p.title ?? p.name ?? "Auction Item" }), _jsxs(Row, { align: "center", gap: "sm", wrap: true, children: [_jsx(Span, { className: "text-2xl font-semibold text-primary-600 dark:text-primary-400", children: currentBidFormatted }), _jsxs(Span, { className: "text-sm text-zinc-500", children: [bidCount, " ", bidCount === 1 ? "bid" : "bids"] }), isEnded && (_jsx(Span, { className: "rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-700 dark:bg-red-900/30 dark:text-red-400", children: "Ended" }))] }), endDate && !isEnded && (_jsxs(Text, { className: "text-sm text-zinc-600 dark:text-zinc-400", children: ["Ends: ", endDate.toLocaleString()] })), p.description && (_jsx(Text, { className: "text-sm leading-relaxed text-zinc-600 dark:text-zinc-400", children: typeof p.description === "string" ? p.description : "" })), p.sellerName && (_jsxs(Row, { align: "center", gap: "xs", children: [_jsx(Span, { className: "text-xs text-zinc-500", children: "Listed by" }), _jsx(Span, { className: "text-xs font-medium text-zinc-700 dark:text-zinc-300", children: p.sellerName })] }))] })), renderBidForm: () => (_jsx(Div, { className: "rounded-xl border border-zinc-100 bg-zinc-50 p-5 dark:border-zinc-800 dark:bg-zinc-900", children: _jsxs(Stack, { gap: "sm", children: [_jsxs(Text, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: ["Current bid: ", currentBidFormatted] }), _jsxs(Text, { className: "text-xs text-zinc-500", children: ["Starting bid: ", startingBidFormatted] }), _jsx(Input, { type: "number", placeholder: `Minimum bid`, min: currentBid + 1, "aria-label": "Your bid amount", disabled: isEnded }), _jsx(Button, { variant: "primary", size: "md", className: "w-full", disabled: isEnded, children: isEnded ? "Auction Ended" : "Place Bid" })] }) })), renderMobileBidForm: () => !isEnded ? (_jsx(Div, { className: "rounded-xl border border-zinc-100 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-900 lg:hidden", children: _jsxs(Stack, { gap: "sm", children: [_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(Span, { className: "text-base font-semibold text-primary-600", children: currentBidFormatted }), _jsxs(Span, { className: "text-xs text-zinc-500", children: [bidCount, " bids"] })] }), _jsx(Button, { variant: "primary", size: "md", className: "w-full", children: "Place Bid" })] }) })) : null, renderBidHistory: () => {
+            const bids = (bidsResult?.items ?? []).map((b) => ({
+                id: b.id,
+                bidderId: b.userId ?? b.bidderId ?? "",
+                bidderName: b.bidderName ?? b.userName,
+                amount: b.bidAmount ?? b.amount ?? 0,
+                placedAt: b.createdAt ?? b.bidAt ?? "",
+            }));
+            return (_jsx(BidHistory, { bids: bids, isEmpty: bids.length === 0, labels: { title: "Bid History" } }));
+        }, renderRelated: () => {
+            const related = relatedDocs
+                .filter((r) => r.id !== product.id && r.isAuction !== false)
+                .slice(0, 4)
+                .map((r) => ({
+                id: String(r.id ?? ""),
+                title: String(r.name ?? r.title ?? "Auction Item"),
+                price: typeof r.price === "number" ? r.price : 0,
+                currency: typeof r.currency === "string" ? r.currency : undefined,
+                mainImage: Array.isArray(r.images) ? r.images[0] : typeof r.imageUrl === "string" ? r.imageUrl : undefined,
+                isAuction: true,
+                auctionEndDate: r.auctionEndDate,
+                startingBid: typeof r.startingBid === "number" ? r.startingBid : undefined,
+                currentBid: typeof r.currentBid === "number" ? r.currentBid : undefined,
+                bidCount: typeof r.bidCount === "number" ? r.bidCount : undefined,
+                slug: typeof r.slug === "string" ? r.slug : undefined,
+            }));
+            if (related.length === 0)
+                return null;
+            return (_jsx(RelatedProducts, { labels: { title: "Similar Auctions" }, renderGrid: () => (_jsx(MarketplaceAuctionGrid, { auctions: related, gridClassName: "grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4" })) }));
+        } }));
+}

package/dist/features/auctions/components/AuctionsListView.d.ts

@@ -0,0 +1 @@
+export declare function AuctionsListView(): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/features/auctions/components/AuctionsListView.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { productRepository } from "../../../repositories";
+import { Container, Heading, Main, Section } from "../../../ui";
+import { AdSlot } from "../../homepage/components/AdSlot";
+import { AuctionsIndexListing } from "../../products/components/AuctionsIndexListing";
+export async function AuctionsListView() {
+    const result = await productRepository
+        .list({
+        filters: "status==published,isAuction==true",
+        sorts: "auctionEndDate",
+        page: 1,
+        pageSize: 24,
+    })
+        .catch(() => null);
+    const initial = result ?? null;
+    return (_jsx(Main, { children: _jsx(Section, { className: "py-10", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 1, className: "mb-8 text-3xl font-semibold text-zinc-900", children: "Live Auctions" }), _jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-6" }), _jsx(AuctionsIndexListing, { initialData: initial }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] }) }) }));
+}

package/dist/features/auctions/components/MarketplaceAuctionCard.d.ts

@@ -0,0 +1,56 @@
+import { type WishlistToggleActions } from "../../wishlist";
+export interface MarketplaceAuctionCardData {
+    id: string;
+    title: string;
+    description?: string;
+    price: number;
+    currency?: string;
+    mainImage?: string;
+    images?: string[];
+    video?: {
+        url?: string;
+        thumbnailUrl?: string;
+    };
+    isAuction?: boolean;
+    auctionEndDate?: string | Date;
+    startingBid?: number;
+    currentBid?: number;
+    bidCount?: number;
+    featured?: boolean;
+    status?: string;
+    slug?: string;
+    buyNowPrice?: number;
+}
+export interface MarketplaceAuctionCardLabels {
+    selectItem?: string;
+    deselectItem?: string;
+    liveBadge?: string;
+    endingSoon?: string;
+    ended?: string;
+    sold?: string;
+    typeBadge?: string;
+    currentBid?: string;
+    startingBid?: string;
+    totalBids?: (count: number) => string;
+    placeBid?: string;
+    buyout?: string;
+    addToWishlist?: string;
+    removeFromWishlist?: string;
+    videoLabel?: string;
+}
+export interface MarketplaceAuctionCardProps {
+    product: MarketplaceAuctionCardData;
+    buyoutPrice?: number;
+    className?: string;
+    variant?: "grid" | "card" | "fluid" | "list";
+    selectable?: boolean;
+    isSelected?: boolean;
+    onSelect?: (id: string, selected: boolean) => void;
+    inWishlist?: boolean;
+    href?: string;
+    hrefBuilder?: (product: MarketplaceAuctionCardData) => string;
+    onNavigate?: (href: string) => void;
+    wishlistActions?: WishlistToggleActions;
+    labels?: MarketplaceAuctionCardLabels;
+}
+export declare function MarketplaceAuctionCard({ product, buyoutPrice, className, variant, selectable, isSelected, onSelect, inWishlist: initialInWishlist, href, hrefBuilder, onNavigate, wishlistActions, labels, }: MarketplaceAuctionCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/auctions/components/MarketplaceAuctionCard.js

@@ -0,0 +1,115 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useRouter } from "next/navigation";
+import { Clock, Gavel, Heart, Play, ShoppingBag, Star } from "lucide-react";
+import { MediaImage } from "../../media";
+import { useWishlistToggle } from "../../wishlist";
+import { useCountdown } from "../../../react";
+import { ROUTES } from "../../../next";
+import { formatCurrency } from "../../../utils";
+import { getDefaultCurrency } from "../../../core/baseline-resolver";
+import { BaseListingCard, Button, Caption, Div, RichText, Row, Span, Text, TextLink, } from "../../../ui";
+import { normalizeRichTextHtml } from "../../../utils/string.formatter";
+import { THEME_CONSTANTS } from "../../../tokens";
+const DEFAULT_LABELS = {
+    selectItem: "Select item",
+    deselectItem: "Deselect item",
+    liveBadge: "Live",
+    endingSoon: "Ending soon",
+    ended: "Ended",
+    sold: "Sold",
+    typeBadge: "Auction",
+    currentBid: "Current bid",
+    startingBid: "Starting bid",
+    totalBids: (count) => `${count} bids`,
+    placeBid: "Place bid",
+    buyout: "Buyout",
+    addToWishlist: "Add to wishlist",
+    removeFromWishlist: "Remove from wishlist",
+    videoLabel: "Video available",
+};
+function resolveHref(product, href, hrefBuilder) {
+    if (href)
+        return href;
+    if (hrefBuilder)
+        return hrefBuilder(product);
+    return ROUTES.PUBLIC.AUCTION_DETAIL(product.id);
+}
+function formatCountdownLabel(remaining, endedLabel) {
+    if (!remaining)
+        return endedLabel;
+    const { days, hours, minutes, seconds } = remaining;
+    if (days > 0)
+        return `${days}d ${hours}h ${minutes}m`;
+    if (hours > 0)
+        return `${hours}h ${minutes}m ${seconds}s`;
+    return `${minutes}m ${seconds}s`;
+}
+export function MarketplaceAuctionCard({ product, buyoutPrice, className = "", variant = "grid", selectable = false, isSelected = false, onSelect, inWishlist: initialInWishlist = false, href, hrefBuilder, onNavigate, wishlistActions, labels, }) {
+    const router = useRouter();
+    const mergedLabels = { ...DEFAULT_LABELS, ...labels };
+    const baseVariant = variant === "list" ? "list" : "grid";
+    const [hovered, setHovered] = useState(false);
+    const [imageIndex, setImageIndex] = useState(0);
+    const intervalRef = useRef(null);
+    const remaining = useCountdown(product.auctionEndDate);
+    const { inWishlist, isLoading: wishlistLoading, toggle, } = useWishlistToggle(product.id, initialInWishlist, wishlistActions);
+    const auctionHref = resolveHref(product, href, hrefBuilder);
+    const isEnded = remaining === null;
+    const isEndingSoon = remaining !== null && remaining.days === 0 && remaining.hours < 1;
+    const displayBid = (product.currentBid ?? 0) > 0
+        ? product.currentBid
+        : (product.startingBid ?? product.price);
+    const bidCount = product.bidCount ?? 0;
+    const hasCurrentBid = (product.currentBid ?? 0) > 0;
+    const hasVideo = Boolean(product.video?.url);
+    const resolvedBuyoutPrice = buyoutPrice ?? product.buyNowPrice;
+    const images = [product.mainImage, ...(product.images ?? [])].filter(Boolean);
+    const currentSrc = images[imageIndex] ?? product.mainImage;
+    useEffect(() => {
+        if (hovered && images.length > 1) {
+            intervalRef.current = setInterval(() => {
+                setImageIndex((value) => (value + 1) % images.length);
+            }, 800);
+        }
+        else {
+            if (intervalRef.current)
+                clearInterval(intervalRef.current);
+            setImageIndex(0);
+        }
+        return () => {
+            if (intervalRef.current)
+                clearInterval(intervalRef.current);
+        };
+    }, [hovered, images.length]);
+    const handleNavigate = useCallback(() => {
+        if (onNavigate) {
+            onNavigate(auctionHref);
+            return;
+        }
+        router.push(auctionHref);
+    }, [auctionHref, onNavigate, router]);
+    const handleSelect = useCallback((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onSelect?.(product.id, !isSelected);
+    }, [isSelected, onSelect, product.id]);
+    const handleWishlist = useCallback(async (event) => {
+        event.stopPropagation();
+        try {
+            await toggle();
+        }
+        catch {
+            // The hook rolls back optimistic state when the mutation fails.
+        }
+    }, [toggle]);
+    const countdownClass = isEnded
+        ? "bg-zinc-100 text-zinc-500"
+        : isEndingSoon
+            ? "bg-amber-50 text-amber-700"
+            : "bg-emerald-50 text-emerald-700";
+    return (_jsxs(BaseListingCard, { isSelected: isSelected, isDisabled: isEnded, variant: baseVariant, className: className, children: [_jsxs(BaseListingCard.Hero, { aspect: "square", variant: baseVariant, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [_jsx(TextLink, { href: auctionHref, className: "absolute inset-0 block", children: _jsx(MediaImage, { src: currentSrc, alt: product.title, size: "card", fallback: "Auction image", className: `transition-transform duration-500 ${hovered && images.length > 1 ? "scale-105" : "scale-100"}` }) }), hasVideo && imageIndex === 0 ? (_jsx(Div, { className: "absolute right-2 top-2", children: _jsx(Span, { className: "flex h-8 w-8 items-center justify-center rounded-full bg-black/50 text-white", children: _jsx(Play, { className: "h-4 w-4", "aria-label": mergedLabels.videoLabel }) }) })) : null, images.length > 1 ? (_jsx(Div, { className: "pointer-events-none absolute bottom-2 left-1/2 flex -translate-x-1/2 gap-1", children: images.map((_, index) => (_jsx(Span, { className: `rounded-full transition-all duration-200 ${index === imageIndex ? "h-1.5 w-3 bg-white" : "h-1.5 w-1.5 bg-white/60"}` }, `${product.id}-image-${index}`))) })) : null, product.featured ? (_jsx(Div, { className: "pointer-events-none absolute left-2 top-2 z-10", children: _jsx(Star, { className: "h-5 w-5 fill-amber-400 text-amber-400" }) })) : null, selectable ? (_jsx(BaseListingCard.Checkbox, { selected: isSelected, onSelect: handleSelect, label: isSelected ? mergedLabels.deselectItem : mergedLabels.selectItem })) : null, _jsxs(Div, { className: `absolute left-2 z-10 flex flex-col gap-1 ${product.featured ? "top-8" : "top-2"}`, children: [!isEnded ? (_jsx(Span, { className: "rounded-full bg-rose-600/90 px-2 py-0.5 text-xs font-bold text-white", children: mergedLabels.liveBadge })) : null, isEndingSoon ? (_jsx(Span, { className: "rounded-full bg-amber-500/90 px-2 py-0.5 text-xs font-bold text-white", children: mergedLabels.endingSoon })) : null, isEnded ? (_jsx(Span, { className: "rounded-full bg-zinc-600/90 px-2 py-0.5 text-xs font-bold text-white", children: mergedLabels.ended })) : null, product.status === "sold" ? (_jsx(Span, { className: "rounded-full bg-zinc-700/90 px-2 py-0.5 text-xs font-bold text-white", children: mergedLabels.sold })) : null] }), _jsx(Div, { className: "pointer-events-none absolute bottom-2 right-2 z-10", children: _jsxs(Span, { className: "inline-flex items-center gap-1 rounded-full bg-amber-600/90 px-2 py-0.5 text-xs font-semibold text-white", children: [_jsx(Gavel, { className: "h-3 w-3" }), mergedLabels.typeBadge] }) })] }), _jsxs(BaseListingCard.Info, { variant: baseVariant, children: [_jsxs(Div, { className: "flex items-start gap-2", children: [_jsx(TextLink, { href: auctionHref, className: "min-w-0 flex-1 text-sm font-medium leading-snug text-zinc-900 transition-colors hover:text-primary", children: product.title }), wishlistActions ? (_jsx(Button, { type: "button", variant: "ghost", onClick: handleWishlist, disabled: wishlistLoading, "aria-label": inWishlist
+                                    ? mergedLabels.removeFromWishlist
+                                    : mergedLabels.addToWishlist, className: "-mt-0.5 rounded-full p-1", children: _jsx(Heart, { className: `h-4 w-4 ${inWishlist ? "fill-rose-500 text-rose-500" : "text-zinc-400"}` }) })) : null] }), variant === "list" && product.description ? (_jsx(RichText, { html: normalizeRichTextHtml(product.description), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: `${THEME_CONSTANTS.utilities.textClamp2} text-xs text-zinc-500` })) : null, _jsxs(Div, { children: [_jsx(Caption, { children: hasCurrentBid ? mergedLabels.currentBid : mergedLabels.startingBid }), _jsx(Text, { className: "text-base font-bold leading-none text-primary", children: formatCurrency(displayBid, getDefaultCurrency()) })] }), _jsxs(Row, { wrap: true, justify: "between", gap: "sm", className: "gap-x-2 gap-y-1", children: [_jsxs(Div, { className: `inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-semibold ${countdownClass}`, children: [_jsx(Clock, { className: "h-3 w-3" }), _jsx(Span, { children: formatCountdownLabel(remaining, mergedLabels.ended) })] }), _jsx(Caption, { children: mergedLabels.totalBids(bidCount) })] }), _jsx(Row, { wrap: true, gap: "xs", className: "mt-auto", children: isEnded ? (_jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "flex-1 cursor-not-allowed gap-1 px-2 text-xs opacity-60", disabled: true, children: _jsx(Span, { children: mergedLabels.ended }) })) : (_jsxs(_Fragment, { children: [_jsxs(Button, { type: "button", variant: "warning", size: "sm", className: "flex-1 gap-1 px-2 text-xs", onClick: handleNavigate, children: [_jsx(Gavel, { className: "h-3 w-3" }), _jsx(Span, { children: mergedLabels.placeBid })] }), resolvedBuyoutPrice ? (_jsxs(Button, { type: "button", variant: "danger", size: "sm", className: "flex-1 gap-1 px-2 text-xs", onClick: handleNavigate, children: [_jsx(ShoppingBag, { className: "h-3 w-3" }), _jsx(Span, { children: mergedLabels.buyout })] })) : null] })) })] })] }));
+}

package/dist/features/auctions/components/MarketplaceAuctionGrid.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+import type { WishlistToggleActions } from "../../wishlist";
+import { type MarketplaceAuctionCardData, type MarketplaceAuctionCardLabels } from "./MarketplaceAuctionCard";
+export interface MarketplaceAuctionGridLabels {
+    emptyTitle?: string;
+    emptyDescription?: string;
+}
+export interface MarketplaceAuctionGridProps {
+    auctions: MarketplaceAuctionCardData[];
+    loading?: boolean;
+    skeletonCount?: number;
+    variant?: "grid" | "card" | "fluid" | "list";
+    selectable?: boolean;
+    selectedIds?: string[];
+    onSelectionChange?: (ids: string[]) => void;
+    gridClassName?: string;
+    emptyIcon?: ReactNode;
+    labels?: MarketplaceAuctionGridLabels;
+    cardLabels?: MarketplaceAuctionCardLabels;
+    wishlistActions?: WishlistToggleActions;
+}
+export declare function MarketplaceAuctionGrid({ auctions, loading, skeletonCount, variant, selectable, selectedIds, onSelectionChange, gridClassName, emptyIcon, labels, cardLabels, wishlistActions, }: MarketplaceAuctionGridProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/auctions/components/MarketplaceAuctionGrid.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Gavel } from "lucide-react";
+import { Div, Row, Stack, Text } from "../../../ui";
+import { MarketplaceAuctionCard, } from "./MarketplaceAuctionCard";
+const DEFAULT_GRID_LABELS = {
+    emptyTitle: "No auctions found",
+    emptyDescription: "Check back later for live listings.",
+};
+function AuctionCardSkeleton({ variant = "grid", }) {
+    if (variant === "list") {
+        return (_jsxs(Div, { className: "flex min-h-[220px] flex-row overflow-hidden rounded-xl bg-zinc-200 animate-pulse", children: [_jsx(Div, { className: "aspect-square w-40 flex-shrink-0 bg-zinc-300" }), _jsxs(Div, { className: "flex-1 space-y-2 p-3", children: [_jsx(Div, { className: "h-4 w-2/3 rounded bg-zinc-300" }), _jsx(Div, { className: "h-3 w-full rounded bg-zinc-300" }), _jsx(Div, { className: "h-3 w-3/4 rounded bg-zinc-300" }), _jsx(Div, { className: "h-5 w-1/2 rounded bg-zinc-300" }), _jsxs(Row, { gap: "sm", children: [_jsx(Div, { className: "h-8 flex-1 rounded bg-zinc-300" }), _jsx(Div, { className: "h-8 flex-1 rounded bg-zinc-300" })] })] })] }));
+    }
+    return (_jsxs(Div, { className: "overflow-hidden rounded-xl bg-zinc-200 animate-pulse", children: [_jsx(Div, { className: "aspect-square bg-zinc-300" }), _jsxs(Div, { className: "space-y-2 p-3", children: [_jsx(Div, { className: "h-4 w-3/4 rounded bg-zinc-300" }), _jsx(Div, { className: "h-3 w-1/3 rounded bg-zinc-300" }), _jsx(Div, { className: "h-5 w-1/2 rounded bg-zinc-300" }), _jsxs(Row, { justify: "between", children: [_jsx(Div, { className: "h-3 w-1/4 rounded bg-zinc-300" }), _jsx(Div, { className: "h-3 w-1/3 rounded bg-zinc-300" })] }), _jsx(Row, { gap: "sm", children: _jsx(Div, { className: "h-8 flex-1 rounded bg-zinc-300" }) })] })] }));
+}
+export function MarketplaceAuctionGrid({ auctions, loading = false, skeletonCount = 12, variant = "grid", selectable = false, selectedIds = [], onSelectionChange, gridClassName, emptyIcon, labels, cardLabels, wishlistActions, }) {
+    const mergedLabels = { ...DEFAULT_GRID_LABELS, ...labels };
+    const handleSelect = (id, selected) => {
+        if (!onSelectionChange)
+            return;
+        if (selected) {
+            onSelectionChange([...selectedIds, id]);
+            return;
+        }
+        onSelectionChange(selectedIds.filter((selectedId) => selectedId !== id));
+    };
+    const containerClass = variant === "list"
+        ? "flex flex-col gap-4"
+        : `${gridClassName ?? "grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-4"}`;
+    if (loading) {
+        return (_jsx(Div, { className: containerClass, children: Array.from({ length: skeletonCount }).map((_, index) => (_jsx(AuctionCardSkeleton, { variant: variant }, `auction-skeleton-${index}`))) }));
+    }
+    if (auctions.length === 0) {
+        return (_jsxs(Stack, { align: "center", gap: "3", className: "justify-center py-24 text-center", children: [emptyIcon ?? _jsx(Gavel, { className: "h-16 w-16" }), _jsx(Text, { className: "text-xl font-medium text-zinc-900", children: mergedLabels.emptyTitle }), _jsx(Text, { className: "text-sm text-zinc-500", children: mergedLabels.emptyDescription })] }));
+    }
+    return (_jsx(Div, { className: containerClass, children: auctions.map((auction) => (_jsx(MarketplaceAuctionCard, { product: auction, variant: variant, selectable: selectable, isSelected: selectedIds.includes(auction.id), onSelect: handleSelect, labels: cardLabels, wishlistActions: wishlistActions }, auction.id))) }));
+}

package/dist/features/auctions/components/index.d.ts

@@ -0,0 +1,6 @@
+export { AuctionCard, AuctionCountdown } from "./AuctionCard";
+export { MarketplaceAuctionCard, type MarketplaceAuctionCardData, type MarketplaceAuctionCardLabels, type MarketplaceAuctionCardProps, } from "./MarketplaceAuctionCard";
+export { MarketplaceAuctionGrid, type MarketplaceAuctionGridLabels, type MarketplaceAuctionGridProps, } from "./MarketplaceAuctionGrid";
+export { AuctionsListView } from "./AuctionsListView";
+export { AuctionDetailPageView } from "./AuctionDetailPageView";
+export type { AuctionDetailPageViewProps } from "./AuctionDetailPageView";

package/dist/features/auctions/components/index.js

@@ -0,0 +1,5 @@
+export { AuctionCard, AuctionCountdown } from "./AuctionCard";
+export { MarketplaceAuctionCard, } from "./MarketplaceAuctionCard";
+export { MarketplaceAuctionGrid, } from "./MarketplaceAuctionGrid";
+export { AuctionsListView } from "./AuctionsListView";
+export { AuctionDetailPageView } from "./AuctionDetailPageView";

package/dist/features/auctions/hooks/useAuctions.d.ts

@@ -0,0 +1,50 @@
+import type { AuctionListResponse, AuctionListParams, AuctionItem, PublicBid } from "../types";
+import type { ProductItem } from "../../products/types";
+type AuctionListQuery = AuctionListParams | URLSearchParams | string;
+interface UseAuctionsOptions {
+    enabled?: boolean;
+    endpoint?: string;
+    initialData?: AuctionListResponse;
+    queryKeyPrefix?: string;
+}
+interface UseAuctionDetailOptions {
+    enabled?: boolean;
+    productEndpoint?: string;
+    bidsEndpoint?: string;
+    refetchIntervalMs?: number;
+    productQueryKeyPrefix?: string;
+    bidsQueryKeyPrefix?: string;
+}
+export declare function useAuctions(params?: AuctionListQuery, opts?: UseAuctionsOptions): {
+    data: AuctionListResponse | undefined;
+    auctions: AuctionItem[];
+    total: number;
+    totalPages: number;
+    hasMore: boolean;
+    isLoading: boolean;
+    error: string | null;
+    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<AuctionListResponse, Error>>;
+};
+export declare function useAuction(slug: string, opts?: {
+    enabled?: boolean;
+}): {
+    auction: AuctionItem | null;
+    isLoading: boolean;
+    error: string | null;
+    refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<AuctionItem | null, Error>>;
+};
+export declare function useAuctionBids(auctionSlug: string, limit?: number, opts?: {
+    enabled?: boolean;
+}): {
+    bids: import("..").BidRecord[];
+    total: number;
+    isLoading: boolean;
+    error: string | null;
+};
+export declare function useAuctionDetail(id: string, opts?: UseAuctionDetailOptions): {
+    productQuery: import("@tanstack/react-query").UseQueryResult<ProductItem | null, Error>;
+    product: ProductItem | null;
+    bidsQuery: import("@tanstack/react-query").UseQueryResult<PublicBid[], Error>;
+    bids: PublicBid[];
+};
+export {};

package/dist/features/auctions/hooks/useAuctions.js

@@ -0,0 +1,92 @@
+import { useQuery } from "@tanstack/react-query";
+import { apiClient } from "../../../http";
+import { AUCTION_ENDPOINTS, BID_ENDPOINTS, PRODUCT_ENDPOINTS } from "../../../constants/api-endpoints";
+function toQueryString(params) {
+    if (typeof params === "string") {
+        return params.startsWith("?") ? params.slice(1) : params;
+    }
+    if (params instanceof URLSearchParams) {
+        return params.toString();
+    }
+    const sp = new URLSearchParams();
+    Object.entries(params).forEach(([key, value]) => {
+        if (value !== undefined && value !== null && value !== "") {
+            sp.set(key, String(value));
+        }
+    });
+    return sp.toString();
+}
+export function useAuctions(params = {}, opts) {
+    const endpoint = opts?.endpoint ?? AUCTION_ENDPOINTS.LIST;
+    const queryKeyPrefix = opts?.queryKeyPrefix ?? "auctions";
+    const qs = toQueryString(params);
+    const { data, isLoading, error, refetch } = useQuery({
+        queryKey: [queryKeyPrefix, endpoint, qs],
+        queryFn: () => apiClient.get(`${endpoint}${qs ? `?${qs}` : ""}`),
+        enabled: opts?.enabled ?? true,
+        initialData: opts?.initialData,
+    });
+    return {
+        data,
+        auctions: data?.items ?? [],
+        total: data?.total ?? 0,
+        totalPages: data?.totalPages ?? 1,
+        hasMore: data?.hasMore ?? false,
+        isLoading,
+        error: error instanceof Error ? error.message : null,
+        refetch,
+    };
+}
+export function useAuction(slug, opts) {
+    const { data, isLoading, error, refetch } = useQuery({
+        queryKey: ["auction", slug],
+        queryFn: () => apiClient.get(AUCTION_ENDPOINTS.BY_SLUG(slug)),
+        enabled: (opts?.enabled ?? true) && !!slug,
+    });
+    return {
+        auction: data ?? null,
+        isLoading,
+        error: error instanceof Error ? error.message : null,
+        refetch,
+    };
+}
+export function useAuctionBids(auctionSlug, limit = 10, opts) {
+    const { data, isLoading, error } = useQuery({
+        queryKey: ["auction-bids", auctionSlug, limit],
+        queryFn: () => apiClient.get(`${AUCTION_ENDPOINTS.BIDS(auctionSlug)}?limit=${limit}`),
+        enabled: (opts?.enabled ?? true) && !!auctionSlug,
+        refetchInterval: 15000, // refresh every 15 s for real-time feel
+    });
+    return {
+        bids: data?.items ?? [],
+        total: data?.total ?? 0,
+        isLoading,
+        error: error instanceof Error ? error.message : null,
+    };
+}
+export function useAuctionDetail(id, opts) {
+    const enabled = opts?.enabled ?? true;
+    const productEndpoint = opts?.productEndpoint ?? PRODUCT_ENDPOINTS.BY_ID(id);
+    const bidsEndpoint = opts?.bidsEndpoint ?? BID_ENDPOINTS.BY_PRODUCT(id);
+    const productQueryKeyPrefix = opts?.productQueryKeyPrefix ?? "product";
+    const bidsQueryKeyPrefix = opts?.bidsQueryKeyPrefix ?? "bids";
+    const refetchIntervalMs = opts?.refetchIntervalMs ?? 60000;
+    const productQuery = useQuery({
+        queryKey: [productQueryKeyPrefix, id, productEndpoint],
+        queryFn: () => apiClient.get(productEndpoint),
+        enabled: enabled && Boolean(id),
+    });
+    const product = productQuery.data ?? null;
+    const bidsQuery = useQuery({
+        queryKey: [bidsQueryKeyPrefix, id, bidsEndpoint],
+        queryFn: () => apiClient.get(bidsEndpoint),
+        enabled: enabled && Boolean(product?.isAuction),
+        refetchInterval: refetchIntervalMs,
+    });
+    return {
+        productQuery,
+        product,
+        bidsQuery,
+        bids: bidsQuery.data ?? [],
+    };
+}