@medialane/ui 0.3.1 → 0.3.2

package/dist/components/discover-collections-strip.cjs

@@ -0,0 +1,111 @@
+"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 discover_collections_strip_exports = {};
+__export(discover_collections_strip_exports, {
+  DiscoverCollectionsStrip: () => DiscoverCollectionsStrip
+});
+module.exports = __toCommonJS(discover_collections_strip_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_lucide_react = require("lucide-react");
+var import_motion_primitives = require("./motion-primitives.js");
+var import_ipfs = require("../utils/ipfs.js");
+var import_format = require("../utils/format.js");
+function CollectionChipSkeleton() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "shrink-0 w-80 rounded-xl border border-border overflow-hidden", 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-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-3.5 w-28 bg-muted animate-pulse rounded" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-3 w-16 bg-muted animate-pulse rounded" })
+    ] })
+  ] });
+}
+function CollectionChip({
+  collection,
+  href
+}) {
+  const [imgError, setImgError] = (0, import_react.useState)(false);
+  const image = collection.image && !imgError ? (0, import_ipfs.ipfsToHttp)(collection.image) : null;
+  const initial = (collection.name ?? "?").charAt(0).toUpperCase();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "a",
+    {
+      href,
+      className: "block shrink-0 w-80 snap-start active:scale-[0.97] transition-transform duration-150",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-xl border border-border overflow-hidden group bg-card hover:border-border/80 transition-colors", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "aspect-square bg-muted relative overflow-hidden", children: image ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "img",
+          {
+            src: image,
+            alt: collection.name ?? "",
+            loading: "lazy",
+            className: "w-full h-full object-cover group-hover:scale-105 transition-transform duration-500",
+            onError: () => setImgError(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-5xl font-black text-white/10 select-none", children: initial }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-3 space-y-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-semibold truncate", children: collection.name ?? "Unnamed" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+              collection.totalSupply ?? 0,
+              " items"
+            ] }),
+            collection.floorPrice && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-semibold text-brand-orange", children: (0, import_format.formatDisplayPrice)(collection.floorPrice) })
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+function DiscoverCollectionsStrip({
+  collections,
+  isLoading,
+  getHref,
+  allCollectionsHref = "/collections"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion_primitives.FadeIn, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "section-label", children: "NFT" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2 mt-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Layers, { className: "h-4 w-4 text-brand-blue" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-lg font-bold", children: "Collections" })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "a",
+        {
+          href: allCollectionsHref,
+          className: "inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground px-3 py-1.5 rounded-md hover:bg-accent transition-colors",
+          children: [
+            "View all ",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowRight, { className: "h-3.5 w-3.5" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "overflow-x-auto scrollbar-hide snap-x snap-mandatory -mx-4 px-4 md:mx-0 md:px-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex gap-3 w-max pb-1", children: isLoading ? Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollectionChipSkeleton, {}, i)) : collections.map((col) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollectionChip, { collection: col, href: getHref(col) }, col.contractAddress)) }) })
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DiscoverCollectionsStrip
+});
+//# sourceMappingURL=discover-collections-strip.cjs.map

