@medialane/ui 0.1.5 → 0.2.0

package/dist/components/token-card.cjs

@@ -0,0 +1,281 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var token_card_exports = {};
+__export(token_card_exports, {
+  TokenCard: () => TokenCard,
+  TokenCardSkeleton: () => TokenCardSkeleton
+});
+module.exports = __toCommonJS(token_card_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_link = __toESM(require("next/link"), 1);
+var import_image = __toESM(require("next/image"), 1);
+var import_lucide_react = require("lucide-react");
+var import_cn = require("../utils/cn.js");
+var import_ipfs = require("../utils/ipfs.js");
+var import_format = require("../utils/format.js");
+var import_currency_icon = require("./currency-icon.js");
+var import_ip_type_badge = require("./ip-type-badge.js");
+var import_motion_primitives = require("./motion-primitives.js");
+const RARITY_STYLE = {
+  legendary: { label: "Legendary", className: "bg-yellow-400/90 text-yellow-900" },
+  epic: { label: "Epic", className: "bg-purple-500/85 text-white" },
+  rare: { label: "Rare", className: "bg-blue-500/85 text-white" },
+  uncommon: { label: "Uncommon", className: "bg-emerald-500/85 text-white" },
+  common: null
+};
+const BTN_BASE = "h-8 rounded-[11px] flex items-center justify-center gap-1.5 text-xs font-semibold transition-all active:scale-[0.98] shadow-none border-0";
+const BTN_SOLID = (0, import_cn.cn)(BTN_BASE, "text-white hover:brightness-110");
+const BTN_OUTLINE = (0, import_cn.cn)(BTN_BASE, "border border-border/60 text-foreground hover:bg-muted/60");
+function TokenCard({
+  token,
+  isOwner = false,
+  inCart = false,
+  showBuyButton = true,
+  rarityTier,
+  className,
+  onBuy,
+  onCart,
+  onOffer,
+  onList,
+  onCancel,
+  onTransfer,
+  overflowMenu
+}) {
+  const [imgError, setImgError] = (0, import_react.useState)(false);
+  const name = token.metadata?.name || `Token #${token.tokenId}`;
+  const image = (0, import_ipfs.ipfsToHttp)(token.metadata?.image);
+  const activeOrder = token.activeOrders?.[0];
+  const assetHref = `/asset/${token.contractAddress}/${token.tokenId}`;
+  const renderActions = () => {
+    if (!isOwner && activeOrder && showBuyButton) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        onBuy && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "button",
+          {
+            className: (0, import_cn.cn)(BTN_SOLID, "flex-1 bg-brand-purple"),
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onBuy(token);
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Zap, { className: "h-3.5 w-3.5 shrink-0" }),
+              "Buy"
+            ]
+          }
+        ),
+        onCart && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            className: (0, import_cn.cn)(
+              BTN_OUTLINE,
+              "w-8 shrink-0",
+              inCart && "border-brand-orange/50 bg-brand-orange/10 text-brand-orange"
+            ),
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onCart(token);
+            },
+            disabled: inCart,
+            "aria-label": inCart ? "In cart" : "Add to cart",
+            children: inCart ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ShoppingCart, { className: "h-3.5 w-3.5" })
+          }
+        ),
+        onOffer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            className: (0, import_cn.cn)(BTN_OUTLINE, "w-8 shrink-0 text-brand-orange border-brand-orange/40 hover:bg-brand-orange/10"),
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onOffer(token);
+            },
+            "aria-label": "Make an offer",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.HandCoins, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ] });
+    }
+    if (!isOwner) {
+      if (!onOffer) return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_link.default, { href: assetHref, className: (0, import_cn.cn)(BTN_OUTLINE, "flex-1"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowUpRight, { className: "h-3.5 w-3.5 shrink-0" }),
+          "View"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            className: (0, import_cn.cn)(BTN_OUTLINE, "w-8 shrink-0 text-brand-orange border-brand-orange/40 hover:bg-brand-orange/10"),
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onOffer(token);
+            },
+            "aria-label": "Make an offer",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.HandCoins, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ] });
+    }
+    if (isOwner && activeOrder) {
+      if (!onCancel) return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "button",
+          {
+            className: (0, import_cn.cn)(BTN_SOLID, "flex-1 bg-brand-rose"),
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onCancel(token);
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.X, { className: "h-3.5 w-3.5 shrink-0" }),
+              "Cancel listing"
+            ]
+          }
+        ),
+        onTransfer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            className: (0, import_cn.cn)(BTN_OUTLINE, "w-8 shrink-0"),
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onTransfer(token);
+            },
+            "aria-label": "Transfer",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowRightLeft, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ] });
+    }
+    if (isOwner && !activeOrder) {
+      if (!onList) return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "button",
+          {
+            className: (0, import_cn.cn)(BTN_SOLID, "flex-1 bg-brand-blue"),
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onList(token);
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Tag, { className: "h-3.5 w-3.5 shrink-0" }),
+              "List for sale"
+            ]
+          }
+        ),
+        onTransfer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            className: (0, import_cn.cn)(BTN_OUTLINE, "w-8 shrink-0"),
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onTransfer(token);
+            },
+            "aria-label": "Transfer",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowRightLeft, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ] });
+    }
+    return null;
+  };
+  const actionContent = renderActions();
+  const showActionBar = actionContent != null || !!overflowMenu;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_motion_primitives.MotionCard, { className: (0, import_cn.cn)("card-base group relative overflow-hidden flex flex-col", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.default, { href: assetHref, className: "block relative shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative aspect-square bg-muted overflow-hidden", children: [
+      !imgError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_image.default,
+        {
+          src: image,
+          alt: name,
+          fill: true,
+          unoptimized: true,
+          sizes: "(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 22vw",
+          className: "object-cover transition-transform duration-500 group-hover:scale-105",
+          onError: () => setImgError(true)
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 flex items-center justify-center bg-gradient-to-br from-brand-purple/15 to-brand-blue/15", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-2xl font-mono text-muted-foreground", children: [
+        "#",
+        token.tokenId
+      ] }) }),
+      token.metadata?.ipType && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute top-2 left-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ip_type_badge.IpTypeBadge, { ipType: token.metadata.ipType, size: "sm" }) }),
+      rarityTier && RARITY_STYLE[rarityTier] && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute top-2 right-2 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_cn.cn)(
+        "inline-flex items-center px-1.5 py-0.5 rounded-md backdrop-blur-sm text-[10px] font-bold leading-none",
+        RARITY_STYLE[rarityTier].className
+      ), children: RARITY_STYLE[rarityTier].label }) }),
+      (token.metadataStatus === "PENDING" || token.metadataStatus === "FETCHING") && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "absolute bottom-0 inset-x-0 flex items-center justify-center gap-1.5 bg-black/50 backdrop-blur-sm py-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Loader2, { className: "h-3 w-3 animate-spin text-white/70" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[10px] text-white/70", children: "Indexing\u2026" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-3 pt-2.5 pb-1 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_link.default, { href: assetHref, className: "block space-y-0.5 mb-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xl font-bold line-clamp-2 leading-tight", children: name }),
+      activeOrder && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "flex items-center gap-1 text-[11px] font-semibold text-foreground/80", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_currency_icon.CurrencyIcon, { symbol: activeOrder.price.currency, size: 11 }),
+        (0, import_format.formatDisplayPrice)(activeOrder.price.formatted),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-normal text-muted-foreground", children: activeOrder.price.currency })
+      ] }),
+      token.metadata?.description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-[10px] text-muted-foreground truncate leading-snug", children: token.metadata.description }) : token.metadata?.ipType ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-[10px] text-muted-foreground opacity-70", children: token.metadata.ipType }) : null
+    ] }) }),
+    showActionBar && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1.5 px-2 pb-2", children: [
+      actionContent,
+      overflowMenu
+    ] })
+  ] });
+}
+function TokenCardSkeleton() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "card-base overflow-hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "aspect-square w-full animate-pulse bg-muted" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "px-3 pt-2.5 pb-2 space-y-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-5 w-3/4 rounded-md animate-pulse bg-muted" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-2.5 w-2/5 rounded-md animate-pulse bg-muted" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "px-2 pb-2 flex gap-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-8 flex-1 rounded-[11px] animate-pulse bg-muted" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-8 w-8 rounded-[11px] animate-pulse bg-muted shrink-0" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-8 w-8 rounded-[11px] animate-pulse bg-muted shrink-0" })
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TokenCard,
+  TokenCardSkeleton
+});
+//# sourceMappingURL=token-card.cjs.map

