@medialane/ui 0.1.5 → 0.2.0

package/dist/components/brand-icon.cjs

@@ -1,5 +1,4 @@
 "use strict";
-"use client";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -35,15 +34,7 @@ module.exports = __toCommonJS(brand_icon_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_image = __toESM(require("next/image"), 1);
 var import_link = __toESM(require("next/link"), 1);
-var import_react = require("react");
 function MedialaneIcon({ size = 256, href = "/", className }) {
-  const [mounted, setMounted] = (0, import_react.useState)(false);
-  (0, import_react.useEffect)(() => {
-    setMounted(true);
-  }, []);
-  if (!mounted) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.default, { href, className, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: size, height: size } }) });
-  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_link.default,
     {

package/dist/components/brand-icon.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/brand-icon.tsx"],"sourcesContent":["\"use client\";\n\nimport Image from \"next/image\";\nimport Link from \"next/link\";\nimport { useEffect, useState } from \"react\";\n\nexport interface MedialaneIconProps {\n  size?: number;\n  href?: string;\n  className?: string;\n}\n\nexport function MedialaneIcon({ size = 256, href = \"/\", className }: MedialaneIconProps) {\n  const [mounted, setMounted] = useState(false);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  if (!mounted) {\n    return (\n      <Link href={href} className={className}>\n        <div style={{ width: size, height: size }} />\n      </Link>\n    );\n  }\n\n  return (\n    <Link\n      href={href}\n      className={`transition-opacity hover:opacity-80 drop-shadow-md ${className ?? \"\"}`}\n    >\n      <Image\n        src=\"/icon.png\"\n        alt=\"Medialane\"\n        width={size}\n        height={size}\n        priority\n      />\n    </Link>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBQ;AApBR,mBAAkB;AAClB,kBAAiB;AACjB,mBAAoC;AAQ7B,SAAS,cAAc,EAAE,OAAO,KAAK,OAAO,KAAK,UAAU,GAAuB;AACvF,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,KAAK;AAE5C,8BAAU,MAAM;AACd,eAAW,IAAI;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,MAAI,CAAC,SAAS;AACZ,WACE,4CAAC,YAAAA,SAAA,EAAK,MAAY,WAChB,sDAAC,SAAI,OAAO,EAAE,OAAO,MAAM,QAAQ,KAAK,GAAG,GAC7C;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC,YAAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,sDAAsD,aAAa,EAAE;AAAA,MAEhF;AAAA,QAAC,aAAAC;AAAA,QAAA;AAAA,UACC,KAAI;AAAA,UACJ,KAAI;AAAA,UACJ,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,UAAQ;AAAA;AAAA,MACV;AAAA;AAAA,EACF;AAEJ;","names":["Link","Image"]}
+{"version":3,"sources":["../../src/components/brand-icon.tsx"],"sourcesContent":["import Image from \"next/image\";\nimport Link from \"next/link\";\n\nexport interface MedialaneIconProps {\n  size?: number;\n  href?: string;\n  className?: string;\n}\n\nexport function MedialaneIcon({ size = 256, href = \"/\", className }: MedialaneIconProps) {\n  return (\n    <Link\n      href={href}\n      className={`transition-opacity hover:opacity-80 drop-shadow-md ${className ?? \"\"}`}\n    >\n      <Image\n        src=\"/icon.png\"\n        alt=\"Medialane\"\n        width={size}\n        height={size}\n        priority\n      />\n    </Link>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAeM;AAfN,mBAAkB;AAClB,kBAAiB;AAQV,SAAS,cAAc,EAAE,OAAO,KAAK,OAAO,KAAK,UAAU,GAAuB;AACvF,SACE;AAAA,IAAC,YAAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,sDAAsD,aAAa,EAAE;AAAA,MAEhF;AAAA,QAAC,aAAAC;AAAA,QAAA;AAAA,UACC,KAAI;AAAA,UACJ,KAAI;AAAA,UACJ,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,UAAQ;AAAA;AAAA,MACV;AAAA;AAAA,EACF;AAEJ;","names":["Link","Image"]}

package/dist/components/brand-icon.js

@@ -1,16 +1,7 @@
-"use client";
 import { jsx } from "react/jsx-runtime";
 import Image from "next/image";
 import Link from "next/link";
-import { useEffect, useState } from "react";
 function MedialaneIcon({ size = 256, href = "/", className }) {
-  const [mounted, setMounted] = useState(false);
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-  if (!mounted) {
-    return /* @__PURE__ */ jsx(Link, { href, className, children: /* @__PURE__ */ jsx("div", { style: { width: size, height: size } }) });
-  }
   return /* @__PURE__ */ jsx(
     Link,
     {

package/dist/components/brand-icon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/brand-icon.tsx"],"sourcesContent":["\"use client\";\n\nimport Image from \"next/image\";\nimport Link from \"next/link\";\nimport { useEffect, useState } from \"react\";\n\nexport interface MedialaneIconProps {\n  size?: number;\n  href?: string;\n  className?: string;\n}\n\nexport function MedialaneIcon({ size = 256, href = \"/\", className }: MedialaneIconProps) {\n  const [mounted, setMounted] = useState(false);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  if (!mounted) {\n    return (\n      <Link href={href} className={className}>\n        <div style={{ width: size, height: size }} />\n      </Link>\n    );\n  }\n\n  return (\n    <Link\n      href={href}\n      className={`transition-opacity hover:opacity-80 drop-shadow-md ${className ?? \"\"}`}\n    >\n      <Image\n        src=\"/icon.png\"\n        alt=\"Medialane\"\n        width={size}\n        height={size}\n        priority\n      />\n    </Link>\n  );\n}\n"],"mappings":";AAsBQ;AApBR,OAAO,WAAW;AAClB,OAAO,UAAU;AACjB,SAAS,WAAW,gBAAgB;AAQ7B,SAAS,cAAc,EAAE,OAAO,KAAK,OAAO,KAAK,UAAU,GAAuB;AACvF,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,YAAU,MAAM;AACd,eAAW,IAAI;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,MAAI,CAAC,SAAS;AACZ,WACE,oBAAC,QAAK,MAAY,WAChB,8BAAC,SAAI,OAAO,EAAE,OAAO,MAAM,QAAQ,KAAK,GAAG,GAC7C;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,sDAAsD,aAAa,EAAE;AAAA,MAEhF;AAAA,QAAC;AAAA;AAAA,UACC,KAAI;AAAA,UACJ,KAAI;AAAA,UACJ,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,UAAQ;AAAA;AAAA,MACV;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/brand-icon.tsx"],"sourcesContent":["import Image from \"next/image\";\nimport Link from \"next/link\";\n\nexport interface MedialaneIconProps {\n  size?: number;\n  href?: string;\n  className?: string;\n}\n\nexport function MedialaneIcon({ size = 256, href = \"/\", className }: MedialaneIconProps) {\n  return (\n    <Link\n      href={href}\n      className={`transition-opacity hover:opacity-80 drop-shadow-md ${className ?? \"\"}`}\n    >\n      <Image\n        src=\"/icon.png\"\n        alt=\"Medialane\"\n        width={size}\n        height={size}\n        priority\n      />\n    </Link>\n  );\n}\n"],"mappings":"AAeM;AAfN,OAAO,WAAW;AAClB,OAAO,UAAU;AAQV,SAAS,cAAc,EAAE,OAAO,KAAK,OAAO,KAAK,UAAU,GAAuB;AACvF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,sDAAsD,aAAa,EAAE;AAAA,MAEhF;AAAA,QAAC;AAAA;AAAA,UACC,KAAI;AAAA,UACJ,KAAI;AAAA,UACJ,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,UAAQ;AAAA;AAAA,MACV;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/collection-card.cjs

@@ -0,0 +1,124 @@
+"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 collection_card_exports = {};
+__export(collection_card_exports, {
+  CollectionCard: () => CollectionCard,
+  CollectionCardSkeleton: () => CollectionCardSkeleton
+});
+module.exports = __toCommonJS(collection_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_motion_primitives = require("./motion-primitives.js");
+function FloorTooltip({ children, label }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "relative inline-flex items-center gap-0.5 group/tip cursor-default", children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.HelpCircle, { className: "h-2.5 w-2.5 text-white/50 group-hover/tip:text-white/80 transition-colors shrink-0" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2 py-1 text-[10px] font-normal bg-popover text-popover-foreground border border-border rounded-md shadow-md whitespace-nowrap opacity-0 group-hover/tip:opacity-100 transition-opacity z-50", children: label })
+  ] });
+}
+function CollectionCard({ collection, settingsHref, className }) {
+  const [imgError, setImgError] = (0, import_react.useState)(false);
+  const imageUrl = collection.image ? (0, import_ipfs.ipfsToHttp)(collection.image) : null;
+  const showImage = imageUrl && !imgError;
+  const initial = (collection.name ?? collection.contractAddress).charAt(0).toUpperCase();
+  const hasFloor = !!collection.floorPrice;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_motion_primitives.MotionCard, { className: (0, import_cn.cn)("card-base group relative", className), children: [
+    settingsHref && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_link.default,
+      {
+        href: settingsHref,
+        onClick: (e) => e.stopPropagation(),
+        className: "absolute top-2 right-2 z-10 h-7 w-7 rounded-full bg-black/40 backdrop-blur-sm flex items-center justify-center text-white/70 hover:text-white hover:bg-black/60 transition-colors",
+        "aria-label": "Collection settings",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Settings2, { className: "h-3.5 w-3.5" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.default, { href: `/collections/${collection.contractAddress}`, className: "block relative h-full", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative aspect-[3/4] w-full overflow-hidden bg-muted", children: [
+      showImage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_image.default,
+        {
+          src: imageUrl,
+          alt: collection.name ?? "Collection",
+          fill: true,
+          className: "object-cover transition-transform duration-500 group-hover:scale-105",
+          onError: () => setImgError(true),
+          unoptimized: true
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-gradient-to-br from-brand-purple/30 via-brand-blue/20 to-brand-navy/40 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-8xl font-black text-white/10 select-none tracking-tighter", children: initial }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "absolute bottom-0 left-0 right-0 px-2.5 pb-2.5 flex flex-col gap-1.5 items-start", children: [
+        !collection.name && collection.metadataStatus === "PENDING" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex items-center gap-1 text-[10px] text-white/60 backdrop-blur-md bg-black/30 rounded-full px-2 py-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Loader2, { className: "h-2.5 w-2.5 animate-spin" }),
+          "Indexing\u2026"
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "p",
+          {
+            className: "font-bold text-sm text-white leading-tight backdrop-blur-md bg-black/30 rounded-lg px-2.5 py-1 max-w-full truncate",
+            style: { textShadow: "0 1px 6px rgba(0,0,0,0.5)" },
+            children: [
+              collection.name ?? "Unnamed Collection",
+              collection.isKnown && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.CheckCircle2, { className: "inline-block h-3 w-3 text-blue-400 ml-1.5 shrink-0 align-middle" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1.5 flex-wrap", children: [
+          collection.totalSupply != null && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-[10px] font-medium text-white/80 backdrop-blur-md bg-black/30 rounded-full px-2 py-0.5", children: [
+            collection.totalSupply.toLocaleString(),
+            " items"
+          ] }),
+          hasFloor && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[10px] font-bold text-white/90 backdrop-blur-md bg-black/30 rounded-full px-2 py-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FloorTooltip, { label: "Lowest active listing price in this collection", children: [
+            "Floor ",
+            (0, import_format.formatDisplayPrice)(collection.floorPrice)
+          ] }) })
+        ] })
+      ] })
+    ] }) })
+  ] });
+}
+function CollectionCardSkeleton() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "card-base overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative aspect-[3/4] w-full overflow-hidden bg-muted", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 animate-pulse bg-muted" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "absolute bottom-3 left-3 right-3 space-y-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-4 w-2/3 rounded-md bg-muted-foreground/20 animate-pulse" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-3 w-1/3 rounded-md bg-muted-foreground/20 animate-pulse" })
+    ] })
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CollectionCard,
+  CollectionCardSkeleton
+});
+//# sourceMappingURL=collection-card.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/collection-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport Link from \"next/link\";\nimport Image from \"next/image\";\nimport { Loader2, Settings2, CheckCircle2, HelpCircle } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { formatDisplayPrice } from \"../utils/format.js\";\nimport { MotionCard } from \"./motion-primitives.js\";\nimport type { ApiCollection } from \"@medialane/sdk\";\n\n// Pure CSS tooltip — no Radix/shadcn dependency\nfunction FloorTooltip({ children, label }: { children: React.ReactNode; label: string }) {\n  return (\n    <span className=\"relative inline-flex items-center gap-0.5 group/tip cursor-default\">\n      {children}\n      <HelpCircle className=\"h-2.5 w-2.5 text-white/50 group-hover/tip:text-white/80 transition-colors shrink-0\" />\n      <span className=\"pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2 py-1 text-[10px] font-normal bg-popover text-popover-foreground border border-border rounded-md shadow-md whitespace-nowrap opacity-0 group-hover/tip:opacity-100 transition-opacity z-50\">\n        {label}\n      </span>\n    </span>\n  );\n}\n\nexport interface CollectionCardProps {\n  collection: ApiCollection;\n  /** Shows settings gear icon linking to this path — used in portfolio pages */\n  settingsHref?: string;\n  className?: string;\n}\n\nexport function CollectionCard({ collection, settingsHref, className }: CollectionCardProps) {\n  const [imgError, setImgError] = useState(false);\n  const imageUrl = collection.image ? ipfsToHttp(collection.image) : null;\n  const showImage = imageUrl && !imgError;\n  const initial = (collection.name ?? collection.contractAddress).charAt(0).toUpperCase();\n  const hasFloor = !!collection.floorPrice;\n\n  return (\n    <MotionCard className={cn(\"card-base group relative\", className)}>\n      {settingsHref && (\n        <Link\n          href={settingsHref}\n          onClick={(e) => e.stopPropagation()}\n          className=\"absolute top-2 right-2 z-10 h-7 w-7 rounded-full bg-black/40 backdrop-blur-sm flex items-center justify-center text-white/70 hover:text-white hover:bg-black/60 transition-colors\"\n          aria-label=\"Collection settings\"\n        >\n          <Settings2 className=\"h-3.5 w-3.5\" />\n        </Link>\n      )}\n\n      <Link href={`/collections/${collection.contractAddress}`} className=\"block relative h-full\">\n        <div className=\"relative aspect-[3/4] w-full overflow-hidden bg-muted\">\n          {showImage ? (\n            <Image\n              src={imageUrl}\n              alt={collection.name ?? \"Collection\"}\n              fill\n              className=\"object-cover transition-transform duration-500 group-hover:scale-105\"\n              onError={() => setImgError(true)}\n              unoptimized\n            />\n          ) : (\n            <div className=\"absolute inset-0 bg-gradient-to-br from-brand-purple/30 via-brand-blue/20 to-brand-navy/40 flex items-center justify-center\">\n              <span className=\"text-8xl font-black text-white/10 select-none tracking-tighter\">\n                {initial}\n              </span>\n            </div>\n          )}\n\n          <div className=\"absolute bottom-0 left-0 right-0 px-2.5 pb-2.5 flex flex-col gap-1.5 items-start\">\n            {!collection.name && collection.metadataStatus === \"PENDING\" ? (\n              <span className=\"flex items-center gap-1 text-[10px] text-white/60 backdrop-blur-md bg-black/30 rounded-full px-2 py-0.5\">\n                <Loader2 className=\"h-2.5 w-2.5 animate-spin\" />\n                Indexing…\n              </span>\n            ) : (\n              <p\n                className=\"font-bold text-sm text-white leading-tight backdrop-blur-md bg-black/30 rounded-lg px-2.5 py-1 max-w-full truncate\"\n                style={{ textShadow: \"0 1px 6px rgba(0,0,0,0.5)\" }}\n              >\n                {collection.name ?? \"Unnamed Collection\"}\n                {collection.isKnown && (\n                  <CheckCircle2 className=\"inline-block h-3 w-3 text-blue-400 ml-1.5 shrink-0 align-middle\" />\n                )}\n              </p>\n            )}\n\n            <div className=\"flex items-center gap-1.5 flex-wrap\">\n              {collection.totalSupply != null && (\n                <span className=\"text-[10px] font-medium text-white/80 backdrop-blur-md bg-black/30 rounded-full px-2 py-0.5\">\n                  {collection.totalSupply.toLocaleString()} items\n                </span>\n              )}\n              {hasFloor && (\n                <span className=\"text-[10px] font-bold text-white/90 backdrop-blur-md bg-black/30 rounded-full px-2 py-0.5\">\n                  <FloorTooltip label=\"Lowest active listing price in this collection\">\n                    Floor {formatDisplayPrice(collection.floorPrice)}\n                  </FloorTooltip>\n                </span>\n              )}\n            </div>\n          </div>\n        </div>\n      </Link>\n    </MotionCard>\n  );\n}\n\nexport function CollectionCardSkeleton() {\n  return (\n    <div className=\"card-base overflow-hidden\">\n      <div className=\"relative aspect-[3/4] w-full overflow-hidden bg-muted\">\n        <div className=\"absolute inset-0 animate-pulse bg-muted\" />\n        <div className=\"absolute bottom-3 left-3 right-3 space-y-1.5\">\n          <div className=\"h-4 w-2/3 rounded-md bg-muted-foreground/20 animate-pulse\" />\n          <div className=\"h-3 w-1/3 rounded-md bg-muted-foreground/20 animate-pulse\" />\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeI;AAbJ,mBAAyB;AACzB,kBAAiB;AACjB,mBAAkB;AAClB,0BAA6D;AAC7D,gBAAmB;AACnB,kBAA2B;AAC3B,oBAAmC;AACnC,+BAA2B;AAI3B,SAAS,aAAa,EAAE,UAAU,MAAM,GAAiD;AACvF,SACE,6CAAC,UAAK,WAAU,sEACb;AAAA;AAAA,IACD,4CAAC,kCAAW,WAAU,sFAAqF;AAAA,IAC3G,4CAAC,UAAK,WAAU,4QACb,iBACH;AAAA,KACF;AAEJ;AASO,SAAS,eAAe,EAAE,YAAY,cAAc,UAAU,GAAwB;AAC3F,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAC9C,QAAM,WAAW,WAAW,YAAQ,wBAAW,WAAW,KAAK,IAAI;AACnE,QAAM,YAAY,YAAY,CAAC;AAC/B,QAAM,WAAW,WAAW,QAAQ,WAAW,iBAAiB,OAAO,CAAC,EAAE,YAAY;AACtF,QAAM,WAAW,CAAC,CAAC,WAAW;AAE9B,SACE,6CAAC,uCAAW,eAAW,cAAG,4BAA4B,SAAS,GAC5D;AAAA,oBACC;AAAA,MAAC,YAAAA;AAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,QAClC,WAAU;AAAA,QACV,cAAW;AAAA,QAEX,sDAAC,iCAAU,WAAU,eAAc;AAAA;AAAA,IACrC;AAAA,IAGF,4CAAC,YAAAA,SAAA,EAAK,MAAM,gBAAgB,WAAW,eAAe,IAAI,WAAU,yBAClE,uDAAC,SAAI,WAAU,yDACZ;AAAA,kBACC;AAAA,QAAC,aAAAC;AAAA,QAAA;AAAA,UACC,KAAK;AAAA,UACL,KAAK,WAAW,QAAQ;AAAA,UACxB,MAAI;AAAA,UACJ,WAAU;AAAA,UACV,SAAS,MAAM,YAAY,IAAI;AAAA,UAC/B,aAAW;AAAA;AAAA,MACb,IAEA,4CAAC,SAAI,WAAU,+HACb,sDAAC,UAAK,WAAU,kEACb,mBACH,GACF;AAAA,MAGF,6CAAC,SAAI,WAAU,oFACZ;AAAA,SAAC,WAAW,QAAQ,WAAW,mBAAmB,YACjD,6CAAC,UAAK,WAAU,2GACd;AAAA,sDAAC,+BAAQ,WAAU,4BAA2B;AAAA,UAAE;AAAA,WAElD,IAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,YAAY,4BAA4B;AAAA,YAEhD;AAAA,yBAAW,QAAQ;AAAA,cACnB,WAAW,WACV,4CAAC,oCAAa,WAAU,mEAAkE;AAAA;AAAA;AAAA,QAE9F;AAAA,QAGF,6CAAC,SAAI,WAAU,uCACZ;AAAA,qBAAW,eAAe,QACzB,6CAAC,UAAK,WAAU,+FACb;AAAA,uBAAW,YAAY,eAAe;AAAA,YAAE;AAAA,aAC3C;AAAA,UAED,YACC,4CAAC,UAAK,WAAU,6FACd,uDAAC,gBAAa,OAAM,kDAAiD;AAAA;AAAA,gBAC5D,kCAAmB,WAAW,UAAU;AAAA,aACjD,GACF;AAAA,WAEJ;AAAA,SACF;AAAA,OACF,GACF;AAAA,KACF;AAEJ;AAEO,SAAS,yBAAyB;AACvC,SACE,4CAAC,SAAI,WAAU,6BACb,uDAAC,SAAI,WAAU,yDACb;AAAA,gDAAC,SAAI,WAAU,2CAA0C;AAAA,IACzD,6CAAC,SAAI,WAAU,gDACb;AAAA,kDAAC,SAAI,WAAU,6DAA4D;AAAA,MAC3E,4CAAC,SAAI,WAAU,6DAA4D;AAAA,OAC7E;AAAA,KACF,GACF;AAEJ;","names":["Link","Image"]}

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

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ApiCollection } from '@medialane/sdk';
+
+interface CollectionCardProps {
+    collection: ApiCollection;
+    /** Shows settings gear icon linking to this path — used in portfolio pages */
+    settingsHref?: string;
+    className?: string;
+}
+declare function CollectionCard({ collection, settingsHref, className }: CollectionCardProps): react_jsx_runtime.JSX.Element;
+declare function CollectionCardSkeleton(): react_jsx_runtime.JSX.Element;
+
+export { CollectionCard, type CollectionCardProps, CollectionCardSkeleton };

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

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ApiCollection } from '@medialane/sdk';
+
+interface CollectionCardProps {
+    collection: ApiCollection;
+    /** Shows settings gear icon linking to this path — used in portfolio pages */
+    settingsHref?: string;
+    className?: string;
+}
+declare function CollectionCard({ collection, settingsHref, className }: CollectionCardProps): react_jsx_runtime.JSX.Element;
+declare function CollectionCardSkeleton(): react_jsx_runtime.JSX.Element;
+
+export { CollectionCard, type CollectionCardProps, CollectionCardSkeleton };