package/dist/components/discover-collections-strip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/discover-collections-strip.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { Layers, ArrowRight } from \"lucide-react\";\nimport { FadeIn } from \"./motion-primitives.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { formatDisplayPrice } from \"../utils/format.js\";\nimport type { ApiCollection } from \"@medialane/sdk\";\n\nexport interface DiscoverCollectionsStripProps {\n  collections: ApiCollection[];\n  isLoading: boolean;\n  getHref: (collection: ApiCollection) => string;\n  allCollectionsHref?: string;\n}\n\nfunction CollectionChipSkeleton() {\n  return (\n    <div className=\"shrink-0 w-80 rounded-xl border border-border overflow-hidden\">\n      <div className=\"aspect-square w-full bg-muted animate-pulse\" />\n      <div className=\"p-3 space-y-1.5\">\n        <div className=\"h-3.5 w-28 bg-muted animate-pulse rounded\" />\n        <div className=\"h-3 w-16 bg-muted animate-pulse rounded\" />\n      </div>\n    </div>\n  );\n}\n\nfunction CollectionChip({\n  collection,\n  href,\n}: {\n  collection: ApiCollection;\n  href: string;\n}) {\n  const [imgError, setImgError] = useState(false);\n  const image = collection.image && !imgError ? ipfsToHttp(collection.image) : null;\n  const initial = (collection.name ?? \"?\").charAt(0).toUpperCase();\n\n  return (\n    <a\n      href={href}\n      className=\"block shrink-0 w-80 snap-start active:scale-[0.97] transition-transform duration-150\"\n    >\n      <div className=\"rounded-xl border border-border overflow-hidden group bg-card hover:border-border/80 transition-colors\">\n        <div className=\"aspect-square bg-muted relative overflow-hidden\">\n          {image ? (\n            <img\n              src={image}\n              alt={collection.name ?? \"\"}\n              loading=\"lazy\"\n              className=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-500\"\n              onError={() => setImgError(true)}\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-5xl font-black text-white/10 select-none\">{initial}</span>\n            </div>\n          )}\n        </div>\n        <div className=\"p-3 space-y-0.5\">\n          <p className=\"text-sm font-semibold truncate\">{collection.name ?? \"Unnamed\"}</p>\n          <div className=\"flex items-center justify-between text-xs text-muted-foreground\">\n            <span>{collection.totalSupply ?? 0} items</span>\n            {collection.floorPrice && (\n              <span className=\"font-semibold text-brand-orange\">\n                {formatDisplayPrice(collection.floorPrice)}\n              </span>\n            )}\n          </div>\n        </div>\n      </div>\n    </a>\n  );\n}\n\nexport function DiscoverCollectionsStrip({\n  collections,\n  isLoading,\n  getHref,\n  allCollectionsHref = \"/collections\",\n}: DiscoverCollectionsStripProps) {\n  return (\n    <FadeIn>\n      <div className=\"space-y-3\">\n        <div className=\"flex items-center justify-between\">\n          <div>\n            <p className=\"section-label\">NFT</p>\n            <div className=\"flex items-center gap-2 mt-0.5\">\n              <Layers className=\"h-4 w-4 text-brand-blue\" />\n              <h2 className=\"text-lg font-bold\">Collections</h2>\n            </div>\n          </div>\n          <a\n            href={allCollectionsHref}\n            className=\"inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground px-3 py-1.5 rounded-md hover:bg-accent transition-colors\"\n          >\n            View all <ArrowRight className=\"h-3.5 w-3.5\" />\n          </a>\n        </div>\n        <div className=\"overflow-x-auto scrollbar-hide snap-x snap-mandatory -mx-4 px-4 md:mx-0 md:px-0\">\n          <div className=\"flex gap-3 w-max pb-1\">\n            {isLoading\n              ? Array.from({ length: 6 }).map((_, i) => <CollectionChipSkeleton key={i} />)\n              : collections.map((col) => (\n                  <CollectionChip key={col.contractAddress} collection={col} href={getHref(col)} />\n                ))}\n          </div>\n        </div>\n      </div>\n    </FadeIn>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBM;AAjBN,mBAAyB;AACzB,0BAAmC;AACnC,+BAAuB;AACvB,kBAA2B;AAC3B,oBAAmC;AAUnC,SAAS,yBAAyB;AAChC,SACE,6CAAC,SAAI,WAAU,iEACb;AAAA,gDAAC,SAAI,WAAU,+CAA8C;AAAA,IAC7D,6CAAC,SAAI,WAAU,mBACb;AAAA,kDAAC,SAAI,WAAU,6CAA4C;AAAA,MAC3D,4CAAC,SAAI,WAAU,2CAA0C;AAAA,OAC3D;AAAA,KACF;AAEJ;AAEA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AACF,GAGG;AACD,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAC9C,QAAM,QAAQ,WAAW,SAAS,CAAC,eAAW,wBAAW,WAAW,KAAK,IAAI;AAC7E,QAAM,WAAW,WAAW,QAAQ,KAAK,OAAO,CAAC,EAAE,YAAY;AAE/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAU;AAAA,MAEV,uDAAC,SAAI,WAAU,0GACb;AAAA,oDAAC,SAAI,WAAU,mDACZ,kBACC;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,KAAK,WAAW,QAAQ;AAAA,YACxB,SAAQ;AAAA,YACR,WAAU;AAAA,YACV,SAAS,MAAM,YAAY,IAAI;AAAA;AAAA,QACjC,IAEA,4CAAC,SAAI,WAAU,+HACb,sDAAC,UAAK,WAAU,iDAAiD,mBAAQ,GAC3E,GAEJ;AAAA,QACA,6CAAC,SAAI,WAAU,mBACb;AAAA,sDAAC,OAAE,WAAU,kCAAkC,qBAAW,QAAQ,WAAU;AAAA,UAC5E,6CAAC,SAAI,WAAU,mEACb;AAAA,yDAAC,UAAM;AAAA,yBAAW,eAAe;AAAA,cAAE;AAAA,eAAM;AAAA,YACxC,WAAW,cACV,4CAAC,UAAK,WAAU,mCACb,gDAAmB,WAAW,UAAU,GAC3C;AAAA,aAEJ;AAAA,WACF;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;AAEO,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA,qBAAqB;AACvB,GAAkC;AAChC,SACE,4CAAC,mCACC,uDAAC,SAAI,WAAU,aACb;AAAA,iDAAC,SAAI,WAAU,qCACb;AAAA,mDAAC,SACC;AAAA,oDAAC,OAAE,WAAU,iBAAgB,iBAAG;AAAA,QAChC,6CAAC,SAAI,WAAU,kCACb;AAAA,sDAAC,8BAAO,WAAU,2BAA0B;AAAA,UAC5C,4CAAC,QAAG,WAAU,qBAAoB,yBAAW;AAAA,WAC/C;AAAA,SACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,WAAU;AAAA,UACX;AAAA;AAAA,YACU,4CAAC,kCAAW,WAAU,eAAc;AAAA;AAAA;AAAA,MAC/C;AAAA,OACF;AAAA,IACA,4CAAC,SAAI,WAAU,mFACb,sDAAC,SAAI,WAAU,yBACZ,sBACG,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,MAAM,4CAAC,4BAA4B,CAAG,CAAE,IAC1E,YAAY,IAAI,CAAC,QACf,4CAAC,kBAAyC,YAAY,KAAK,MAAM,QAAQ,GAAG,KAAvD,IAAI,eAAsD,CAChF,GACP,GACF;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/components/discover-collections-strip.d.cts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ApiCollection } from '@medialane/sdk';
+
+interface DiscoverCollectionsStripProps {
+    collections: ApiCollection[];
+    isLoading: boolean;
+    getHref: (collection: ApiCollection) => string;
+    allCollectionsHref?: string;
+}
+declare function DiscoverCollectionsStrip({ collections, isLoading, getHref, allCollectionsHref, }: DiscoverCollectionsStripProps): react_jsx_runtime.JSX.Element;
+
+export { DiscoverCollectionsStrip, type DiscoverCollectionsStripProps };

package/dist/components/discover-collections-strip.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ApiCollection } from '@medialane/sdk';
+
+interface DiscoverCollectionsStripProps {
+    collections: ApiCollection[];
+    isLoading: boolean;
+    getHref: (collection: ApiCollection) => string;
+    allCollectionsHref?: string;
+}
+declare function DiscoverCollectionsStrip({ collections, isLoading, getHref, allCollectionsHref, }: DiscoverCollectionsStripProps): react_jsx_runtime.JSX.Element;
+
+export { DiscoverCollectionsStrip, type DiscoverCollectionsStripProps };