package/dist/components/token-card.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/token-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport Link from \"next/link\";\nimport Image from \"next/image\";\nimport {\n  ShoppingCart, Tag, ArrowRightLeft, X, Loader2, HandCoins,\n  Check, ArrowUpRight, Zap,\n} from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { formatDisplayPrice } from \"../utils/format.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { IpTypeBadge } from \"./ip-type-badge.js\";\nimport { MotionCard } from \"./motion-primitives.js\";\nimport type { ApiToken } from \"@medialane/sdk\";\n\nexport type RarityTier = \"legendary\" | \"epic\" | \"rare\" | \"uncommon\" | \"common\";\n\nconst RARITY_STYLE: Record<RarityTier, { label: string; className: string } | null> = {\n  legendary: { label: \"Legendary\", className: \"bg-yellow-400/90 text-yellow-900\" },\n  epic:      { label: \"Epic\",      className: \"bg-purple-500/85 text-white\" },\n  rare:      { label: \"Rare\",      className: \"bg-blue-500/85 text-white\" },\n  uncommon:  { label: \"Uncommon\",  className: \"bg-emerald-500/85 text-white\" },\n  common:    null,\n};\n\nconst BTN_BASE = \"h-8 rounded-[11px] flex items-center justify-center gap-1.5 text-xs font-semibold transition-all active:scale-[0.98] shadow-none border-0\";\nconst BTN_SOLID = cn(BTN_BASE, \"text-white hover:brightness-110\");\nconst BTN_OUTLINE = cn(BTN_BASE, \"border border-border/60 text-foreground hover:bg-muted/60\");\n\nexport interface TokenCardProps {\n  token: ApiToken;\n  /** Whether the current user owns this token. Default: false */\n  isOwner?: boolean;\n  /** Whether this token's listing is already in the cart. Default: false */\n  inCart?: boolean;\n  /** Show the Buy button for listed tokens. Default: true */\n  showBuyButton?: boolean;\n  /** Optional rarity label shown as an overlay badge */\n  rarityTier?: RarityTier;\n  className?: string;\n  /** Callbacks — omit any to hide that button */\n  onBuy?: (token: ApiToken) => void;\n  onCart?: (token: ApiToken) => void;\n  onOffer?: (token: ApiToken) => void;\n  onList?: (token: ApiToken) => void;\n  onCancel?: (token: ApiToken) => void;\n  onTransfer?: (token: ApiToken) => void;\n  onRemix?: (token: ApiToken) => void;\n  onReport?: (token: ApiToken) => void;\n  /** Slot for a DropdownMenu trigger — rendered after primary buttons */\n  overflowMenu?: React.ReactNode;\n}\n\nexport function TokenCard({\n  token,\n  isOwner = false,\n  inCart = false,\n  showBuyButton = true,\n  rarityTier,\n  className,\n  onBuy,\n  onCart,\n  onOffer,\n  onList,\n  onCancel,\n  onTransfer,\n  overflowMenu,\n}: TokenCardProps) {\n  const [imgError, setImgError] = useState(false);\n\n  const name = token.metadata?.name || `Token #${token.tokenId}`;\n  const image = ipfsToHttp(token.metadata?.image);\n  const activeOrder = token.activeOrders?.[0];\n  const assetHref = `/asset/${token.contractAddress}/${token.tokenId}`;\n\n  const renderActions = () => {\n    // Non-owner + listed + showBuyButton\n    if (!isOwner && activeOrder && showBuyButton) {\n      return (\n        <>\n          {onBuy && (\n            <button\n              className={cn(BTN_SOLID, \"flex-1 bg-brand-purple\")}\n              onClick={(e) => { e.preventDefault(); e.stopPropagation(); onBuy(token); }}\n            >\n              <Zap className=\"h-3.5 w-3.5 shrink-0\" />\n              Buy\n            </button>\n          )}\n          {onCart && (\n            <button\n              className={cn(\n                BTN_OUTLINE, \"w-8 shrink-0\",\n                inCart && \"border-brand-orange/50 bg-brand-orange/10 text-brand-orange\"\n              )}\n              onClick={(e) => { e.preventDefault(); e.stopPropagation(); onCart(token); }}\n              disabled={inCart}\n              aria-label={inCart ? \"In cart\" : \"Add to cart\"}\n            >\n              {inCart ? <Check className=\"h-3.5 w-3.5\" /> : <ShoppingCart className=\"h-3.5 w-3.5\" />}\n            </button>\n          )}\n          {onOffer && (\n            <button\n              className={cn(BTN_OUTLINE, \"w-8 shrink-0 text-brand-orange border-brand-orange/40 hover:bg-brand-orange/10\")}\n              onClick={(e) => { e.preventDefault(); e.stopPropagation(); onOffer(token); }}\n              aria-label=\"Make an offer\"\n            >\n              <HandCoins className=\"h-3.5 w-3.5\" />\n            </button>\n          )}\n        </>\n      );\n    }\n\n    // Non-owner + no listing (or showBuyButton=false)\n    if (!isOwner) {\n      if (!onOffer) return null;\n      return (\n        <>\n          <Link href={assetHref} className={cn(BTN_OUTLINE, \"flex-1\")}>\n            <ArrowUpRight className=\"h-3.5 w-3.5 shrink-0\" />\n            View\n          </Link>\n          <button\n            className={cn(BTN_OUTLINE, \"w-8 shrink-0 text-brand-orange border-brand-orange/40 hover:bg-brand-orange/10\")}\n            onClick={(e) => { e.preventDefault(); e.stopPropagation(); onOffer(token); }}\n            aria-label=\"Make an offer\"\n          >\n            <HandCoins className=\"h-3.5 w-3.5\" />\n          </button>\n        </>\n      );\n    }\n\n    // Owner + listed\n    if (isOwner && activeOrder) {\n      if (!onCancel) return null;\n      return (\n        <>\n          <button\n            className={cn(BTN_SOLID, \"flex-1 bg-brand-rose\")}\n            onClick={(e) => { e.preventDefault(); e.stopPropagation(); onCancel(token); }}\n          >\n            <X className=\"h-3.5 w-3.5 shrink-0\" />\n            Cancel listing\n          </button>\n          {onTransfer && (\n            <button\n              className={cn(BTN_OUTLINE, \"w-8 shrink-0\")}\n              onClick={(e) => { e.preventDefault(); e.stopPropagation(); onTransfer(token); }}\n              aria-label=\"Transfer\"\n            >\n              <ArrowRightLeft className=\"h-3.5 w-3.5\" />\n            </button>\n          )}\n        </>\n      );\n    }\n\n    // Owner + unlisted\n    if (isOwner && !activeOrder) {\n      if (!onList) return null;\n      return (\n        <>\n          <button\n            className={cn(BTN_SOLID, \"flex-1 bg-brand-blue\")}\n            onClick={(e) => { e.preventDefault(); e.stopPropagation(); onList(token); }}\n          >\n            <Tag className=\"h-3.5 w-3.5 shrink-0\" />\n            List for sale\n          </button>\n          {onTransfer && (\n            <button\n              className={cn(BTN_OUTLINE, \"w-8 shrink-0\")}\n              onClick={(e) => { e.preventDefault(); e.stopPropagation(); onTransfer(token); }}\n              aria-label=\"Transfer\"\n            >\n              <ArrowRightLeft className=\"h-3.5 w-3.5\" />\n            </button>\n          )}\n        </>\n      );\n    }\n\n    return null;\n  };\n\n  const actionContent = renderActions();\n  const showActionBar = actionContent != null || !!overflowMenu;\n\n  return (\n    <MotionCard className={cn(\"card-base group relative overflow-hidden flex flex-col\", className)}>\n      <Link href={assetHref} className=\"block relative shrink-0\">\n        <div className=\"relative aspect-square bg-muted overflow-hidden\">\n          {!imgError ? (\n            <Image\n              src={image}\n              alt={name}\n              fill\n              unoptimized\n              sizes=\"(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 22vw\"\n              className=\"object-cover transition-transform duration-500 group-hover:scale-105\"\n              onError={() => setImgError(true)}\n            />\n          ) : (\n            <div className=\"absolute inset-0 flex items-center justify-center bg-gradient-to-br from-brand-purple/15 to-brand-blue/15\">\n              <span className=\"text-2xl font-mono text-muted-foreground\">#{token.tokenId}</span>\n            </div>\n          )}\n\n          {token.metadata?.ipType && (\n            <div className=\"absolute top-2 left-2\">\n              <IpTypeBadge ipType={token.metadata.ipType as any} size=\"sm\" />\n            </div>\n          )}\n\n          {rarityTier && RARITY_STYLE[rarityTier] && (\n            <div className=\"absolute top-2 right-2 z-10\">\n              <span className={cn(\n                \"inline-flex items-center px-1.5 py-0.5 rounded-md backdrop-blur-sm text-[10px] font-bold leading-none\",\n                RARITY_STYLE[rarityTier]!.className\n              )}>\n                {RARITY_STYLE[rarityTier]!.label}\n              </span>\n            </div>\n          )}\n\n          {(token.metadataStatus === \"PENDING\" || token.metadataStatus === \"FETCHING\") && (\n            <div className=\"absolute bottom-0 inset-x-0 flex items-center justify-center gap-1.5 bg-black/50 backdrop-blur-sm py-1.5\">\n              <Loader2 className=\"h-3 w-3 animate-spin text-white/70\" />\n              <span className=\"text-[10px] text-white/70\">Indexing…</span>\n            </div>\n          )}\n        </div>\n      </Link>\n\n      <div className=\"px-3 pt-2.5 pb-1 flex-1\">\n        <Link href={assetHref} className=\"block space-y-0.5 mb-2\">\n          <p className=\"text-xl font-bold line-clamp-2 leading-tight\">{name}</p>\n          {activeOrder && (\n            <p className=\"flex items-center gap-1 text-[11px] font-semibold text-foreground/80\">\n              <CurrencyIcon symbol={activeOrder.price.currency} size={11} />\n              {formatDisplayPrice(activeOrder.price.formatted)}\n              <span className=\"font-normal text-muted-foreground\">{activeOrder.price.currency}</span>\n            </p>\n          )}\n          {token.metadata?.description ? (\n            <p className=\"text-[10px] text-muted-foreground truncate leading-snug\">\n              {token.metadata.description}\n            </p>\n          ) : token.metadata?.ipType ? (\n            <p className=\"text-[10px] text-muted-foreground opacity-70\">{token.metadata.ipType}</p>\n          ) : null}\n        </Link>\n      </div>\n\n      {showActionBar && (\n        <div className=\"flex items-center gap-1.5 px-2 pb-2\">\n          {actionContent}\n          {overflowMenu}\n        </div>\n      )}\n    </MotionCard>\n  );\n}\n\nexport function TokenCardSkeleton() {\n  return (\n    <div className=\"card-base overflow-hidden\">\n      <div className=\"aspect-square w-full animate-pulse bg-muted\" />\n      <div className=\"px-3 pt-2.5 pb-2 space-y-1.5\">\n        <div className=\"h-5 w-3/4 rounded-md animate-pulse bg-muted\" />\n        <div className=\"h-2.5 w-2/5 rounded-md animate-pulse bg-muted\" />\n      </div>\n      <div className=\"px-2 pb-2 flex gap-1.5\">\n        <div className=\"h-8 flex-1 rounded-[11px] animate-pulse bg-muted\" />\n        <div className=\"h-8 w-8 rounded-[11px] animate-pulse bg-muted shrink-0\" />\n        <div className=\"h-8 w-8 rounded-[11px] animate-pulse bg-muted shrink-0\" />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["Link","Image"]}