package/dist/components/collection-card.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { Loader2, Settings2, CheckCircle2, HelpCircle } from "lucide-react";
+import { cn } from "../utils/cn.js";
+import { ipfsToHttp } from "../utils/ipfs.js";
+import { formatDisplayPrice } from "../utils/format.js";
+import { MotionCard } from "./motion-primitives.js";
+function FloorTooltip({ children, label }) {
+  return /* @__PURE__ */ jsxs("span", { className: "relative inline-flex items-center gap-0.5 group/tip cursor-default", children: [
+    children,
+    /* @__PURE__ */ jsx(HelpCircle, { className: "h-2.5 w-2.5 text-white/50 group-hover/tip:text-white/80 transition-colors shrink-0" }),
+    /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2 py-1 text-[10px] font-normal bg-popover text-popover-foreground border border-border rounded-md shadow-md whitespace-nowrap opacity-0 group-hover/tip:opacity-100 transition-opacity z-50", children: label })
+  ] });
+}
+function CollectionCard({ collection, settingsHref, className }) {
+  const [imgError, setImgError] = useState(false);
+  const imageUrl = collection.image ? ipfsToHttp(collection.image) : null;
+  const showImage = imageUrl && !imgError;
+  const initial = (collection.name ?? collection.contractAddress).charAt(0).toUpperCase();
+  const hasFloor = !!collection.floorPrice;
+  return /* @__PURE__ */ jsxs(MotionCard, { className: cn("card-base group relative", className), children: [
+    settingsHref && /* @__PURE__ */ jsx(
+      Link,
+      {
+        href: settingsHref,
+        onClick: (e) => e.stopPropagation(),
+        className: "absolute top-2 right-2 z-10 h-7 w-7 rounded-full bg-black/40 backdrop-blur-sm flex items-center justify-center text-white/70 hover:text-white hover:bg-black/60 transition-colors",
+        "aria-label": "Collection settings",
+        children: /* @__PURE__ */ jsx(Settings2, { className: "h-3.5 w-3.5" })
+      }
+    ),
+    /* @__PURE__ */ jsx(Link, { href: `/collections/${collection.contractAddress}`, className: "block relative h-full", children: /* @__PURE__ */ jsxs("div", { className: "relative aspect-[3/4] w-full overflow-hidden bg-muted", children: [
+      showImage ? /* @__PURE__ */ jsx(
+        Image,
+        {
+          src: imageUrl,
+          alt: collection.name ?? "Collection",
+          fill: true,
+          className: "object-cover transition-transform duration-500 group-hover:scale-105",
+          onError: () => setImgError(true),
+          unoptimized: true
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-brand-purple/30 via-brand-blue/20 to-brand-navy/40 flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-8xl font-black text-white/10 select-none tracking-tighter", children: initial }) }),
+      /* @__PURE__ */ jsxs("div", { className: "absolute bottom-0 left-0 right-0 px-2.5 pb-2.5 flex flex-col gap-1.5 items-start", children: [
+        !collection.name && collection.metadataStatus === "PENDING" ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-[10px] text-white/60 backdrop-blur-md bg-black/30 rounded-full px-2 py-0.5", children: [
+          /* @__PURE__ */ jsx(Loader2, { className: "h-2.5 w-2.5 animate-spin" }),
+          "Indexing\u2026"
+        ] }) : /* @__PURE__ */ jsxs(
+          "p",
+          {
+            className: "font-bold text-sm text-white leading-tight backdrop-blur-md bg-black/30 rounded-lg px-2.5 py-1 max-w-full truncate",
+            style: { textShadow: "0 1px 6px rgba(0,0,0,0.5)" },
+            children: [
+              collection.name ?? "Unnamed Collection",
+              collection.isKnown && /* @__PURE__ */ jsx(CheckCircle2, { className: "inline-block h-3 w-3 text-blue-400 ml-1.5 shrink-0 align-middle" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 flex-wrap", children: [
+          collection.totalSupply != null && /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-medium text-white/80 backdrop-blur-md bg-black/30 rounded-full px-2 py-0.5", children: [
+            collection.totalSupply.toLocaleString(),
+            " items"
+          ] }),
+          hasFloor && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-white/90 backdrop-blur-md bg-black/30 rounded-full px-2 py-0.5", children: /* @__PURE__ */ jsxs(FloorTooltip, { label: "Lowest active listing price in this collection", children: [
+            "Floor ",
+            formatDisplayPrice(collection.floorPrice)
+          ] }) })
+        ] })
+      ] })
+    ] }) })
+  ] });
+}
+function CollectionCardSkeleton() {
+  return /* @__PURE__ */ jsx("div", { className: "card-base overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "relative aspect-[3/4] w-full overflow-hidden bg-muted", children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 animate-pulse bg-muted" }),
+    /* @__PURE__ */ jsxs("div", { className: "absolute bottom-3 left-3 right-3 space-y-1.5", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-4 w-2/3 rounded-md bg-muted-foreground/20 animate-pulse" }),
+      /* @__PURE__ */ jsx("div", { className: "h-3 w-1/3 rounded-md bg-muted-foreground/20 animate-pulse" })
+    ] })
+  ] }) });
+}
+export {
+  CollectionCard,
+  CollectionCardSkeleton
+};
+//# sourceMappingURL=collection-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/collection-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport Link from \"next/link\";\nimport Image from \"next/image\";\nimport { Loader2, Settings2, CheckCircle2, HelpCircle } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { formatDisplayPrice } from \"../utils/format.js\";\nimport { MotionCard } from \"./motion-primitives.js\";\nimport type { ApiCollection } from \"@medialane/sdk\";\n\n// Pure CSS tooltip — no Radix/shadcn dependency\nfunction FloorTooltip({ children, label }: { children: React.ReactNode; label: string }) {\n  return (\n    <span className=\"relative inline-flex items-center gap-0.5 group/tip cursor-default\">\n      {children}\n      <HelpCircle className=\"h-2.5 w-2.5 text-white/50 group-hover/tip:text-white/80 transition-colors shrink-0\" />\n      <span className=\"pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2 py-1 text-[10px] font-normal bg-popover text-popover-foreground border border-border rounded-md shadow-md whitespace-nowrap opacity-0 group-hover/tip:opacity-100 transition-opacity z-50\">\n        {label}\n      </span>\n    </span>\n  );\n}\n\nexport interface CollectionCardProps {\n  collection: ApiCollection;\n  /** Shows settings gear icon linking to this path — used in portfolio pages */\n  settingsHref?: string;\n  className?: string;\n}\n\nexport function CollectionCard({ collection, settingsHref, className }: CollectionCardProps) {\n  const [imgError, setImgError] = useState(false);\n  const imageUrl = collection.image ? ipfsToHttp(collection.image) : null;\n  const showImage = imageUrl && !imgError;\n  const initial = (collection.name ?? collection.contractAddress).charAt(0).toUpperCase();\n  const hasFloor = !!collection.floorPrice;\n\n  return (\n    <MotionCard className={cn(\"card-base group relative\", className)}>\n      {settingsHref && (\n        <Link\n          href={settingsHref}\n          onClick={(e) => e.stopPropagation()}\n          className=\"absolute top-2 right-2 z-10 h-7 w-7 rounded-full bg-black/40 backdrop-blur-sm flex items-center justify-center text-white/70 hover:text-white hover:bg-black/60 transition-colors\"\n          aria-label=\"Collection settings\"\n        >\n          <Settings2 className=\"h-3.5 w-3.5\" />\n        </Link>\n      )}\n\n      <Link href={`/collections/${collection.contractAddress}`} className=\"block relative h-full\">\n        <div className=\"relative aspect-[3/4] w-full overflow-hidden bg-muted\">\n          {showImage ? (\n            <Image\n              src={imageUrl}\n              alt={collection.name ?? \"Collection\"}\n              fill\n              className=\"object-cover transition-transform duration-500 group-hover:scale-105\"\n              onError={() => setImgError(true)}\n              unoptimized\n            />\n          ) : (\n            <div className=\"absolute inset-0 bg-gradient-to-br from-brand-purple/30 via-brand-blue/20 to-brand-navy/40 flex items-center justify-center\">\n              <span className=\"text-8xl font-black text-white/10 select-none tracking-tighter\">\n                {initial}\n              </span>\n            </div>\n          )}\n\n          <div className=\"absolute bottom-0 left-0 right-0 px-2.5 pb-2.5 flex flex-col gap-1.5 items-start\">\n            {!collection.name && collection.metadataStatus === \"PENDING\" ? (\n              <span className=\"flex items-center gap-1 text-[10px] text-white/60 backdrop-blur-md bg-black/30 rounded-full px-2 py-0.5\">\n                <Loader2 className=\"h-2.5 w-2.5 animate-spin\" />\n                Indexing…\n              </span>\n            ) : (\n              <p\n                className=\"font-bold text-sm text-white leading-tight backdrop-blur-md bg-black/30 rounded-lg px-2.5 py-1 max-w-full truncate\"\n                style={{ textShadow: \"0 1px 6px rgba(0,0,0,0.5)\" }}\n              >\n                {collection.name ?? \"Unnamed Collection\"}\n                {collection.isKnown && (\n                  <CheckCircle2 className=\"inline-block h-3 w-3 text-blue-400 ml-1.5 shrink-0 align-middle\" />\n                )}\n              </p>\n            )}\n\n            <div className=\"flex items-center gap-1.5 flex-wrap\">\n              {collection.totalSupply != null && (\n                <span className=\"text-[10px] font-medium text-white/80 backdrop-blur-md bg-black/30 rounded-full px-2 py-0.5\">\n                  {collection.totalSupply.toLocaleString()} items\n                </span>\n              )}\n              {hasFloor && (\n                <span className=\"text-[10px] font-bold text-white/90 backdrop-blur-md bg-black/30 rounded-full px-2 py-0.5\">\n                  <FloorTooltip label=\"Lowest active listing price in this collection\">\n                    Floor {formatDisplayPrice(collection.floorPrice)}\n                  </FloorTooltip>\n                </span>\n              )}\n            </div>\n          </div>\n        </div>\n      </Link>\n    </MotionCard>\n  );\n}\n\nexport function CollectionCardSkeleton() {\n  return (\n    <div className=\"card-base overflow-hidden\">\n      <div className=\"relative aspect-[3/4] w-full overflow-hidden bg-muted\">\n        <div className=\"absolute inset-0 animate-pulse bg-muted\" />\n        <div className=\"absolute bottom-3 left-3 right-3 space-y-1.5\">\n          <div className=\"h-4 w-2/3 rounded-md bg-muted-foreground/20 animate-pulse\" />\n          <div className=\"h-3 w-1/3 rounded-md bg-muted-foreground/20 animate-pulse\" />\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAeI,SAEE,KAFF;AAbJ,SAAS,gBAAgB;AACzB,OAAO,UAAU;AACjB,OAAO,WAAW;AAClB,SAAS,SAAS,WAAW,cAAc,kBAAkB;AAC7D,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAC3B,SAAS,0BAA0B;AACnC,SAAS,kBAAkB;AAI3B,SAAS,aAAa,EAAE,UAAU,MAAM,GAAiD;AACvF,SACE,qBAAC,UAAK,WAAU,sEACb;AAAA;AAAA,IACD,oBAAC,cAAW,WAAU,sFAAqF;AAAA,IAC3G,oBAAC,UAAK,WAAU,4QACb,iBACH;AAAA,KACF;AAEJ;AASO,SAAS,eAAe,EAAE,YAAY,cAAc,UAAU,GAAwB;AAC3F,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,WAAW,WAAW,QAAQ,WAAW,WAAW,KAAK,IAAI;AACnE,QAAM,YAAY,YAAY,CAAC;AAC/B,QAAM,WAAW,WAAW,QAAQ,WAAW,iBAAiB,OAAO,CAAC,EAAE,YAAY;AACtF,QAAM,WAAW,CAAC,CAAC,WAAW;AAE9B,SACE,qBAAC,cAAW,WAAW,GAAG,4BAA4B,SAAS,GAC5D;AAAA,oBACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,QAClC,WAAU;AAAA,QACV,cAAW;AAAA,QAEX,8BAAC,aAAU,WAAU,eAAc;AAAA;AAAA,IACrC;AAAA,IAGF,oBAAC,QAAK,MAAM,gBAAgB,WAAW,eAAe,IAAI,WAAU,yBAClE,+BAAC,SAAI,WAAU,yDACZ;AAAA,kBACC;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,KAAK,WAAW,QAAQ;AAAA,UACxB,MAAI;AAAA,UACJ,WAAU;AAAA,UACV,SAAS,MAAM,YAAY,IAAI;AAAA,UAC/B,aAAW;AAAA;AAAA,MACb,IAEA,oBAAC,SAAI,WAAU,+HACb,8BAAC,UAAK,WAAU,kEACb,mBACH,GACF;AAAA,MAGF,qBAAC,SAAI,WAAU,oFACZ;AAAA,SAAC,WAAW,QAAQ,WAAW,mBAAmB,YACjD,qBAAC,UAAK,WAAU,2GACd;AAAA,8BAAC,WAAQ,WAAU,4BAA2B;AAAA,UAAE;AAAA,WAElD,IAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,YAAY,4BAA4B;AAAA,YAEhD;AAAA,yBAAW,QAAQ;AAAA,cACnB,WAAW,WACV,oBAAC,gBAAa,WAAU,mEAAkE;AAAA;AAAA;AAAA,QAE9F;AAAA,QAGF,qBAAC,SAAI,WAAU,uCACZ;AAAA,qBAAW,eAAe,QACzB,qBAAC,UAAK,WAAU,+FACb;AAAA,uBAAW,YAAY,eAAe;AAAA,YAAE;AAAA,aAC3C;AAAA,UAED,YACC,oBAAC,UAAK,WAAU,6FACd,+BAAC,gBAAa,OAAM,kDAAiD;AAAA;AAAA,YAC5D,mBAAmB,WAAW,UAAU;AAAA,aACjD,GACF;AAAA,WAEJ;AAAA,SACF;AAAA,OACF,GACF;AAAA,KACF;AAEJ;AAEO,SAAS,yBAAyB;AACvC,SACE,oBAAC,SAAI,WAAU,6BACb,+BAAC,SAAI,WAAU,yDACb;AAAA,wBAAC,SAAI,WAAU,2CAA0C;AAAA,IACzD,qBAAC,SAAI,WAAU,gDACb;AAAA,0BAAC,SAAI,WAAU,6DAA4D;AAAA,MAC3E,oBAAC,SAAI,WAAU,6DAA4D;AAAA,OAC7E;AAAA,KACF,GACF;AAEJ;","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 };