package/dist/components/discover-collections-strip.js

@@ -0,0 +1,87 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Layers, ArrowRight } from "lucide-react";
+import { FadeIn } from "./motion-primitives.js";
+import { ipfsToHttp } from "../utils/ipfs.js";
+import { formatDisplayPrice } from "../utils/format.js";
+function CollectionChipSkeleton() {
+  return /* @__PURE__ */ jsxs("div", { className: "shrink-0 w-80 rounded-xl border border-border overflow-hidden", children: [
+    /* @__PURE__ */ jsx("div", { className: "aspect-square w-full bg-muted animate-pulse" }),
+    /* @__PURE__ */ jsxs("div", { className: "p-3 space-y-1.5", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-3.5 w-28 bg-muted animate-pulse rounded" }),
+      /* @__PURE__ */ jsx("div", { className: "h-3 w-16 bg-muted animate-pulse rounded" })
+    ] })
+  ] });
+}
+function CollectionChip({
+  collection,
+  href
+}) {
+  const [imgError, setImgError] = useState(false);
+  const image = collection.image && !imgError ? ipfsToHttp(collection.image) : null;
+  const initial = (collection.name ?? "?").charAt(0).toUpperCase();
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href,
+      className: "block shrink-0 w-80 snap-start active:scale-[0.97] transition-transform duration-150",
+      children: /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-border overflow-hidden group bg-card hover:border-border/80 transition-colors", children: [
+        /* @__PURE__ */ jsx("div", { className: "aspect-square bg-muted relative overflow-hidden", children: image ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: image,
+            alt: collection.name ?? "",
+            loading: "lazy",
+            className: "w-full h-full object-cover group-hover:scale-105 transition-transform duration-500",
+            onError: () => setImgError(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-5xl font-black text-white/10 select-none", children: initial }) }) }),
+        /* @__PURE__ */ jsxs("div", { className: "p-3 space-y-0.5", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold truncate", children: collection.name ?? "Unnamed" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs("span", { children: [
+              collection.totalSupply ?? 0,
+              " items"
+            ] }),
+            collection.floorPrice && /* @__PURE__ */ jsx("span", { className: "font-semibold text-brand-orange", children: formatDisplayPrice(collection.floorPrice) })
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+function DiscoverCollectionsStrip({
+  collections,
+  isLoading,
+  getHref,
+  allCollectionsHref = "/collections"
+}) {
+  return /* @__PURE__ */ jsx(FadeIn, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "section-label", children: "NFT" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-0.5", children: [
+          /* @__PURE__ */ jsx(Layers, { className: "h-4 w-4 text-brand-blue" }),
+          /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold", children: "Collections" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: allCollectionsHref,
+          className: "inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground px-3 py-1.5 rounded-md hover:bg-accent transition-colors",
+          children: [
+            "View all ",
+            /* @__PURE__ */ jsx(ArrowRight, { className: "h-3.5 w-3.5" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "overflow-x-auto scrollbar-hide snap-x snap-mandatory -mx-4 px-4 md:mx-0 md:px-0", children: /* @__PURE__ */ jsx("div", { className: "flex gap-3 w-max pb-1", children: isLoading ? Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsx(CollectionChipSkeleton, {}, i)) : collections.map((col) => /* @__PURE__ */ jsx(CollectionChip, { collection: col, href: getHref(col) }, col.contractAddress)) }) })
+  ] }) });
+}
+export {
+  DiscoverCollectionsStrip
+};
+//# sourceMappingURL=discover-collections-strip.js.map

