@medialane/ui 0.1.6 → 0.3.0

package/dist/components/listing-card.cjs

@@ -0,0 +1,146 @@
+"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 listing_card_exports = {};
+__export(listing_card_exports, {
+  ListingCard: () => ListingCard,
+  ListingCardSkeleton: () => ListingCardSkeleton
+});
+module.exports = __toCommonJS(listing_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_motion_primitives = require("./motion-primitives.js");
+var import_currency_icon = require("./currency-icon.js");
+var import_cn = require("../utils/cn.js");
+var import_ipfs = require("../utils/ipfs.js");
+var import_format = require("../utils/format.js");
+var import_time = require("../utils/time.js");
+function ListingCard({ order, inCart = false, onBuy, onCart, overflowMenu, compact = false }) {
+  const [imgError, setImgError] = (0, import_react.useState)(false);
+  const isListing = order.offer.itemType === "ERC721" || order.offer.itemType === "ERC1155";
+  const name = order.token?.name ?? `Token #${order.nftTokenId}`;
+  const image = order.token?.image ? (0, import_ipfs.ipfsToHttp)(order.token.image) : null;
+  const assetHref = `/asset/${order.nftContract}/${order.nftTokenId}`;
+  const showActionBar = isListing && (onBuy || onCart || overflowMenu);
+  if (compact) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion_primitives.MotionCard, { className: "card-base", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_link.default, { href: assetHref, className: "block", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative aspect-square bg-muted overflow-hidden", children: image && !imgError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_image.default, { src: image, alt: name, fill: true, unoptimized: true, sizes: "(max-width: 640px) 33vw, 20vw", className: "object-cover group-hover:scale-105 transition-transform duration-500", 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-xl font-mono text-muted-foreground", children: [
+        "#",
+        order.nftTokenId
+      ] }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-2.5 space-y-0.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs font-semibold truncate", children: name }),
+        order.price?.formatted && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-[11px] font-bold price-value", children: [
+          (0, import_format.formatDisplayPrice)(order.price.formatted),
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground font-normal", children: order.price.currency })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-[10px] text-muted-foreground", children: (0, import_time.timeAgo)(order.createdAt) })
+      ] })
+    ] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion_primitives.MotionCard, { className: "card-base", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_link.default, { href: assetHref, className: "block", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative aspect-square bg-muted overflow-hidden", children: image && !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, 25vw", className: "object-cover group-hover:scale-105 transition-transform duration-500", 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: [
+      "#",
+      order.nftTokenId
+    ] }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-4 space-y-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "font-semibold text-base truncate leading-snug", children: name }),
+        order.token?.description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-[11px] text-muted-foreground line-clamp-1 leading-snug mt-0.5", children: order.token.description }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-[11px] text-muted-foreground", children: [
+          "#",
+          order.nftTokenId
+        ] })
+      ] }),
+      order.price?.formatted && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+        order.price.currency && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_currency_icon.CurrencyIcon, { symbol: order.price.currency, size: 14 }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-lg font-bold price-value leading-none", children: [
+          (0, import_format.formatDisplayPrice)(order.price.formatted),
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground font-normal text-sm", children: order.price.currency })
+        ] })
+      ] }),
+      showActionBar && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+        onBuy && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "btn-border-animated p-[1.5px] rounded-[10px] flex-1 h-9", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "button",
+          {
+            className: "w-full h-full rounded-[9px] bg-background flex items-center justify-center gap-1.5 text-xs font-semibold text-foreground hover:bg-muted/60 transition-all active:scale-[0.98]",
+            onClick: (e) => {
+              e.preventDefault();
+              onBuy(order);
+            },
+            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)(
+              "h-9 w-9 shrink-0 rounded-[9px] border flex items-center justify-center transition-colors",
+              inCart ? "border-brand-orange/50 bg-brand-orange/10 text-brand-orange" : "border-border bg-background hover:bg-muted text-foreground"
+            ),
+            onClick: (e) => {
+              e.preventDefault();
+              if (!inCart) onCart(order);
+            },
+            disabled: inCart,
+            "aria-label": inCart ? "Added to 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" })
+          }
+        ),
+        overflowMenu
+      ] })
+    ] })
+  ] }) });
+}
+function ListingCardSkeleton() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "card-base", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "aspect-square w-full bg-muted animate-pulse" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-3 space-y-2.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-4 w-3/4 bg-muted animate-pulse rounded" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-3 w-1/2 bg-muted animate-pulse rounded" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-6 w-1/2 bg-muted animate-pulse rounded" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-3 w-2/3 bg-muted animate-pulse rounded" })
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ListingCard,
+  ListingCardSkeleton
+});
+//# sourceMappingURL=listing-card.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/listing-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport Link from \"next/link\";\nimport Image from \"next/image\";\nimport { ShoppingCart, Check, Zap } from \"lucide-react\";\nimport { MotionCard } from \"./motion-primitives.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { cn } from \"../utils/cn.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { formatDisplayPrice } from \"../utils/format.js\";\nimport { timeAgo } from \"../utils/time.js\";\nimport type { ApiOrder } from \"@medialane/sdk\";\n\nexport interface ListingCardProps {\n  order: ApiOrder;\n  inCart?: boolean;\n  onBuy?: (order: ApiOrder) => void;\n  onCart?: (order: ApiOrder) => void;\n  /** App passes a fully constructed <DropdownMenu> here */\n  overflowMenu?: React.ReactNode;\n  compact?: boolean;\n}\n\nexport function ListingCard({ order, inCart = false, onBuy, onCart, overflowMenu, compact = false }: ListingCardProps) {\n  const [imgError, setImgError] = useState(false);\n  const isListing = order.offer.itemType === \"ERC721\" || order.offer.itemType === \"ERC1155\";\n  const name = order.token?.name ?? `Token #${order.nftTokenId}`;\n  const image = order.token?.image ? ipfsToHttp(order.token.image) : null;\n  const assetHref = `/asset/${order.nftContract}/${order.nftTokenId}`;\n\n  const showActionBar = isListing && (onBuy || onCart || overflowMenu);\n\n  // ─── Compact variant ──────────────────────────────────────────────────────\n  if (compact) {\n    return (\n      <MotionCard className=\"card-base\">\n        <Link href={assetHref} className=\"block\">\n          <div className=\"relative aspect-square bg-muted overflow-hidden\">\n            {image && !imgError ? (\n              <Image src={image} alt={name} fill unoptimized sizes=\"(max-width: 640px) 33vw, 20vw\" className=\"object-cover group-hover:scale-105 transition-transform duration-500\" onError={() => setImgError(true)} />\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-xl font-mono text-muted-foreground\">#{order.nftTokenId}</span>\n              </div>\n            )}\n          </div>\n          <div className=\"p-2.5 space-y-0.5\">\n            <p className=\"text-xs font-semibold truncate\">{name}</p>\n            {order.price?.formatted && (\n              <p className=\"text-[11px] font-bold price-value\">\n                {formatDisplayPrice(order.price.formatted)} <span className=\"text-muted-foreground font-normal\">{order.price.currency}</span>\n              </p>\n            )}\n            <p className=\"text-[10px] text-muted-foreground\">{timeAgo(order.createdAt)}</p>\n          </div>\n        </Link>\n      </MotionCard>\n    );\n  }\n\n  // ─── Full variant ─────────────────────────────────────────────────────────\n  return (\n    <MotionCard className=\"card-base\">\n      <Link href={assetHref} className=\"block\">\n        <div className=\"relative aspect-square bg-muted overflow-hidden\">\n          {image && !imgError ? (\n            <Image src={image} alt={name} fill unoptimized sizes=\"(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw\" className=\"object-cover group-hover:scale-105 transition-transform duration-500\" onError={() => setImgError(true)} />\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\">#{order.nftTokenId}</span>\n            </div>\n          )}\n        </div>\n\n        <div className=\"p-4 space-y-3\">\n          <div>\n            <p className=\"font-semibold text-base truncate leading-snug\">{name}</p>\n            {order.token?.description ? (\n              <p className=\"text-[11px] text-muted-foreground line-clamp-1 leading-snug mt-0.5\">{order.token.description}</p>\n            ) : (\n              <p className=\"text-[11px] text-muted-foreground\">#{order.nftTokenId}</p>\n            )}\n          </div>\n\n          {order.price?.formatted && (\n            <div className=\"flex items-center gap-1.5\">\n              {order.price.currency && <CurrencyIcon symbol={order.price.currency} size={14} />}\n              <p className=\"text-lg font-bold price-value leading-none\">\n                {formatDisplayPrice(order.price.formatted)} <span className=\"text-muted-foreground font-normal text-sm\">{order.price.currency}</span>\n              </p>\n            </div>\n          )}\n\n          {showActionBar && (\n            <div className=\"flex items-center gap-1.5\">\n              {onBuy && (\n                <div className=\"btn-border-animated p-[1.5px] rounded-[10px] flex-1 h-9\">\n                  <button\n                    className=\"w-full h-full rounded-[9px] bg-background flex items-center justify-center gap-1.5 text-xs font-semibold text-foreground hover:bg-muted/60 transition-all active:scale-[0.98]\"\n                    onClick={(e) => { e.preventDefault(); onBuy(order); }}\n                  >\n                    <Zap className=\"h-3.5 w-3.5 shrink-0\" /> Buy\n                  </button>\n                </div>\n              )}\n              {onCart && (\n                <button\n                  className={cn(\n                    \"h-9 w-9 shrink-0 rounded-[9px] border flex items-center justify-center transition-colors\",\n                    inCart\n                      ? \"border-brand-orange/50 bg-brand-orange/10 text-brand-orange\"\n                      : \"border-border bg-background hover:bg-muted text-foreground\"\n                  )}\n                  onClick={(e) => { e.preventDefault(); if (!inCart) onCart(order); }}\n                  disabled={inCart}\n                  aria-label={inCart ? \"Added to 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              {overflowMenu}\n            </div>\n          )}\n        </div>\n      </Link>\n    </MotionCard>\n  );\n}\n\nexport function ListingCardSkeleton() {\n  return (\n    <div className=\"card-base\">\n      <div className=\"aspect-square w-full bg-muted animate-pulse\" />\n      <div className=\"p-3 space-y-2.5\">\n        <div className=\"space-y-1\">\n          <div className=\"h-4 w-3/4 bg-muted animate-pulse rounded\" />\n          <div className=\"h-3 w-1/2 bg-muted animate-pulse rounded\" />\n        </div>\n        <div className=\"h-6 w-1/2 bg-muted animate-pulse rounded\" />\n        <div className=\"h-3 w-2/3 bg-muted animate-pulse rounded\" />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["Link","Image"]}

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

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ApiOrder } from '@medialane/sdk';
+
+interface ListingCardProps {
+    order: ApiOrder;
+    inCart?: boolean;
+    onBuy?: (order: ApiOrder) => void;
+    onCart?: (order: ApiOrder) => void;
+    /** App passes a fully constructed <DropdownMenu> here */
+    overflowMenu?: React.ReactNode;
+    compact?: boolean;
+}
+declare function ListingCard({ order, inCart, onBuy, onCart, overflowMenu, compact }: ListingCardProps): react_jsx_runtime.JSX.Element;
+declare function ListingCardSkeleton(): react_jsx_runtime.JSX.Element;
+
+export { ListingCard, type ListingCardProps, ListingCardSkeleton };

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

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ApiOrder } from '@medialane/sdk';
+
+interface ListingCardProps {
+    order: ApiOrder;
+    inCart?: boolean;
+    onBuy?: (order: ApiOrder) => void;
+    onCart?: (order: ApiOrder) => void;
+    /** App passes a fully constructed <DropdownMenu> here */
+    overflowMenu?: React.ReactNode;
+    compact?: boolean;
+}
+declare function ListingCard({ order, inCart, onBuy, onCart, overflowMenu, compact }: ListingCardProps): react_jsx_runtime.JSX.Element;
+declare function ListingCardSkeleton(): react_jsx_runtime.JSX.Element;
+
+export { ListingCard, type ListingCardProps, ListingCardSkeleton };