package/dist/components/token-card.d.cts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ApiToken } from '@medialane/sdk';
+
+type RarityTier = "legendary" | "epic" | "rare" | "uncommon" | "common";
+interface TokenCardProps {
+    token: ApiToken;
+    /** Whether the current user owns this token. Default: false */
+    isOwner?: boolean;
+    /** Whether this token's listing is already in the cart. Default: false */
+    inCart?: boolean;
+    /** Show the Buy button for listed tokens. Default: true */
+    showBuyButton?: boolean;
+    /** Optional rarity label shown as an overlay badge */
+    rarityTier?: RarityTier;
+    className?: string;
+    /** Callbacks — omit any to hide that button */
+    onBuy?: (token: ApiToken) => void;
+    onCart?: (token: ApiToken) => void;
+    onOffer?: (token: ApiToken) => void;
+    onList?: (token: ApiToken) => void;
+    onCancel?: (token: ApiToken) => void;
+    onTransfer?: (token: ApiToken) => void;
+    onRemix?: (token: ApiToken) => void;
+    onReport?: (token: ApiToken) => void;
+    /** Slot for a DropdownMenu trigger — rendered after primary buttons */
+    overflowMenu?: React.ReactNode;
+}
+declare function TokenCard({ token, isOwner, inCart, showBuyButton, rarityTier, className, onBuy, onCart, onOffer, onList, onCancel, onTransfer, overflowMenu, }: TokenCardProps): react_jsx_runtime.JSX.Element;
+declare function TokenCardSkeleton(): react_jsx_runtime.JSX.Element;
+
+export { type RarityTier, TokenCard, type TokenCardProps, TokenCardSkeleton };