package/dist/components/discover-collections-strip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/discover-collections-strip.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { Layers, ArrowRight } from \"lucide-react\";\nimport { FadeIn } from \"./motion-primitives.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport { formatDisplayPrice } from \"../utils/format.js\";\nimport type { ApiCollection } from \"@medialane/sdk\";\n\nexport interface DiscoverCollectionsStripProps {\n  collections: ApiCollection[];\n  isLoading: boolean;\n  getHref: (collection: ApiCollection) => string;\n  allCollectionsHref?: string;\n}\n\nfunction CollectionChipSkeleton() {\n  return (\n    <div className=\"shrink-0 w-80 rounded-xl border border-border overflow-hidden\">\n      <div className=\"aspect-square w-full bg-muted animate-pulse\" />\n      <div className=\"p-3 space-y-1.5\">\n        <div className=\"h-3.5 w-28 bg-muted animate-pulse rounded\" />\n        <div className=\"h-3 w-16 bg-muted animate-pulse rounded\" />\n      </div>\n    </div>\n  );\n}\n\nfunction CollectionChip({\n  collection,\n  href,\n}: {\n  collection: ApiCollection;\n  href: string;\n}) {\n  const [imgError, setImgError] = useState(false);\n  const image = collection.image && !imgError ? ipfsToHttp(collection.image) : null;\n  const initial = (collection.name ?? \"?\").charAt(0).toUpperCase();\n\n  return (\n    <a\n      href={href}\n      className=\"block shrink-0 w-80 snap-start active:scale-[0.97] transition-transform duration-150\"\n    >\n      <div className=\"rounded-xl border border-border overflow-hidden group bg-card hover:border-border/80 transition-colors\">\n        <div className=\"aspect-square bg-muted relative overflow-hidden\">\n          {image ? (\n            <img\n              src={image}\n              alt={collection.name ?? \"\"}\n              loading=\"lazy\"\n              className=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-500\"\n              onError={() => setImgError(true)}\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-5xl font-black text-white/10 select-none\">{initial}</span>\n            </div>\n          )}\n        </div>\n        <div className=\"p-3 space-y-0.5\">\n          <p className=\"text-sm font-semibold truncate\">{collection.name ?? \"Unnamed\"}</p>\n          <div className=\"flex items-center justify-between text-xs text-muted-foreground\">\n            <span>{collection.totalSupply ?? 0} items</span>\n            {collection.floorPrice && (\n              <span className=\"font-semibold text-brand-orange\">\n                {formatDisplayPrice(collection.floorPrice)}\n              </span>\n            )}\n          </div>\n        </div>\n      </div>\n    </a>\n  );\n}\n\nexport function DiscoverCollectionsStrip({\n  collections,\n  isLoading,\n  getHref,\n  allCollectionsHref = \"/collections\",\n}: DiscoverCollectionsStripProps) {\n  return (\n    <FadeIn>\n      <div className=\"space-y-3\">\n        <div className=\"flex items-center justify-between\">\n          <div>\n            <p className=\"section-label\">NFT</p>\n            <div className=\"flex items-center gap-2 mt-0.5\">\n              <Layers className=\"h-4 w-4 text-brand-blue\" />\n              <h2 className=\"text-lg font-bold\">Collections</h2>\n            </div>\n          </div>\n          <a\n            href={allCollectionsHref}\n            className=\"inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground px-3 py-1.5 rounded-md hover:bg-accent transition-colors\"\n          >\n            View all <ArrowRight className=\"h-3.5 w-3.5\" />\n          </a>\n        </div>\n        <div className=\"overflow-x-auto scrollbar-hide snap-x snap-mandatory -mx-4 px-4 md:mx-0 md:px-0\">\n          <div className=\"flex gap-3 w-max pb-1\">\n            {isLoading\n              ? Array.from({ length: 6 }).map((_, i) => <CollectionChipSkeleton key={i} />)\n              : collections.map((col) => (\n                  <CollectionChip key={col.contractAddress} collection={col} href={getHref(col)} />\n                ))}\n          </div>\n        </div>\n      </div>\n    </FadeIn>\n  );\n}\n"],"mappings":";AAmBM,cACA,YADA;AAjBN,SAAS,gBAAgB;AACzB,SAAS,QAAQ,kBAAkB;AACnC,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,0BAA0B;AAUnC,SAAS,yBAAyB;AAChC,SACE,qBAAC,SAAI,WAAU,iEACb;AAAA,wBAAC,SAAI,WAAU,+CAA8C;AAAA,IAC7D,qBAAC,SAAI,WAAU,mBACb;AAAA,0BAAC,SAAI,WAAU,6CAA4C;AAAA,MAC3D,oBAAC,SAAI,WAAU,2CAA0C;AAAA,OAC3D;AAAA,KACF;AAEJ;AAEA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AACF,GAGG;AACD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,QAAQ,WAAW,SAAS,CAAC,WAAW,WAAW,WAAW,KAAK,IAAI;AAC7E,QAAM,WAAW,WAAW,QAAQ,KAAK,OAAO,CAAC,EAAE,YAAY;AAE/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAU;AAAA,MAEV,+BAAC,SAAI,WAAU,0GACb;AAAA,4BAAC,SAAI,WAAU,mDACZ,kBACC;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,KAAK,WAAW,QAAQ;AAAA,YACxB,SAAQ;AAAA,YACR,WAAU;AAAA,YACV,SAAS,MAAM,YAAY,IAAI;AAAA;AAAA,QACjC,IAEA,oBAAC,SAAI,WAAU,+HACb,8BAAC,UAAK,WAAU,iDAAiD,mBAAQ,GAC3E,GAEJ;AAAA,QACA,qBAAC,SAAI,WAAU,mBACb;AAAA,8BAAC,OAAE,WAAU,kCAAkC,qBAAW,QAAQ,WAAU;AAAA,UAC5E,qBAAC,SAAI,WAAU,mEACb;AAAA,iCAAC,UAAM;AAAA,yBAAW,eAAe;AAAA,cAAE;AAAA,eAAM;AAAA,YACxC,WAAW,cACV,oBAAC,UAAK,WAAU,mCACb,6BAAmB,WAAW,UAAU,GAC3C;AAAA,aAEJ;AAAA,WACF;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;AAEO,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA,qBAAqB;AACvB,GAAkC;AAChC,SACE,oBAAC,UACC,+BAAC,SAAI,WAAU,aACb;AAAA,yBAAC,SAAI,WAAU,qCACb;AAAA,2BAAC,SACC;AAAA,4BAAC,OAAE,WAAU,iBAAgB,iBAAG;AAAA,QAChC,qBAAC,SAAI,WAAU,kCACb;AAAA,8BAAC,UAAO,WAAU,2BAA0B;AAAA,UAC5C,oBAAC,QAAG,WAAU,qBAAoB,yBAAW;AAAA,WAC/C;AAAA,SACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,WAAU;AAAA,UACX;AAAA;AAAA,YACU,oBAAC,cAAW,WAAU,eAAc;AAAA;AAAA;AAAA,MAC/C;AAAA,OACF;AAAA,IACA,oBAAC,SAAI,WAAU,mFACb,8BAAC,SAAI,WAAU,yBACZ,sBACG,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,MAAM,oBAAC,4BAA4B,CAAG,CAAE,IAC1E,YAAY,IAAI,CAAC,QACf,oBAAC,kBAAyC,YAAY,KAAK,MAAM,QAAQ,GAAG,KAAvD,IAAI,eAAsD,CAChF,GACP,GACF;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/components/discover-creators-strip.cjs