package/dist/components/listing-card.js

@@ -0,0 +1,111 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { ShoppingCart, Check, Zap } from "lucide-react";
+import { MotionCard } from "./motion-primitives.js";
+import { CurrencyIcon } from "./currency-icon.js";
+import { cn } from "../utils/cn.js";
+import { ipfsToHttp } from "../utils/ipfs.js";
+import { formatDisplayPrice } from "../utils/format.js";
+import { timeAgo } from "../utils/time.js";
+function ListingCard({ order, inCart = false, onBuy, onCart, overflowMenu, compact = false }) {
+  const [imgError, setImgError] = useState(false);
+  const isListing = order.offer.itemType === "ERC721" || order.offer.itemType === "ERC1155";
+  const name = order.token?.name ?? `Token #${order.nftTokenId}`;
+  const image = order.token?.image ? ipfsToHttp(order.token.image) : null;
+  const assetHref = `/asset/${order.nftContract}/${order.nftTokenId}`;
+  const showActionBar = isListing && (onBuy || onCart || overflowMenu);
+  if (compact) {
+    return /* @__PURE__ */ jsx(MotionCard, { className: "card-base", children: /* @__PURE__ */ jsxs(Link, { href: assetHref, className: "block", children: [
+      /* @__PURE__ */ jsx("div", { className: "relative aspect-square bg-muted overflow-hidden", children: image && !imgError ? /* @__PURE__ */ jsx(Image, { src: image, alt: name, fill: true, unoptimized: true, sizes: "(max-width: 640px) 33vw, 20vw", className: "object-cover group-hover:scale-105 transition-transform duration-500", 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-xl font-mono text-muted-foreground", children: [
+        "#",
+        order.nftTokenId
+      ] }) }) }),
+      /* @__PURE__ */ jsxs("div", { className: "p-2.5 space-y-0.5", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold truncate", children: name }),
+        order.price?.formatted && /* @__PURE__ */ jsxs("p", { className: "text-[11px] font-bold price-value", children: [
+          formatDisplayPrice(order.price.formatted),
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-normal", children: order.price.currency })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground", children: timeAgo(order.createdAt) })
+      ] })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(MotionCard, { className: "card-base", children: /* @__PURE__ */ jsxs(Link, { href: assetHref, className: "block", children: [
+    /* @__PURE__ */ jsx("div", { className: "relative aspect-square bg-muted overflow-hidden", children: image && !imgError ? /* @__PURE__ */ jsx(Image, { src: image, alt: name, fill: true, unoptimized: true, sizes: "(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw", className: "object-cover group-hover:scale-105 transition-transform duration-500", 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: [
+      "#",
+      order.nftTokenId
+    ] }) }) }),
+    /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-3", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "font-semibold text-base truncate leading-snug", children: name }),
+        order.token?.description ? /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground line-clamp-1 leading-snug mt-0.5", children: order.token.description }) : /* @__PURE__ */ jsxs("p", { className: "text-[11px] text-muted-foreground", children: [
+          "#",
+          order.nftTokenId
+        ] })
+      ] }),
+      order.price?.formatted && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        order.price.currency && /* @__PURE__ */ jsx(CurrencyIcon, { symbol: order.price.currency, size: 14 }),
+        /* @__PURE__ */ jsxs("p", { className: "text-lg font-bold price-value leading-none", children: [
+          formatDisplayPrice(order.price.formatted),
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-normal text-sm", children: order.price.currency })
+        ] })
+      ] }),
+      showActionBar && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        onBuy && /* @__PURE__ */ jsx("div", { className: "btn-border-animated p-[1.5px] rounded-[10px] flex-1 h-9", children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: "w-full h-full rounded-[9px] bg-background flex items-center justify-center gap-1.5 text-xs font-semibold text-foreground hover:bg-muted/60 transition-all active:scale-[0.98]",
+            onClick: (e) => {
+              e.preventDefault();
+              onBuy(order);
+            },
+            children: [
+              /* @__PURE__ */ jsx(Zap, { className: "h-3.5 w-3.5 shrink-0" }),
+              " Buy"
+            ]
+          }
+        ) }),
+        onCart && /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: cn(
+              "h-9 w-9 shrink-0 rounded-[9px] border flex items-center justify-center transition-colors",
+              inCart ? "border-brand-orange/50 bg-brand-orange/10 text-brand-orange" : "border-border bg-background hover:bg-muted text-foreground"
+            ),
+            onClick: (e) => {
+              e.preventDefault();
+              if (!inCart) onCart(order);
+            },
+            disabled: inCart,
+            "aria-label": inCart ? "Added to 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" })
+          }
+        ),
+        overflowMenu
+      ] })
+    ] })
+  ] }) });
+}
+function ListingCardSkeleton() {
+  return /* @__PURE__ */ jsxs("div", { className: "card-base", children: [
+    /* @__PURE__ */ jsx("div", { className: "aspect-square w-full bg-muted animate-pulse" }),
+    /* @__PURE__ */ jsxs("div", { className: "p-3 space-y-2.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-4 w-3/4 bg-muted animate-pulse rounded" }),
+        /* @__PURE__ */ jsx("div", { className: "h-3 w-1/2 bg-muted animate-pulse rounded" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "h-6 w-1/2 bg-muted animate-pulse rounded" }),
+      /* @__PURE__ */ jsx("div", { className: "h-3 w-2/3 bg-muted animate-pulse rounded" })
+    ] })
+  ] });
+}
+export {
+  ListingCard,
+  ListingCardSkeleton
+};
+//# sourceMappingURL=listing-card.js.map