package/dist/components/token-card.d.ts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ApiToken } from '@medialane/sdk';
+
+type RarityTier = "legendary" | "epic" | "rare" | "uncommon" | "common";
+interface TokenCardProps {
+    token: ApiToken;
+    /** Whether the current user owns this token. Default: false */
+    isOwner?: boolean;
+    /** Whether this token's listing is already in the cart. Default: false */
+    inCart?: boolean;
+    /** Show the Buy button for listed tokens. Default: true */
+    showBuyButton?: boolean;
+    /** Optional rarity label shown as an overlay badge */
+    rarityTier?: RarityTier;
+    className?: string;
+    /** Callbacks — omit any to hide that button */
+    onBuy?: (token: ApiToken) => void;
+    onCart?: (token: ApiToken) => void;
+    onOffer?: (token: ApiToken) => void;
+    onList?: (token: ApiToken) => void;
+    onCancel?: (token: ApiToken) => void;
+    onTransfer?: (token: ApiToken) => void;
+    onRemix?: (token: ApiToken) => void;
+    onReport?: (token: ApiToken) => void;
+    /** Slot for a DropdownMenu trigger — rendered after primary buttons */
+    overflowMenu?: React.ReactNode;
+}
+declare function TokenCard({ token, isOwner, inCart, showBuyButton, rarityTier, className, onBuy, onCart, onOffer, onList, onCancel, onTransfer, overflowMenu, }: TokenCardProps): react_jsx_runtime.JSX.Element;
+declare function TokenCardSkeleton(): react_jsx_runtime.JSX.Element;
+
+export { type RarityTier, TokenCard, type TokenCardProps, TokenCardSkeleton };