@@ -0,0 +1,131 @@
+"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 discover_creators_strip_exports = {};
+__export(discover_creators_strip_exports, {
+  DiscoverCreatorsStrip: () => DiscoverCreatorsStrip
+});
+module.exports = __toCommonJS(discover_creators_strip_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_lucide_react = require("lucide-react");
+var import_motion_primitives = require("./motion-primitives.js");
+var import_ipfs = require("../utils/ipfs.js");
+function hslGradient(seed) {
+  const hue = seed.split("").reduce((acc, c) => acc + c.charCodeAt(0), 0) % 360;
+  const hue2 = (hue + 60) % 360;
+  return `linear-gradient(135deg, hsl(${hue},55%,35%), hsl(${hue2},50%,22%))`;
+}
+function CreatorChipSkeleton() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "shrink-0 w-64 aspect-[3/4] rounded-xl bg-muted animate-pulse" });
+}
+function CreatorChip({
+  creator,
+  href
+}) {
+  const [avatarError, setAvatarError] = (0, import_react.useState)(false);
+  const [bannerError, setBannerError] = (0, import_react.useState)(false);
+  const avatarUrl = creator.avatarImage && !avatarError ? (0, import_ipfs.ipfsToHttp)(creator.avatarImage) : null;
+  const bannerUrl = creator.bannerImage && !bannerError ? (0, import_ipfs.ipfsToHttp)(creator.bannerImage) : null;
+  const displayName = creator.displayName || `@${creator.username}`;
+  const gradient = hslGradient(creator.username ?? "a");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "a",
+    {
+      href,
+      className: "block shrink-0 w-64 snap-start active:scale-[0.97] transition-transform duration-150 select-none",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative aspect-[3/4] rounded-xl overflow-hidden", children: [
+        bannerUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "img",
+          {
+            src: bannerUrl,
+            alt: "",
+            "aria-hidden": true,
+            loading: "lazy",
+            className: "absolute inset-0 w-full h-full object-cover",
+            onError: () => setBannerError(true)
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0", style: { background: gradient } }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-black/10 to-transparent" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "absolute bottom-0 inset-x-0 p-2.5 space-y-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: "h-8 w-8 rounded-full ring-2 ring-white/20 overflow-hidden flex items-center justify-center",
+              style: !avatarUrl ? { background: gradient } : {},
+              children: avatarUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "img",
+                {
+                  src: avatarUrl,
+                  alt: displayName ?? "",
+                  loading: "lazy",
+                  className: "h-full w-full object-cover",
+                  onError: () => setAvatarError(true)
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xs font-black text-white", children: (displayName ?? "?").charAt(0).toUpperCase() })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "font-bold text-white text-xs truncate", children: displayName }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-[10px] text-white/55 flex items-center gap-0.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.AtSign, { className: "h-2 w-2 shrink-0" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate", children: creator.username })
+            ] })
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+function DiscoverCreatorsStrip({
+  creators,
+  isLoading,
+  getHref,
+  allCreatorsHref = "/creators"
+}) {
+  if (!isLoading && creators.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_motion_primitives.FadeIn, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "section-label", children: "Creator network" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2 mt-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Users, { className: "h-4 w-4 text-brand-purple" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-lg font-bold", children: "Creators" })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "a",
+        {
+          href: allCreatorsHref,
+          className: "inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground px-3 py-1.5 rounded-md hover:bg-accent transition-colors",
+          children: [
+            "View all ",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowRight, { className: "h-3.5 w-3.5" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "overflow-x-auto scrollbar-hide snap-x snap-mandatory -mx-4 px-4 md:mx-0 md:px-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex gap-3 w-max pb-1", children: isLoading ? Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CreatorChipSkeleton, {}, i)) : creators.map((c) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CreatorChip, { creator: c, href: getHref(c) }, c.walletAddress)) }) })
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DiscoverCreatorsStrip
+});
+//# sourceMappingURL=discover-creators-strip.cjs.map