package/dist/components/listing-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/listing-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport Link from \"next/link\";\nimport Image from \"next/image\";\nimport { ShoppingCart, Check, Zap } from \"lucide-react\";\nimport { MotionCard } from \"./motion-primitives.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { cn } from \"../utils/cn.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { formatDisplayPrice } from \"../utils/format.js\";\nimport { timeAgo } from \"../utils/time.js\";\nimport type { ApiOrder } from \"@medialane/sdk\";\n\nexport interface ListingCardProps {\n  order: ApiOrder;\n  inCart?: boolean;\n  onBuy?: (order: ApiOrder) => void;\n  onCart?: (order: ApiOrder) => void;\n  /** App passes a fully constructed <DropdownMenu> here */\n  overflowMenu?: React.ReactNode;\n  compact?: boolean;\n}\n\nexport function ListingCard({ order, inCart = false, onBuy, onCart, overflowMenu, compact = false }: ListingCardProps) {\n  const [imgError, setImgError] = useState(false);\n  const isListing = order.offer.itemType === \"ERC721\" || order.offer.itemType === \"ERC1155\";\n  const name = order.token?.name ?? `Token #${order.nftTokenId}`;\n  const image = order.token?.image ? ipfsToHttp(order.token.image) : null;\n  const assetHref = `/asset/${order.nftContract}/${order.nftTokenId}`;\n\n  const showActionBar = isListing && (onBuy || onCart || overflowMenu);\n\n  // ─── Compact variant ──────────────────────────────────────────────────────\n  if (compact) {\n    return (\n      <MotionCard className=\"card-base\">\n        <Link href={assetHref} className=\"block\">\n          <div className=\"relative aspect-square bg-muted overflow-hidden\">\n            {image && !imgError ? (\n              <Image src={image} alt={name} fill unoptimized sizes=\"(max-width: 640px) 33vw, 20vw\" className=\"object-cover group-hover:scale-105 transition-transform duration-500\" onError={() => setImgError(true)} />\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-xl font-mono text-muted-foreground\">#{order.nftTokenId}</span>\n              </div>\n            )}\n          </div>\n          <div className=\"p-2.5 space-y-0.5\">\n            <p className=\"text-xs font-semibold truncate\">{name}</p>\n            {order.price?.formatted && (\n              <p className=\"text-[11px] font-bold price-value\">\n                {formatDisplayPrice(order.price.formatted)} <span className=\"text-muted-foreground font-normal\">{order.price.currency}</span>\n              </p>\n            )}\n            <p className=\"text-[10px] text-muted-foreground\">{timeAgo(order.createdAt)}</p>\n          </div>\n        </Link>\n      </MotionCard>\n    );\n  }\n\n  // ─── Full variant ─────────────────────────────────────────────────────────\n  return (\n    <MotionCard className=\"card-base\">\n      <Link href={assetHref} className=\"block\">\n        <div className=\"relative aspect-square bg-muted overflow-hidden\">\n          {image && !imgError ? (\n            <Image src={image} alt={name} fill unoptimized sizes=\"(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw\" className=\"object-cover group-hover:scale-105 transition-transform duration-500\" onError={() => setImgError(true)} />\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\">#{order.nftTokenId}</span>\n            </div>\n          )}\n        </div>\n\n        <div className=\"p-4 space-y-3\">\n          <div>\n            <p className=\"font-semibold text-base truncate leading-snug\">{name}</p>\n            {order.token?.description ? (\n              <p className=\"text-[11px] text-muted-foreground line-clamp-1 leading-snug mt-0.5\">{order.token.description}</p>\n            ) : (\n              <p className=\"text-[11px] text-muted-foreground\">#{order.nftTokenId}</p>\n            )}\n          </div>\n\n          {order.price?.formatted && (\n            <div className=\"flex items-center gap-1.5\">\n              {order.price.currency && <CurrencyIcon symbol={order.price.currency} size={14} />}\n              <p className=\"text-lg font-bold price-value leading-none\">\n                {formatDisplayPrice(order.price.formatted)} <span className=\"text-muted-foreground font-normal text-sm\">{order.price.currency}</span>\n              </p>\n            </div>\n          )}\n\n          {showActionBar && (\n            <div className=\"flex items-center gap-1.5\">\n              {onBuy && (\n                <div className=\"btn-border-animated p-[1.5px] rounded-[10px] flex-1 h-9\">\n                  <button\n                    className=\"w-full h-full rounded-[9px] bg-background flex items-center justify-center gap-1.5 text-xs font-semibold text-foreground hover:bg-muted/60 transition-all active:scale-[0.98]\"\n                    onClick={(e) => { e.preventDefault(); onBuy(order); }}\n                  >\n                    <Zap className=\"h-3.5 w-3.5 shrink-0\" /> Buy\n                  </button>\n                </div>\n              )}\n              {onCart && (\n                <button\n                  className={cn(\n                    \"h-9 w-9 shrink-0 rounded-[9px] border flex items-center justify-center transition-colors\",\n                    inCart\n                      ? \"border-brand-orange/50 bg-brand-orange/10 text-brand-orange\"\n                      : \"border-border bg-background hover:bg-muted text-foreground\"\n                  )}\n                  onClick={(e) => { e.preventDefault(); if (!inCart) onCart(order); }}\n                  disabled={inCart}\n                  aria-label={inCart ? \"Added to 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              {overflowMenu}\n            </div>\n          )}\n        </div>\n      </Link>\n    </MotionCard>\n  );\n}\n\nexport function ListingCardSkeleton() {\n  return (\n    <div className=\"card-base\">\n      <div className=\"aspect-square w-full bg-muted animate-pulse\" />\n      <div className=\"p-3 space-y-2.5\">\n        <div className=\"space-y-1\">\n          <div className=\"h-4 w-3/4 bg-muted animate-pulse rounded\" />\n          <div className=\"h-3 w-1/2 bg-muted animate-pulse rounded\" />\n        </div>\n        <div className=\"h-6 w-1/2 bg-muted animate-pulse rounded\" />\n        <div className=\"h-3 w-2/3 bg-muted animate-pulse rounded\" />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/motion-primitives.cjs