package/dist/components/token-card.js

@@ -0,0 +1,256 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import Link from "next/link";
+import Image from "next/image";
+import {
+  ShoppingCart,
+  Tag,
+  ArrowRightLeft,
+  X,
+  Loader2,
+  HandCoins,
+  Check,
+  ArrowUpRight,
+  Zap
+} from "lucide-react";
+import { cn } from "../utils/cn.js";
+import { ipfsToHttp } from "../utils/ipfs.js";
+import { formatDisplayPrice } from "../utils/format.js";
+import { CurrencyIcon } from "./currency-icon.js";
+import { IpTypeBadge } from "./ip-type-badge.js";
+import { MotionCard } from "./motion-primitives.js";
+const RARITY_STYLE = {
+  legendary: { label: "Legendary", className: "bg-yellow-400/90 text-yellow-900" },
+  epic: { label: "Epic", className: "bg-purple-500/85 text-white" },
+  rare: { label: "Rare", className: "bg-blue-500/85 text-white" },
+  uncommon: { label: "Uncommon", className: "bg-emerald-500/85 text-white" },
+  common: null
+};
+const BTN_BASE = "h-8 rounded-[11px] flex items-center justify-center gap-1.5 text-xs font-semibold transition-all active:scale-[0.98] shadow-none border-0";
+const BTN_SOLID = cn(BTN_BASE, "text-white hover:brightness-110");
+const BTN_OUTLINE = cn(BTN_BASE, "border border-border/60 text-foreground hover:bg-muted/60");
+function TokenCard({
+  token,
+  isOwner = false,
+  inCart = false,
+  showBuyButton = true,
+  rarityTier,
+  className,
+  onBuy,
+  onCart,
+  onOffer,
+  onList,
+  onCancel,
+  onTransfer,
+  overflowMenu
+}) {
+  const [imgError, setImgError] = useState(false);
+  const name = token.metadata?.name || `Token #${token.tokenId}`;
+  const image = ipfsToHttp(token.metadata?.image);
+  const activeOrder = token.activeOrders?.[0];
+  const assetHref = `/asset/${token.contractAddress}/${token.tokenId}`;
+  const renderActions = () => {
+    if (!isOwner && activeOrder && showBuyButton) {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        onBuy && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: cn(BTN_SOLID, "flex-1 bg-brand-purple"),
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onBuy(token);
+            },
+            children: [
+              /* @__PURE__ */ jsx(Zap, { className: "h-3.5 w-3.5 shrink-0" }),
+              "Buy"
+            ]
+          }
+        ),
+        onCart && /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: cn(
+              BTN_OUTLINE,
+              "w-8 shrink-0",
+              inCart && "border-brand-orange/50 bg-brand-orange/10 text-brand-orange"
+            ),
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onCart(token);
+            },
+            disabled: inCart,
+            "aria-label": inCart ? "In cart" : "Add to cart",
+            children: inCart ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ShoppingCart, { className: "h-3.5 w-3.5" })
+          }
+        ),
+        onOffer && /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: cn(BTN_OUTLINE, "w-8 shrink-0 text-brand-orange border-brand-orange/40 hover:bg-brand-orange/10"),
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onOffer(token);
+            },
+            "aria-label": "Make an offer",
+            children: /* @__PURE__ */ jsx(HandCoins, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ] });
+    }
+    if (!isOwner) {
+      if (!onOffer) return null;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(Link, { href: assetHref, className: cn(BTN_OUTLINE, "flex-1"), children: [
+          /* @__PURE__ */ jsx(ArrowUpRight, { className: "h-3.5 w-3.5 shrink-0" }),
+          "View"
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: cn(BTN_OUTLINE, "w-8 shrink-0 text-brand-orange border-brand-orange/40 hover:bg-brand-orange/10"),
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onOffer(token);
+            },
+            "aria-label": "Make an offer",
+            children: /* @__PURE__ */ jsx(HandCoins, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ] });
+    }
+    if (isOwner && activeOrder) {
+      if (!onCancel) return null;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: cn(BTN_SOLID, "flex-1 bg-brand-rose"),
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onCancel(token);
+            },
+            children: [
+              /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5 shrink-0" }),
+              "Cancel listing"
+            ]
+          }
+        ),
+        onTransfer && /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: cn(BTN_OUTLINE, "w-8 shrink-0"),
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onTransfer(token);
+            },
+            "aria-label": "Transfer",
+            children: /* @__PURE__ */ jsx(ArrowRightLeft, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ] });
+    }
+    if (isOwner && !activeOrder) {
+      if (!onList) return null;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: cn(BTN_SOLID, "flex-1 bg-brand-blue"),
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onList(token);
+            },
+            children: [
+              /* @__PURE__ */ jsx(Tag, { className: "h-3.5 w-3.5 shrink-0" }),
+              "List for sale"
+            ]
+          }
+        ),
+        onTransfer && /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: cn(BTN_OUTLINE, "w-8 shrink-0"),
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onTransfer(token);
+            },
+            "aria-label": "Transfer",
+            children: /* @__PURE__ */ jsx(ArrowRightLeft, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ] });
+    }
+    return null;
+  };
+  const actionContent = renderActions();
+  const showActionBar = actionContent != null || !!overflowMenu;
+  return /* @__PURE__ */ jsxs(MotionCard, { className: cn("card-base group relative overflow-hidden flex flex-col", className), children: [
+    /* @__PURE__ */ jsx(Link, { href: assetHref, className: "block relative shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "relative aspect-square bg-muted overflow-hidden", children: [
+      !imgError ? /* @__PURE__ */ jsx(
+        Image,
+        {
+          src: image,
+          alt: name,
+          fill: true,
+          unoptimized: true,
+          sizes: "(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 22vw",
+          className: "object-cover transition-transform duration-500 group-hover:scale-105",
+          onError: () => setImgError(true)
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-gradient-to-br from-brand-purple/15 to-brand-blue/15", children: /* @__PURE__ */ jsxs("span", { className: "text-2xl font-mono text-muted-foreground", children: [
+        "#",
+        token.tokenId
+      ] }) }),
+      token.metadata?.ipType && /* @__PURE__ */ jsx("div", { className: "absolute top-2 left-2", children: /* @__PURE__ */ jsx(IpTypeBadge, { ipType: token.metadata.ipType, size: "sm" }) }),
+      rarityTier && RARITY_STYLE[rarityTier] && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 z-10", children: /* @__PURE__ */ jsx("span", { className: cn(
+        "inline-flex items-center px-1.5 py-0.5 rounded-md backdrop-blur-sm text-[10px] font-bold leading-none",
+        RARITY_STYLE[rarityTier].className
+      ), children: RARITY_STYLE[rarityTier].label }) }),
+      (token.metadataStatus === "PENDING" || token.metadataStatus === "FETCHING") && /* @__PURE__ */ jsxs("div", { className: "absolute bottom-0 inset-x-0 flex items-center justify-center gap-1.5 bg-black/50 backdrop-blur-sm py-1.5", children: [
+        /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin text-white/70" }),
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] text-white/70", children: "Indexing\u2026" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "px-3 pt-2.5 pb-1 flex-1", children: /* @__PURE__ */ jsxs(Link, { href: assetHref, className: "block space-y-0.5 mb-2", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xl font-bold line-clamp-2 leading-tight", children: name }),
+      activeOrder && /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-1 text-[11px] font-semibold text-foreground/80", children: [
+        /* @__PURE__ */ jsx(CurrencyIcon, { symbol: activeOrder.price.currency, size: 11 }),
+        formatDisplayPrice(activeOrder.price.formatted),
+        /* @__PURE__ */ jsx("span", { className: "font-normal text-muted-foreground", children: activeOrder.price.currency })
+      ] }),
+      token.metadata?.description ? /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground truncate leading-snug", children: token.metadata.description }) : token.metadata?.ipType ? /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground opacity-70", children: token.metadata.ipType }) : null
+    ] }) }),
+    showActionBar && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-2 pb-2", children: [
+      actionContent,
+      overflowMenu
+    ] })
+  ] });
+}
+function TokenCardSkeleton() {
+  return /* @__PURE__ */ jsxs("div", { className: "card-base overflow-hidden", children: [
+    /* @__PURE__ */ jsx("div", { className: "aspect-square w-full animate-pulse bg-muted" }),
+    /* @__PURE__ */ jsxs("div", { className: "px-3 pt-2.5 pb-2 space-y-1.5", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-5 w-3/4 rounded-md animate-pulse bg-muted" }),
+      /* @__PURE__ */ jsx("div", { className: "h-2.5 w-2/5 rounded-md animate-pulse bg-muted" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "px-2 pb-2 flex gap-1.5", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-8 flex-1 rounded-[11px] animate-pulse bg-muted" }),
+      /* @__PURE__ */ jsx("div", { className: "h-8 w-8 rounded-[11px] animate-pulse bg-muted shrink-0" }),
+      /* @__PURE__ */ jsx("div", { className: "h-8 w-8 rounded-[11px] animate-pulse bg-muted shrink-0" })
+    ] })
+  ] });
+}
+export {
+  TokenCard,
+  TokenCardSkeleton
+};
+//# sourceMappingURL=token-card.js.map