package/dist/components/discover-creators-strip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/discover-creators-strip.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { Users, ArrowRight, AtSign } from \"lucide-react\";\nimport { FadeIn } from \"./motion-primitives.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport type { ApiCreatorProfile } from \"@medialane/sdk\";\n\nexport interface DiscoverCreatorsStripProps {\n  creators: ApiCreatorProfile[];\n  isLoading: boolean;\n  getHref: (creator: ApiCreatorProfile) => string;\n  allCreatorsHref?: string;\n}\n\nfunction hslGradient(seed: string) {\n  const hue = seed.split(\"\").reduce((acc, c) => acc + c.charCodeAt(0), 0) % 360;\n  const hue2 = (hue + 60) % 360;\n  return `linear-gradient(135deg, hsl(${hue},55%,35%), hsl(${hue2},50%,22%))`;\n}\n\nfunction CreatorChipSkeleton() {\n  return (\n    <div className=\"shrink-0 w-64 aspect-[3/4] rounded-xl bg-muted animate-pulse\" />\n  );\n}\n\nfunction CreatorChip({\n  creator,\n  href,\n}: {\n  creator: ApiCreatorProfile;\n  href: string;\n}) {\n  const [avatarError, setAvatarError] = useState(false);\n  const [bannerError, setBannerError] = useState(false);\n\n  const avatarUrl = creator.avatarImage && !avatarError ? ipfsToHttp(creator.avatarImage) : null;\n  const bannerUrl = creator.bannerImage && !bannerError ? ipfsToHttp(creator.bannerImage) : null;\n  const displayName = creator.displayName || `@${creator.username}`;\n  const gradient = hslGradient(creator.username ?? \"a\");\n\n  return (\n    <a\n      href={href}\n      className=\"block shrink-0 w-64 snap-start active:scale-[0.97] transition-transform duration-150 select-none\"\n    >\n      <div className=\"relative aspect-[3/4] rounded-xl overflow-hidden\">\n        {bannerUrl ? (\n          <img\n            src={bannerUrl}\n            alt=\"\"\n            aria-hidden\n            loading=\"lazy\"\n            className=\"absolute inset-0 w-full h-full object-cover\"\n            onError={() => setBannerError(true)}\n          />\n        ) : (\n          <div className=\"absolute inset-0\" style={{ background: gradient }} />\n        )}\n        <div className=\"absolute inset-0 bg-gradient-to-t from-black/80 via-black/10 to-transparent\" />\n        <div className=\"absolute bottom-0 inset-x-0 p-2.5 space-y-1.5\">\n          <div\n            className=\"h-8 w-8 rounded-full ring-2 ring-white/20 overflow-hidden flex items-center justify-center\"\n            style={!avatarUrl ? { background: gradient } : {}}\n          >\n            {avatarUrl ? (\n              <img\n                src={avatarUrl}\n                alt={displayName ?? \"\"}\n                loading=\"lazy\"\n                className=\"h-full w-full object-cover\"\n                onError={() => setAvatarError(true)}\n              />\n            ) : (\n              <span className=\"text-xs font-black text-white\">\n                {(displayName ?? \"?\").charAt(0).toUpperCase()}\n              </span>\n            )}\n          </div>\n          <div>\n            <p className=\"font-bold text-white text-xs truncate\">{displayName}</p>\n            <p className=\"text-[10px] text-white/55 flex items-center gap-0.5\">\n              <AtSign className=\"h-2 w-2 shrink-0\" />\n              <span className=\"truncate\">{creator.username}</span>\n            </p>\n          </div>\n        </div>\n      </div>\n    </a>\n  );\n}\n\nexport function DiscoverCreatorsStrip({\n  creators,\n  isLoading,\n  getHref,\n  allCreatorsHref = \"/creators\",\n}: DiscoverCreatorsStripProps) {\n  if (!isLoading && creators.length === 0) return null;\n\n  return (\n    <FadeIn>\n      <div className=\"space-y-3\">\n        <div className=\"flex items-center justify-between\">\n          <div>\n            <p className=\"section-label\">Creator network</p>\n            <div className=\"flex items-center gap-2 mt-0.5\">\n              <Users className=\"h-4 w-4 text-brand-purple\" />\n              <h2 className=\"text-lg font-bold\">Creators</h2>\n            </div>\n          </div>\n          <a\n            href={allCreatorsHref}\n            className=\"inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground px-3 py-1.5 rounded-md hover:bg-accent transition-colors\"\n          >\n            View all <ArrowRight className=\"h-3.5 w-3.5\" />\n          </a>\n        </div>\n        <div className=\"overflow-x-auto scrollbar-hide snap-x snap-mandatory -mx-4 px-4 md:mx-0 md:px-0\">\n          <div className=\"flex gap-3 w-max pb-1\">\n            {isLoading\n              ? Array.from({ length: 6 }).map((_, i) => <CreatorChipSkeleton key={i} />)\n              : creators.map((c) => (\n                  <CreatorChip key={c.walletAddress} creator={c} href={getHref(c)} />\n                ))}\n          </div>\n        </div>\n      </div>\n    </FadeIn>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBI;AArBJ,mBAAyB;AACzB,0BAA0C;AAC1C,+BAAuB;AACvB,kBAA2B;AAU3B,SAAS,YAAY,MAAc;AACjC,QAAM,MAAM,KAAK,MAAM,EAAE,EAAE,OAAO,CAAC,KAAK,MAAM,MAAM,EAAE,WAAW,CAAC,GAAG,CAAC,IAAI;AAC1E,QAAM,QAAQ,MAAM,MAAM;AAC1B,SAAO,+BAA+B,GAAG,kBAAkB,IAAI;AACjE;AAEA,SAAS,sBAAsB;AAC7B,SACE,4CAAC,SAAI,WAAU,gEAA+D;AAElF;AAEA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AACF,GAGG;AACD,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AACpD,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AAEpD,QAAM,YAAY,QAAQ,eAAe,CAAC,kBAAc,wBAAW,QAAQ,WAAW,IAAI;AAC1F,QAAM,YAAY,QAAQ,eAAe,CAAC,kBAAc,wBAAW,QAAQ,WAAW,IAAI;AAC1F,QAAM,cAAc,QAAQ,eAAe,IAAI,QAAQ,QAAQ;AAC/D,QAAM,WAAW,YAAY,QAAQ,YAAY,GAAG;AAEpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAU;AAAA,MAEV,uDAAC,SAAI,WAAU,oDACZ;AAAA,oBACC;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,KAAI;AAAA,YACJ,eAAW;AAAA,YACX,SAAQ;AAAA,YACR,WAAU;AAAA,YACV,SAAS,MAAM,eAAe,IAAI;AAAA;AAAA,QACpC,IAEA,4CAAC,SAAI,WAAU,oBAAmB,OAAO,EAAE,YAAY,SAAS,GAAG;AAAA,QAErE,4CAAC,SAAI,WAAU,+EAA8E;AAAA,QAC7F,6CAAC,SAAI,WAAU,iDACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,CAAC,YAAY,EAAE,YAAY,SAAS,IAAI,CAAC;AAAA,cAE/C,sBACC;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAK;AAAA,kBACL,KAAK,eAAe;AAAA,kBACpB,SAAQ;AAAA,kBACR,WAAU;AAAA,kBACV,SAAS,MAAM,eAAe,IAAI;AAAA;AAAA,cACpC,IAEA,4CAAC,UAAK,WAAU,iCACZ,0BAAe,KAAK,OAAO,CAAC,EAAE,YAAY,GAC9C;AAAA;AAAA,UAEJ;AAAA,UACA,6CAAC,SACC;AAAA,wDAAC,OAAE,WAAU,yCAAyC,uBAAY;AAAA,YAClE,6CAAC,OAAE,WAAU,uDACX;AAAA,0DAAC,8BAAO,WAAU,oBAAmB;AAAA,cACrC,4CAAC,UAAK,WAAU,YAAY,kBAAQ,UAAS;AAAA,eAC/C;AAAA,aACF;AAAA,WACF;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;AAEO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AACpB,GAA+B;AAC7B,MAAI,CAAC,aAAa,SAAS,WAAW,EAAG,QAAO;AAEhD,SACE,4CAAC,mCACC,uDAAC,SAAI,WAAU,aACb;AAAA,iDAAC,SAAI,WAAU,qCACb;AAAA,mDAAC,SACC;AAAA,oDAAC,OAAE,WAAU,iBAAgB,6BAAe;AAAA,QAC5C,6CAAC,SAAI,WAAU,kCACb;AAAA,sDAAC,6BAAM,WAAU,6BAA4B;AAAA,UAC7C,4CAAC,QAAG,WAAU,qBAAoB,sBAAQ;AAAA,WAC5C;AAAA,SACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,WAAU;AAAA,UACX;AAAA;AAAA,YACU,4CAAC,kCAAW,WAAU,eAAc;AAAA;AAAA;AAAA,MAC/C;AAAA,OACF;AAAA,IACA,4CAAC,SAAI,WAAU,mFACb,sDAAC,SAAI,WAAU,yBACZ,sBACG,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,MAAM,4CAAC,yBAAyB,CAAG,CAAE,IACvE,SAAS,IAAI,CAAC,MACZ,4CAAC,eAAkC,SAAS,GAAG,MAAM,QAAQ,CAAC,KAA5C,EAAE,aAA6C,CAClE,GACP,GACF;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/components/discover-creators-strip.d.cts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ApiCreatorProfile } from '@medialane/sdk';
+
+interface DiscoverCreatorsStripProps {
+    creators: ApiCreatorProfile[];
+    isLoading: boolean;
+    getHref: (creator: ApiCreatorProfile) => string;
+    allCreatorsHref?: string;
+}
+declare function DiscoverCreatorsStrip({ creators, isLoading, getHref, allCreatorsHref, }: DiscoverCreatorsStripProps): react_jsx_runtime.JSX.Element | null;
+
+export { DiscoverCreatorsStrip, type DiscoverCreatorsStripProps };