@@ -0,0 +1,126 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var motion_primitives_exports = {};
+__export(motion_primitives_exports, {
+  EASE_OUT: () => EASE_OUT,
+  FadeIn: () => FadeIn,
+  KineticWords: () => KineticWords,
+  MotionCard: () => MotionCard,
+  SPRING: () => SPRING,
+  Stagger: () => Stagger,
+  StaggerItem: () => StaggerItem
+});
+module.exports = __toCommonJS(motion_primitives_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_framer_motion = require("framer-motion");
+const SPRING = { type: "spring", stiffness: 400, damping: 28 };
+const EASE_OUT = [0.25, 0.46, 0.45, 0.94];
+function MotionCard({ children, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_framer_motion.motion.div,
+    {
+      className,
+      whileTap: { scale: 0.96 },
+      transition: SPRING,
+      ...props,
+      children
+    }
+  );
+}
+function FadeIn({ children, className, delay = 0, y = 20 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_framer_motion.motion.div,
+    {
+      className,
+      initial: { opacity: 0, y },
+      whileInView: { opacity: 1, y: 0 },
+      viewport: { once: true, margin: "-60px" },
+      transition: { duration: 0.5, delay, ease: EASE_OUT },
+      children
+    }
+  );
+}
+function Stagger({ children, className, staggerDelay = 0.07 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_framer_motion.motion.div,
+    {
+      className,
+      initial: "hidden",
+      whileInView: "show",
+      viewport: { once: true, margin: "-60px" },
+      variants: {
+        hidden: {},
+        show: { transition: { staggerChildren: staggerDelay } }
+      },
+      children
+    }
+  );
+}
+function StaggerItem({ children, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_framer_motion.motion.div,
+    {
+      className,
+      variants: {
+        hidden: { opacity: 0, y: 20 },
+        show: { opacity: 1, y: 0, transition: { duration: 0.45, ease: EASE_OUT } }
+      },
+      children
+    }
+  );
+}
+function KineticWords({ text, className }) {
+  const words = text.split(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_framer_motion.motion.span,
+    {
+      className,
+      initial: "hidden",
+      animate: "show",
+      variants: {
+        hidden: {},
+        show: { transition: { staggerChildren: 0.08, delayChildren: 0.1 } }
+      },
+      children: words.map((word, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_framer_motion.motion.span,
+        {
+          className: "inline-block mr-[0.25em]",
+          variants: {
+            hidden: { opacity: 0, y: 24, rotateX: -20 },
+            show: { opacity: 1, y: 0, rotateX: 0, transition: { duration: 0.5, ease: EASE_OUT } }
+          },
+          children: word
+        },
+        i
+      ))
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EASE_OUT,
+  FadeIn,
+  KineticWords,
+  MotionCard,
+  SPRING,
+  Stagger,
+  StaggerItem
+});
+//# sourceMappingURL=motion-primitives.cjs.map

package/dist/components/motion-primitives.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/motion-primitives.tsx"],"sourcesContent":["\"use client\";\n\nimport { motion, type HTMLMotionProps } from \"framer-motion\";\n\nexport const SPRING = { type: \"spring\", stiffness: 400, damping: 28 } as const;\nexport const EASE_OUT = [0.25, 0.46, 0.45, 0.94] as const;\n\n// ─── Press-able card wrapper ──────────────────────────────────────────────────\n\ninterface MotionCardProps extends HTMLMotionProps<\"div\"> {\n  children: React.ReactNode;\n}\n\nexport function MotionCard({ children, className, ...props }: MotionCardProps) {\n  return (\n    <motion.div\n      className={className}\n      whileTap={{ scale: 0.96 }}\n      transition={SPRING}\n      {...props}\n    >\n      {children}\n    </motion.div>\n  );\n}\n\n// ─── Scroll-triggered fade-in ─────────────────────────────────────────────────\n\ninterface FadeInProps {\n  children: React.ReactNode;\n  className?: string;\n  delay?: number;\n  y?: number;\n}\n\nexport function FadeIn({ children, className, delay = 0, y = 20 }: FadeInProps) {\n  return (\n    <motion.div\n      className={className}\n      initial={{ opacity: 0, y }}\n      whileInView={{ opacity: 1, y: 0 }}\n      viewport={{ once: true, margin: \"-60px\" }}\n      transition={{ duration: 0.5, delay, ease: EASE_OUT }}\n    >\n      {children}\n    </motion.div>\n  );\n}\n\n// ─── Stagger container ────────────────────────────────────────────────────────\n\ninterface StaggerProps {\n  children: React.ReactNode;\n  className?: string;\n  staggerDelay?: number;\n}\n\nexport function Stagger({ children, className, staggerDelay = 0.07 }: StaggerProps) {\n  return (\n    <motion.div\n      className={className}\n      initial=\"hidden\"\n      whileInView=\"show\"\n      viewport={{ once: true, margin: \"-60px\" }}\n      variants={{\n        hidden: {},\n        show: { transition: { staggerChildren: staggerDelay } },\n      }}\n    >\n      {children}\n    </motion.div>\n  );\n}\n\nexport function StaggerItem({ children, className }: { children: React.ReactNode; className?: string }) {\n  return (\n    <motion.div\n      className={className}\n      variants={{\n        hidden: { opacity: 0, y: 20 },\n        show: { opacity: 1, y: 0, transition: { duration: 0.45, ease: EASE_OUT } },\n      }}\n    >\n      {children}\n    </motion.div>\n  );\n}\n\n// ─── Kinetic headline words ───────────────────────────────────────────────────\n\nexport function KineticWords({ text, className }: { text: string; className?: string }) {\n  const words = text.split(\" \");\n  return (\n    <motion.span\n      className={className}\n      initial=\"hidden\"\n      animate=\"show\"\n      variants={{\n        hidden: {},\n        show: { transition: { staggerChildren: 0.08, delayChildren: 0.1 } },\n      }}\n    >\n      {words.map((word, i) => (\n        <motion.span\n          key={i}\n          className=\"inline-block mr-[0.25em]\"\n          variants={{\n            hidden: { opacity: 0, y: 24, rotateX: -20 },\n            show: { opacity: 1, y: 0, rotateX: 0, transition: { duration: 0.5, ease: EASE_OUT } },\n          }}\n        >\n          {word}\n        </motion.span>\n      ))}\n    </motion.span>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeI;AAbJ,2BAA6C;AAEtC,MAAM,SAAS,EAAE,MAAM,UAAU,WAAW,KAAK,SAAS,GAAG;AAC7D,MAAM,WAAW,CAAC,MAAM,MAAM,MAAM,IAAI;AAQxC,SAAS,WAAW,EAAE,UAAU,WAAW,GAAG,MAAM,GAAoB;AAC7E,SACE;AAAA,IAAC,4BAAO;AAAA,IAAP;AAAA,MACC;AAAA,MACA,UAAU,EAAE,OAAO,KAAK;AAAA,MACxB,YAAY;AAAA,MACX,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAWO,SAAS,OAAO,EAAE,UAAU,WAAW,QAAQ,GAAG,IAAI,GAAG,GAAgB;AAC9E,SACE;AAAA,IAAC,4BAAO;AAAA,IAAP;AAAA,MACC;AAAA,MACA,SAAS,EAAE,SAAS,GAAG,EAAE;AAAA,MACzB,aAAa,EAAE,SAAS,GAAG,GAAG,EAAE;AAAA,MAChC,UAAU,EAAE,MAAM,MAAM,QAAQ,QAAQ;AAAA,MACxC,YAAY,EAAE,UAAU,KAAK,OAAO,MAAM,SAAS;AAAA,MAElD;AAAA;AAAA,EACH;AAEJ;AAUO,SAAS,QAAQ,EAAE,UAAU,WAAW,eAAe,KAAK,GAAiB;AAClF,SACE;AAAA,IAAC,4BAAO;AAAA,IAAP;AAAA,MACC;AAAA,MACA,SAAQ;AAAA,MACR,aAAY;AAAA,MACZ,UAAU,EAAE,MAAM,MAAM,QAAQ,QAAQ;AAAA,MACxC,UAAU;AAAA,QACR,QAAQ,CAAC;AAAA,QACT,MAAM,EAAE,YAAY,EAAE,iBAAiB,aAAa,EAAE;AAAA,MACxD;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEO,SAAS,YAAY,EAAE,UAAU,UAAU,GAAsD;AACtG,SACE;AAAA,IAAC,4BAAO;AAAA,IAAP;AAAA,MACC;AAAA,MACA,UAAU;AAAA,QACR,QAAQ,EAAE,SAAS,GAAG,GAAG,GAAG;AAAA,QAC5B,MAAM,EAAE,SAAS,GAAG,GAAG,GAAG,YAAY,EAAE,UAAU,MAAM,MAAM,SAAS,EAAE;AAAA,MAC3E;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAIO,SAAS,aAAa,EAAE,MAAM,UAAU,GAAyC;AACtF,QAAM,QAAQ,KAAK,MAAM,GAAG;AAC5B,SACE;AAAA,IAAC,4BAAO;AAAA,IAAP;AAAA,MACC;AAAA,MACA,SAAQ;AAAA,MACR,SAAQ;AAAA,MACR,UAAU;AAAA,QACR,QAAQ,CAAC;AAAA,QACT,MAAM,EAAE,YAAY,EAAE,iBAAiB,MAAM,eAAe,IAAI,EAAE;AAAA,MACpE;AAAA,MAEC,gBAAM,IAAI,CAAC,MAAM,MAChB;AAAA,QAAC,4BAAO;AAAA,QAAP;AAAA,UAEC,WAAU;AAAA,UACV,UAAU;AAAA,YACR,QAAQ,EAAE,SAAS,GAAG,GAAG,IAAI,SAAS,IAAI;AAAA,YAC1C,MAAM,EAAE,SAAS,GAAG,GAAG,GAAG,SAAS,GAAG,YAAY,EAAE,UAAU,KAAK,MAAM,SAAS,EAAE;AAAA,UACtF;AAAA,UAEC;AAAA;AAAA,QAPI;AAAA,MAQP,CACD;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/components/motion-primitives.d.cts

@@ -0,0 +1,36 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLMotionProps } from 'framer-motion';
+
+declare const SPRING: {
+    readonly type: "spring";
+    readonly stiffness: 400;
+    readonly damping: 28;
+};
+declare const EASE_OUT: readonly [0.25, 0.46, 0.45, 0.94];
+interface MotionCardProps extends HTMLMotionProps<"div"> {
+    children: React.ReactNode;
+}
+declare function MotionCard({ children, className, ...props }: MotionCardProps): react_jsx_runtime.JSX.Element;
+interface FadeInProps {
+    children: React.ReactNode;
+    className?: string;
+    delay?: number;
+    y?: number;
+}
+declare function FadeIn({ children, className, delay, y }: FadeInProps): react_jsx_runtime.JSX.Element;
+interface StaggerProps {
+    children: React.ReactNode;
+    className?: string;
+    staggerDelay?: number;
+}
+declare function Stagger({ children, className, staggerDelay }: StaggerProps): react_jsx_runtime.JSX.Element;
+declare function StaggerItem({ children, className }: {
+    children: React.ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function KineticWords({ text, className }: {
+    text: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { EASE_OUT, FadeIn, KineticWords, MotionCard, SPRING, Stagger, StaggerItem };

package/dist/components/motion-primitives.d.ts

@@ -0,0 +1,36 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLMotionProps } from 'framer-motion';
+
+declare const SPRING: {
+    readonly type: "spring";
+    readonly stiffness: 400;
+    readonly damping: 28;
+};
+declare const EASE_OUT: readonly [0.25, 0.46, 0.45, 0.94];
+interface MotionCardProps extends HTMLMotionProps<"div"> {
+    children: React.ReactNode;
+}
+declare function MotionCard({ children, className, ...props }: MotionCardProps): react_jsx_runtime.JSX.Element;
+interface FadeInProps {
+    children: React.ReactNode;
+    className?: string;
+    delay?: number;
+    y?: number;
+}
+declare function FadeIn({ children, className, delay, y }: FadeInProps): react_jsx_runtime.JSX.Element;
+interface StaggerProps {
+    children: React.ReactNode;
+    className?: string;
+    staggerDelay?: number;
+}
+declare function Stagger({ children, className, staggerDelay }: StaggerProps): react_jsx_runtime.JSX.Element;
+declare function StaggerItem({ children, className }: {
+    children: React.ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function KineticWords({ text, className }: {
+    text: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { EASE_OUT, FadeIn, KineticWords, MotionCard, SPRING, Stagger, StaggerItem };