package/dist/components/discover-creators-strip.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ApiCreatorProfile } from '@medialane/sdk';
+
+interface DiscoverCreatorsStripProps {
+    creators: ApiCreatorProfile[];
+    isLoading: boolean;
+    getHref: (creator: ApiCreatorProfile) => string;
+    allCreatorsHref?: string;
+}
+declare function DiscoverCreatorsStrip({ creators, isLoading, getHref, allCreatorsHref, }: DiscoverCreatorsStripProps): react_jsx_runtime.JSX.Element | null;
+
+export { DiscoverCreatorsStrip, type DiscoverCreatorsStripProps };

package/dist/components/discover-creators-strip.js

@@ -0,0 +1,107 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Users, ArrowRight, AtSign } from "lucide-react";
+import { FadeIn } from "./motion-primitives.js";
+import { ipfsToHttp } from "../utils/ipfs.js";
+function hslGradient(seed) {
+  const hue = seed.split("").reduce((acc, c) => acc + c.charCodeAt(0), 0) % 360;
+  const hue2 = (hue + 60) % 360;
+  return `linear-gradient(135deg, hsl(${hue},55%,35%), hsl(${hue2},50%,22%))`;
+}
+function CreatorChipSkeleton() {
+  return /* @__PURE__ */ jsx("div", { className: "shrink-0 w-64 aspect-[3/4] rounded-xl bg-muted animate-pulse" });
+}
+function CreatorChip({
+  creator,
+  href
+}) {
+  const [avatarError, setAvatarError] = useState(false);
+  const [bannerError, setBannerError] = useState(false);
+  const avatarUrl = creator.avatarImage && !avatarError ? ipfsToHttp(creator.avatarImage) : null;
+  const bannerUrl = creator.bannerImage && !bannerError ? ipfsToHttp(creator.bannerImage) : null;
+  const displayName = creator.displayName || `@${creator.username}`;
+  const gradient = hslGradient(creator.username ?? "a");
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href,
+      className: "block shrink-0 w-64 snap-start active:scale-[0.97] transition-transform duration-150 select-none",
+      children: /* @__PURE__ */ jsxs("div", { className: "relative aspect-[3/4] rounded-xl overflow-hidden", children: [
+        bannerUrl ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: bannerUrl,
+            alt: "",
+            "aria-hidden": true,
+            loading: "lazy",
+            className: "absolute inset-0 w-full h-full object-cover",
+            onError: () => setBannerError(true)
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: "absolute inset-0", style: { background: gradient } }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-black/10 to-transparent" }),
+        /* @__PURE__ */ jsxs("div", { className: "absolute bottom-0 inset-x-0 p-2.5 space-y-1.5", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "h-8 w-8 rounded-full ring-2 ring-white/20 overflow-hidden flex items-center justify-center",
+              style: !avatarUrl ? { background: gradient } : {},
+              children: avatarUrl ? /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: avatarUrl,
+                  alt: displayName ?? "",
+                  loading: "lazy",
+                  className: "h-full w-full object-cover",
+                  onError: () => setAvatarError(true)
+                }
+              ) : /* @__PURE__ */ jsx("span", { className: "text-xs font-black text-white", children: (displayName ?? "?").charAt(0).toUpperCase() })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("p", { className: "font-bold text-white text-xs truncate", children: displayName }),
+            /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-white/55 flex items-center gap-0.5", children: [
+              /* @__PURE__ */ jsx(AtSign, { className: "h-2 w-2 shrink-0" }),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: creator.username })
+            ] })
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+function DiscoverCreatorsStrip({
+  creators,
+  isLoading,
+  getHref,
+  allCreatorsHref = "/creators"
+}) {
+  if (!isLoading && creators.length === 0) return null;
+  return /* @__PURE__ */ jsx(FadeIn, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "section-label", children: "Creator network" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-0.5", children: [
+          /* @__PURE__ */ jsx(Users, { className: "h-4 w-4 text-brand-purple" }),
+          /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold", children: "Creators" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: allCreatorsHref,
+          className: "inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground px-3 py-1.5 rounded-md hover:bg-accent transition-colors",
+          children: [
+            "View all ",
+            /* @__PURE__ */ jsx(ArrowRight, { className: "h-3.5 w-3.5" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "overflow-x-auto scrollbar-hide snap-x snap-mandatory -mx-4 px-4 md:mx-0 md:px-0", children: /* @__PURE__ */ jsx("div", { className: "flex gap-3 w-max pb-1", children: isLoading ? Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsx(CreatorChipSkeleton, {}, i)) : creators.map((c) => /* @__PURE__ */ jsx(CreatorChip, { creator: c, href: getHref(c) }, c.walletAddress)) }) })
+  ] }) });
+}
+export {
+  DiscoverCreatorsStrip
+};
+//# sourceMappingURL=discover-creators-strip.js.map

package/dist/components/discover-creators-strip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/discover-creators-strip.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { Users, ArrowRight, AtSign } from \"lucide-react\";\nimport { FadeIn } from \"./motion-primitives.js\";\nimport { ipfsToHttp } from \"../utils/ipfs.js\";\nimport type { ApiCreatorProfile } from \"@medialane/sdk\";\n\nexport interface DiscoverCreatorsStripProps {\n  creators: ApiCreatorProfile[];\n  isLoading: boolean;\n  getHref: (creator: ApiCreatorProfile) => string;\n  allCreatorsHref?: string;\n}\n\nfunction hslGradient(seed: string) {\n  const hue = seed.split(\"\").reduce((acc, c) => acc + c.charCodeAt(0), 0) % 360;\n  const hue2 = (hue + 60) % 360;\n  return `linear-gradient(135deg, hsl(${hue},55%,35%), hsl(${hue2},50%,22%))`;\n}\n\nfunction CreatorChipSkeleton() {\n  return (\n    <div className=\"shrink-0 w-64 aspect-[3/4] rounded-xl bg-muted animate-pulse\" />\n  );\n}\n\nfunction CreatorChip({\n  creator,\n  href,\n}: {\n  creator: ApiCreatorProfile;\n  href: string;\n}) {\n  const [avatarError, setAvatarError] = useState(false);\n  const [bannerError, setBannerError] = useState(false);\n\n  const avatarUrl = creator.avatarImage && !avatarError ? ipfsToHttp(creator.avatarImage) : null;\n  const bannerUrl = creator.bannerImage && !bannerError ? ipfsToHttp(creator.bannerImage) : null;\n  const displayName = creator.displayName || `@${creator.username}`;\n  const gradient = hslGradient(creator.username ?? \"a\");\n\n  return (\n    <a\n      href={href}\n      className=\"block shrink-0 w-64 snap-start active:scale-[0.97] transition-transform duration-150 select-none\"\n    >\n      <div className=\"relative aspect-[3/4] rounded-xl overflow-hidden\">\n        {bannerUrl ? (\n          <img\n            src={bannerUrl}\n            alt=\"\"\n            aria-hidden\n            loading=\"lazy\"\n            className=\"absolute inset-0 w-full h-full object-cover\"\n            onError={() => setBannerError(true)}\n          />\n        ) : (\n          <div className=\"absolute inset-0\" style={{ background: gradient }} />\n        )}\n        <div className=\"absolute inset-0 bg-gradient-to-t from-black/80 via-black/10 to-transparent\" />\n        <div className=\"absolute bottom-0 inset-x-0 p-2.5 space-y-1.5\">\n          <div\n            className=\"h-8 w-8 rounded-full ring-2 ring-white/20 overflow-hidden flex items-center justify-center\"\n            style={!avatarUrl ? { background: gradient } : {}}\n          >\n            {avatarUrl ? (\n              <img\n                src={avatarUrl}\n                alt={displayName ?? \"\"}\n                loading=\"lazy\"\n                className=\"h-full w-full object-cover\"\n                onError={() => setAvatarError(true)}\n              />\n            ) : (\n              <span className=\"text-xs font-black text-white\">\n                {(displayName ?? \"?\").charAt(0).toUpperCase()}\n              </span>\n            )}\n          </div>\n          <div>\n            <p className=\"font-bold text-white text-xs truncate\">{displayName}</p>\n            <p className=\"text-[10px] text-white/55 flex items-center gap-0.5\">\n              <AtSign className=\"h-2 w-2 shrink-0\" />\n              <span className=\"truncate\">{creator.username}</span>\n            </p>\n          </div>\n        </div>\n      </div>\n    </a>\n  );\n}\n\nexport function DiscoverCreatorsStrip({\n  creators,\n  isLoading,\n  getHref,\n  allCreatorsHref = \"/creators\",\n}: DiscoverCreatorsStripProps) {\n  if (!isLoading && creators.length === 0) return null;\n\n  return (\n    <FadeIn>\n      <div className=\"space-y-3\">\n        <div className=\"flex items-center justify-between\">\n          <div>\n            <p className=\"section-label\">Creator network</p>\n            <div className=\"flex items-center gap-2 mt-0.5\">\n              <Users className=\"h-4 w-4 text-brand-purple\" />\n              <h2 className=\"text-lg font-bold\">Creators</h2>\n            </div>\n          </div>\n          <a\n            href={allCreatorsHref}\n            className=\"inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground px-3 py-1.5 rounded-md hover:bg-accent transition-colors\"\n          >\n            View all <ArrowRight className=\"h-3.5 w-3.5\" />\n          </a>\n        </div>\n        <div className=\"overflow-x-auto scrollbar-hide snap-x snap-mandatory -mx-4 px-4 md:mx-0 md:px-0\">\n          <div className=\"flex gap-3 w-max pb-1\">\n            {isLoading\n              ? Array.from({ length: 6 }).map((_, i) => <CreatorChipSkeleton key={i} />)\n              : creators.map((c) => (\n                  <CreatorChip key={c.walletAddress} creator={c} href={getHref(c)} />\n                ))}\n          </div>\n        </div>\n      </div>\n    </FadeIn>\n  );\n}\n"],"mappings":"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","names":[]}