@medialane/ui 0.36.0 → 0.37.0

package/dist/components/load-more-sentinel.cjs

@@ -0,0 +1,54 @@
+"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 load_more_sentinel_exports = {};
+__export(load_more_sentinel_exports, {
+  LoadMoreSentinel: () => LoadMoreSentinel
+});
+module.exports = __toCommonJS(load_more_sentinel_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+function LoadMoreSentinel({
+  hasMore,
+  isLoading,
+  onLoadMore,
+  rootMargin = "400px"
+}) {
+  const ref = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    if (!hasMore || isLoading) return;
+    const el = ref.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) onLoadMore();
+      },
+      { rootMargin }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [hasMore, isLoading, rootMargin, onLoadMore]);
+  if (!hasMore) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, "aria-hidden": true, className: "h-px w-full" });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LoadMoreSentinel
+});
+//# sourceMappingURL=load-more-sentinel.cjs.map

package/dist/components/load-more-sentinel.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/load-more-sentinel.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef } from \"react\";\n\nexport interface LoadMoreSentinelProps {\n  hasMore: boolean;\n  isLoading: boolean;\n  onLoadMore: () => void;\n  rootMargin?: string;\n}\n\n/**\n * Invisible trigger that calls `onLoadMore` when scrolled near the viewport.\n * Renders nothing once `hasMore` is false. Skips firing while `isLoading` is\n * true so callers can pass their existing \"currently fetching\" flag straight\n * through with no extra guard logic.\n */\nexport function LoadMoreSentinel({\n  hasMore,\n  isLoading,\n  onLoadMore,\n  rootMargin = \"400px\",\n}: LoadMoreSentinelProps) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!hasMore || isLoading) return;\n    const el = ref.current;\n    if (!el) return;\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) onLoadMore();\n      },\n      { rootMargin }\n    );\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [hasMore, isLoading, rootMargin, onLoadMore]);\n\n  if (!hasMore) return null;\n  return <div ref={ref} aria-hidden className=\"h-px w-full\" />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAyCS;AAvCT,mBAAkC;AAe3B,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACf,GAA0B;AACxB,QAAM,UAAM,qBAAuB,IAAI;AAEvC,8BAAU,MAAM;AACd,QAAI,CAAC,WAAW,UAAW;AAC3B,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,GAAI;AAET,UAAM,WAAW,IAAI;AAAA,MACnB,CAAC,CAAC,KAAK,MAAM;AACX,YAAI,MAAM,eAAgB,YAAW;AAAA,MACvC;AAAA,MACA,EAAE,WAAW;AAAA,IACf;AACA,aAAS,QAAQ,EAAE;AACnB,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,SAAS,WAAW,YAAY,UAAU,CAAC;AAE/C,MAAI,CAAC,QAAS,QAAO;AACrB,SAAO,4CAAC,SAAI,KAAU,eAAW,MAAC,WAAU,eAAc;AAC5D;","names":[]}

package/dist/components/load-more-sentinel.d.cts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface LoadMoreSentinelProps {
+    hasMore: boolean;
+    isLoading: boolean;
+    onLoadMore: () => void;
+    rootMargin?: string;
+}
+/**
+ * Invisible trigger that calls `onLoadMore` when scrolled near the viewport.
+ * Renders nothing once `hasMore` is false. Skips firing while `isLoading` is
+ * true so callers can pass their existing "currently fetching" flag straight
+ * through with no extra guard logic.
+ */
+declare function LoadMoreSentinel({ hasMore, isLoading, onLoadMore, rootMargin, }: LoadMoreSentinelProps): react_jsx_runtime.JSX.Element | null;
+
+export { LoadMoreSentinel, type LoadMoreSentinelProps };

package/dist/components/load-more-sentinel.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface LoadMoreSentinelProps {
+    hasMore: boolean;
+    isLoading: boolean;
+    onLoadMore: () => void;
+    rootMargin?: string;
+}
+/**
+ * Invisible trigger that calls `onLoadMore` when scrolled near the viewport.
+ * Renders nothing once `hasMore` is false. Skips firing while `isLoading` is
+ * true so callers can pass their existing "currently fetching" flag straight
+ * through with no extra guard logic.
+ */
+declare function LoadMoreSentinel({ hasMore, isLoading, onLoadMore, rootMargin, }: LoadMoreSentinelProps): react_jsx_runtime.JSX.Element | null;
+
+export { LoadMoreSentinel, type LoadMoreSentinelProps };

package/dist/components/load-more-sentinel.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+function LoadMoreSentinel({
+  hasMore,
+  isLoading,
+  onLoadMore,
+  rootMargin = "400px"
+}) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!hasMore || isLoading) return;
+    const el = ref.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) onLoadMore();
+      },
+      { rootMargin }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [hasMore, isLoading, rootMargin, onLoadMore]);
+  if (!hasMore) return null;
+  return /* @__PURE__ */ jsx("div", { ref, "aria-hidden": true, className: "h-px w-full" });
+}
+export {
+  LoadMoreSentinel
+};
+//# sourceMappingURL=load-more-sentinel.js.map

package/dist/components/load-more-sentinel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/load-more-sentinel.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef } from \"react\";\n\nexport interface LoadMoreSentinelProps {\n  hasMore: boolean;\n  isLoading: boolean;\n  onLoadMore: () => void;\n  rootMargin?: string;\n}\n\n/**\n * Invisible trigger that calls `onLoadMore` when scrolled near the viewport.\n * Renders nothing once `hasMore` is false. Skips firing while `isLoading` is\n * true so callers can pass their existing \"currently fetching\" flag straight\n * through with no extra guard logic.\n */\nexport function LoadMoreSentinel({\n  hasMore,\n  isLoading,\n  onLoadMore,\n  rootMargin = \"400px\",\n}: LoadMoreSentinelProps) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!hasMore || isLoading) return;\n    const el = ref.current;\n    if (!el) return;\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) onLoadMore();\n      },\n      { rootMargin }\n    );\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [hasMore, isLoading, rootMargin, onLoadMore]);\n\n  if (!hasMore) return null;\n  return <div ref={ref} aria-hidden className=\"h-px w-full\" />;\n}\n"],"mappings":";AAyCS;AAvCT,SAAS,WAAW,cAAc;AAe3B,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACf,GAA0B;AACxB,QAAM,MAAM,OAAuB,IAAI;AAEvC,YAAU,MAAM;AACd,QAAI,CAAC,WAAW,UAAW;AAC3B,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,GAAI;AAET,UAAM,WAAW,IAAI;AAAA,MACnB,CAAC,CAAC,KAAK,MAAM;AACX,YAAI,MAAM,eAAgB,YAAW;AAAA,MACvC;AAAA,MACA,EAAE,WAAW;AAAA,IACf;AACA,aAAS,QAAQ,EAAE;AACnB,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,SAAS,WAAW,YAAY,UAAU,CAAC;AAE/C,MAAI,CAAC,QAAS,QAAO;AACrB,SAAO,oBAAC,SAAI,KAAU,eAAW,MAAC,WAAU,eAAc;AAC5D;","names":[]}

package/dist/components/rewards/badge-shelf.cjs

@@ -0,0 +1,90 @@
+"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 badge_shelf_exports = {};
+__export(badge_shelf_exports, {
+  BadgeShelf: () => BadgeShelf
+});
+module.exports = __toCommonJS(badge_shelf_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"), 1);
+var import_cn = require("../../utils/cn.js");
+const iconCache = /* @__PURE__ */ new Map();
+function BadgeIcon({ name, color, className }) {
+  const [Icon, setIcon] = import_react.default.useState(
+    () => iconCache.get(name) ?? null
+  );
+  import_react.default.useEffect(() => {
+    if (iconCache.has(name)) {
+      setIcon(() => iconCache.get(name));
+      return;
+    }
+    import("lucide-react").then((mod) => {
+      const C = mod[name];
+      if (C) {
+        iconCache.set(name, C);
+        setIcon(() => C);
+      }
+    });
+  }, [name]);
+  if (!Icon) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_cn.cn)("rounded-full", className), style: { backgroundColor: color } });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { className, style: { color } });
+}
+function BadgeShelf({ badges, earnedKeys, showLocked = false, className }) {
+  const earned = earnedKeys ? new Set(earnedKeys) : null;
+  const visible = badges.filter((b) => showLocked || !earned || earned.has(b.key));
+  if (visible.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_cn.cn)("flex flex-wrap gap-2", className), children: visible.map((badge) => {
+    const isLocked = earned ? !earned.has(badge.key) : false;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        title: isLocked ? `${badge.description} \u2014 keep going to earn this` : badge.description,
+        className: (0, import_cn.cn)(
+          "flex h-7 select-none items-center gap-1.5 rounded-full border px-2.5",
+          isLocked && "opacity-45 grayscale"
+        ),
+        style: {
+          borderColor: `${badge.color}60`,
+          backgroundColor: `${badge.color}14`
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BadgeIcon, { name: badge.icon, color: badge.color, className: "h-3.5 w-3.5 shrink-0" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xs font-semibold", style: { color: badge.color }, children: badge.name })
+        ]
+      },
+      badge.key
+    );
+  }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BadgeShelf
+});
+//# sourceMappingURL=badge-shelf.cjs.map

package/dist/components/rewards/badge-shelf.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/rewards/badge-shelf.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport type { LucideProps } from \"lucide-react\";\nimport { cn } from \"../../utils/cn.js\";\n\nexport interface BadgeShelfBadge {\n  key: string;\n  name: string;\n  description: string;\n  icon: string;\n  color: string;\n  category: string;\n}\n\nexport interface BadgeShelfProps {\n  /** The badges to render — the earned set, or the full catalog with `earnedKeys`. */\n  badges: BadgeShelfBadge[];\n  /** When set, badges outside this set render locked (grayscale, reduced opacity). */\n  earnedKeys?: string[];\n  /** Render locked badges too (requires `earnedKeys`); default hides them. */\n  showLocked?: boolean;\n  className?: string;\n}\n\n// Lazily resolve lucide icons by name at runtime (icon names come from the API).\nconst iconCache = new Map<string, React.ComponentType<LucideProps>>();\n\nfunction BadgeIcon({ name, color, className }: { name: string; color: string; className?: string }) {\n  const [Icon, setIcon] = React.useState<React.ComponentType<LucideProps> | null>(\n    () => iconCache.get(name) ?? null\n  );\n\n  React.useEffect(() => {\n    if (iconCache.has(name)) {\n      setIcon(() => iconCache.get(name)!);\n      return;\n    }\n    import(\"lucide-react\").then((mod) => {\n      const C = (mod as Record<string, unknown>)[name] as React.ComponentType<LucideProps> | undefined;\n      if (C) {\n        iconCache.set(name, C);\n        setIcon(() => C);\n      }\n    });\n  }, [name]);\n\n  if (!Icon) return <span className={cn(\"rounded-full\", className)} style={{ backgroundColor: color }} />;\n  return <Icon className={className} style={{ color }} />;\n}\n\n/** Badge chips with native tooltips. Earned badges render in their color;\n *  locked ones (present in `badges` but not `earnedKeys`) render muted. */\nexport function BadgeShelf({ badges, earnedKeys, showLocked = false, className }: BadgeShelfProps) {\n  const earned = earnedKeys ? new Set(earnedKeys) : null;\n  const visible = badges.filter((b) => showLocked || !earned || earned.has(b.key));\n  if (visible.length === 0) return null;\n\n  return (\n    <div className={cn(\"flex flex-wrap gap-2\", className)}>\n      {visible.map((badge) => {\n        const isLocked = earned ? !earned.has(badge.key) : false;\n        return (\n          <div\n            key={badge.key}\n            title={isLocked ? `${badge.description} — keep going to earn this` : badge.description}\n            className={cn(\n              \"flex h-7 select-none items-center gap-1.5 rounded-full border px-2.5\",\n              isLocked && \"opacity-45 grayscale\"\n            )}\n            style={{\n              borderColor: `${badge.color}60`,\n              backgroundColor: `${badge.color}14`,\n            }}\n          >\n            <BadgeIcon name={badge.icon} color={badge.color} className=\"h-3.5 w-3.5 shrink-0\" />\n            <span className=\"text-xs font-semibold\" style={{ color: badge.color }}>\n              {badge.name}\n            </span>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+CoB;AA7CpB,mBAAkB;AAElB,gBAAmB;AAsBnB,MAAM,YAAY,oBAAI,IAA8C;AAEpE,SAAS,UAAU,EAAE,MAAM,OAAO,UAAU,GAAwD;AAClG,QAAM,CAAC,MAAM,OAAO,IAAI,aAAAA,QAAM;AAAA,IAC5B,MAAM,UAAU,IAAI,IAAI,KAAK;AAAA,EAC/B;AAEA,eAAAA,QAAM,UAAU,MAAM;AACpB,QAAI,UAAU,IAAI,IAAI,GAAG;AACvB,cAAQ,MAAM,UAAU,IAAI,IAAI,CAAE;AAClC;AAAA,IACF;AACA,WAAO,cAAc,EAAE,KAAK,CAAC,QAAQ;AACnC,YAAM,IAAK,IAAgC,IAAI;AAC/C,UAAI,GAAG;AACL,kBAAU,IAAI,MAAM,CAAC;AACrB,gBAAQ,MAAM,CAAC;AAAA,MACjB;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,IAAI,CAAC;AAET,MAAI,CAAC,KAAM,QAAO,4CAAC,UAAK,eAAW,cAAG,gBAAgB,SAAS,GAAG,OAAO,EAAE,iBAAiB,MAAM,GAAG;AACrG,SAAO,4CAAC,QAAK,WAAsB,OAAO,EAAE,MAAM,GAAG;AACvD;AAIO,SAAS,WAAW,EAAE,QAAQ,YAAY,aAAa,OAAO,UAAU,GAAoB;AACjG,QAAM,SAAS,aAAa,IAAI,IAAI,UAAU,IAAI;AAClD,QAAM,UAAU,OAAO,OAAO,CAAC,MAAM,cAAc,CAAC,UAAU,OAAO,IAAI,EAAE,GAAG,CAAC;AAC/E,MAAI,QAAQ,WAAW,EAAG,QAAO;AAEjC,SACE,4CAAC,SAAI,eAAW,cAAG,wBAAwB,SAAS,GACjD,kBAAQ,IAAI,CAAC,UAAU;AACtB,UAAM,WAAW,SAAS,CAAC,OAAO,IAAI,MAAM,GAAG,IAAI;AACnD,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,OAAO,WAAW,GAAG,MAAM,WAAW,oCAA+B,MAAM;AAAA,QAC3E,eAAW;AAAA,UACT;AAAA,UACA,YAAY;AAAA,QACd;AAAA,QACA,OAAO;AAAA,UACL,aAAa,GAAG,MAAM,KAAK;AAAA,UAC3B,iBAAiB,GAAG,MAAM,KAAK;AAAA,QACjC;AAAA,QAEA;AAAA,sDAAC,aAAU,MAAM,MAAM,MAAM,OAAO,MAAM,OAAO,WAAU,wBAAuB;AAAA,UAClF,4CAAC,UAAK,WAAU,yBAAwB,OAAO,EAAE,OAAO,MAAM,MAAM,GACjE,gBAAM,MACT;AAAA;AAAA;AAAA,MAdK,MAAM;AAAA,IAeb;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":["React"]}

package/dist/components/rewards/badge-shelf.d.cts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface BadgeShelfBadge {
+    key: string;
+    name: string;
+    description: string;
+    icon: string;
+    color: string;
+    category: string;
+}
+interface BadgeShelfProps {
+    /** The badges to render — the earned set, or the full catalog with `earnedKeys`. */
+    badges: BadgeShelfBadge[];
+    /** When set, badges outside this set render locked (grayscale, reduced opacity). */
+    earnedKeys?: string[];
+    /** Render locked badges too (requires `earnedKeys`); default hides them. */
+    showLocked?: boolean;
+    className?: string;
+}
+/** Badge chips with native tooltips. Earned badges render in their color;
+ *  locked ones (present in `badges` but not `earnedKeys`) render muted. */
+declare function BadgeShelf({ badges, earnedKeys, showLocked, className }: BadgeShelfProps): react_jsx_runtime.JSX.Element | null;
+
+export { BadgeShelf, type BadgeShelfBadge, type BadgeShelfProps };

package/dist/components/rewards/badge-shelf.d.ts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface BadgeShelfBadge {
+    key: string;
+    name: string;
+    description: string;
+    icon: string;
+    color: string;
+    category: string;
+}
+interface BadgeShelfProps {
+    /** The badges to render — the earned set, or the full catalog with `earnedKeys`. */
+    badges: BadgeShelfBadge[];
+    /** When set, badges outside this set render locked (grayscale, reduced opacity). */
+    earnedKeys?: string[];
+    /** Render locked badges too (requires `earnedKeys`); default hides them. */
+    showLocked?: boolean;
+    className?: string;
+}
+/** Badge chips with native tooltips. Earned badges render in their color;
+ *  locked ones (present in `badges` but not `earnedKeys`) render muted. */
+declare function BadgeShelf({ badges, earnedKeys, showLocked, className }: BadgeShelfProps): react_jsx_runtime.JSX.Element | null;
+
+export { BadgeShelf, type BadgeShelfBadge, type BadgeShelfProps };

package/dist/components/rewards/badge-shelf.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { cn } from "../../utils/cn.js";
+const iconCache = /* @__PURE__ */ new Map();
+function BadgeIcon({ name, color, className }) {
+  const [Icon, setIcon] = React.useState(
+    () => iconCache.get(name) ?? null
+  );
+  React.useEffect(() => {
+    if (iconCache.has(name)) {
+      setIcon(() => iconCache.get(name));
+      return;
+    }
+    import("lucide-react").then((mod) => {
+      const C = mod[name];
+      if (C) {
+        iconCache.set(name, C);
+        setIcon(() => C);
+      }
+    });
+  }, [name]);
+  if (!Icon) return /* @__PURE__ */ jsx("span", { className: cn("rounded-full", className), style: { backgroundColor: color } });
+  return /* @__PURE__ */ jsx(Icon, { className, style: { color } });
+}
+function BadgeShelf({ badges, earnedKeys, showLocked = false, className }) {
+  const earned = earnedKeys ? new Set(earnedKeys) : null;
+  const visible = badges.filter((b) => showLocked || !earned || earned.has(b.key));
+  if (visible.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-2", className), children: visible.map((badge) => {
+    const isLocked = earned ? !earned.has(badge.key) : false;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        title: isLocked ? `${badge.description} \u2014 keep going to earn this` : badge.description,
+        className: cn(
+          "flex h-7 select-none items-center gap-1.5 rounded-full border px-2.5",
+          isLocked && "opacity-45 grayscale"
+        ),
+        style: {
+          borderColor: `${badge.color}60`,
+          backgroundColor: `${badge.color}14`
+        },
+        children: [
+          /* @__PURE__ */ jsx(BadgeIcon, { name: badge.icon, color: badge.color, className: "h-3.5 w-3.5 shrink-0" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold", style: { color: badge.color }, children: badge.name })
+        ]
+      },
+      badge.key
+    );
+  }) });
+}
+export {
+  BadgeShelf
+};
+//# sourceMappingURL=badge-shelf.js.map

package/dist/components/rewards/badge-shelf.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/rewards/badge-shelf.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport type { LucideProps } from \"lucide-react\";\nimport { cn } from \"../../utils/cn.js\";\n\nexport interface BadgeShelfBadge {\n  key: string;\n  name: string;\n  description: string;\n  icon: string;\n  color: string;\n  category: string;\n}\n\nexport interface BadgeShelfProps {\n  /** The badges to render — the earned set, or the full catalog with `earnedKeys`. */\n  badges: BadgeShelfBadge[];\n  /** When set, badges outside this set render locked (grayscale, reduced opacity). */\n  earnedKeys?: string[];\n  /** Render locked badges too (requires `earnedKeys`); default hides them. */\n  showLocked?: boolean;\n  className?: string;\n}\n\n// Lazily resolve lucide icons by name at runtime (icon names come from the API).\nconst iconCache = new Map<string, React.ComponentType<LucideProps>>();\n\nfunction BadgeIcon({ name, color, className }: { name: string; color: string; className?: string }) {\n  const [Icon, setIcon] = React.useState<React.ComponentType<LucideProps> | null>(\n    () => iconCache.get(name) ?? null\n  );\n\n  React.useEffect(() => {\n    if (iconCache.has(name)) {\n      setIcon(() => iconCache.get(name)!);\n      return;\n    }\n    import(\"lucide-react\").then((mod) => {\n      const C = (mod as Record<string, unknown>)[name] as React.ComponentType<LucideProps> | undefined;\n      if (C) {\n        iconCache.set(name, C);\n        setIcon(() => C);\n      }\n    });\n  }, [name]);\n\n  if (!Icon) return <span className={cn(\"rounded-full\", className)} style={{ backgroundColor: color }} />;\n  return <Icon className={className} style={{ color }} />;\n}\n\n/** Badge chips with native tooltips. Earned badges render in their color;\n *  locked ones (present in `badges` but not `earnedKeys`) render muted. */\nexport function BadgeShelf({ badges, earnedKeys, showLocked = false, className }: BadgeShelfProps) {\n  const earned = earnedKeys ? new Set(earnedKeys) : null;\n  const visible = badges.filter((b) => showLocked || !earned || earned.has(b.key));\n  if (visible.length === 0) return null;\n\n  return (\n    <div className={cn(\"flex flex-wrap gap-2\", className)}>\n      {visible.map((badge) => {\n        const isLocked = earned ? !earned.has(badge.key) : false;\n        return (\n          <div\n            key={badge.key}\n            title={isLocked ? `${badge.description} — keep going to earn this` : badge.description}\n            className={cn(\n              \"flex h-7 select-none items-center gap-1.5 rounded-full border px-2.5\",\n              isLocked && \"opacity-45 grayscale\"\n            )}\n            style={{\n              borderColor: `${badge.color}60`,\n              backgroundColor: `${badge.color}14`,\n            }}\n          >\n            <BadgeIcon name={badge.icon} color={badge.color} className=\"h-3.5 w-3.5 shrink-0\" />\n            <span className=\"text-xs font-semibold\" style={{ color: badge.color }}>\n              {badge.name}\n            </span>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";AA+CoB,cAgBV,YAhBU;AA7CpB,OAAO,WAAW;AAElB,SAAS,UAAU;AAsBnB,MAAM,YAAY,oBAAI,IAA8C;AAEpE,SAAS,UAAU,EAAE,MAAM,OAAO,UAAU,GAAwD;AAClG,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM;AAAA,IAC5B,MAAM,UAAU,IAAI,IAAI,KAAK;AAAA,EAC/B;AAEA,QAAM,UAAU,MAAM;AACpB,QAAI,UAAU,IAAI,IAAI,GAAG;AACvB,cAAQ,MAAM,UAAU,IAAI,IAAI,CAAE;AAClC;AAAA,IACF;AACA,WAAO,cAAc,EAAE,KAAK,CAAC,QAAQ;AACnC,YAAM,IAAK,IAAgC,IAAI;AAC/C,UAAI,GAAG;AACL,kBAAU,IAAI,MAAM,CAAC;AACrB,gBAAQ,MAAM,CAAC;AAAA,MACjB;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,IAAI,CAAC;AAET,MAAI,CAAC,KAAM,QAAO,oBAAC,UAAK,WAAW,GAAG,gBAAgB,SAAS,GAAG,OAAO,EAAE,iBAAiB,MAAM,GAAG;AACrG,SAAO,oBAAC,QAAK,WAAsB,OAAO,EAAE,MAAM,GAAG;AACvD;AAIO,SAAS,WAAW,EAAE,QAAQ,YAAY,aAAa,OAAO,UAAU,GAAoB;AACjG,QAAM,SAAS,aAAa,IAAI,IAAI,UAAU,IAAI;AAClD,QAAM,UAAU,OAAO,OAAO,CAAC,MAAM,cAAc,CAAC,UAAU,OAAO,IAAI,EAAE,GAAG,CAAC;AAC/E,MAAI,QAAQ,WAAW,EAAG,QAAO;AAEjC,SACE,oBAAC,SAAI,WAAW,GAAG,wBAAwB,SAAS,GACjD,kBAAQ,IAAI,CAAC,UAAU;AACtB,UAAM,WAAW,SAAS,CAAC,OAAO,IAAI,MAAM,GAAG,IAAI;AACnD,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,OAAO,WAAW,GAAG,MAAM,WAAW,oCAA+B,MAAM;AAAA,QAC3E,WAAW;AAAA,UACT;AAAA,UACA,YAAY;AAAA,QACd;AAAA,QACA,OAAO;AAAA,UACL,aAAa,GAAG,MAAM,KAAK;AAAA,UAC3B,iBAAiB,GAAG,MAAM,KAAK;AAAA,QACjC;AAAA,QAEA;AAAA,8BAAC,aAAU,MAAM,MAAM,MAAM,OAAO,MAAM,OAAO,WAAU,wBAAuB;AAAA,UAClF,oBAAC,UAAK,WAAU,yBAAwB,OAAO,EAAE,OAAO,MAAM,MAAM,GACjE,gBAAM,MACT;AAAA;AAAA;AAAA,MAdK,MAAM;AAAA,IAeb;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}

package/dist/components/rewards/leaderboard-table.cjs

@@ -0,0 +1,96 @@
+"use strict";
+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 leaderboard_table_exports = {};
+__export(leaderboard_table_exports, {
+  LeaderboardTable: () => LeaderboardTable,
+  LeaderboardWidget: () => LeaderboardWidget
+});
+module.exports = __toCommonJS(leaderboard_table_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_cn = require("../../utils/cn.js");
+var import_address = require("../../utils/address.js");
+var import_level_badge = require("./level-badge.js");
+function rankAccent(rank) {
+  if (rank === 1) return "#f59e0b";
+  if (rank === 2) return "#94a3b8";
+  if (rank === 3) return "#b45309";
+  return null;
+}
+function LeaderboardTable({ entries, highlightAddress, renderAddress, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_cn.cn)("overflow-hidden rounded-xl border border-border", className), children: entries.map((e) => {
+    const accent = rankAccent(e.rank);
+    const isViewer = highlightAddress != null && e.address === highlightAddress;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: (0, import_cn.cn)(
+          "flex items-center gap-3 border-b border-border/60 bg-card px-3 py-2.5 last:border-b-0 sm:px-4",
+          isViewer && "bg-primary/10"
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              className: "w-8 shrink-0 text-center text-sm font-black tabular-nums",
+              style: accent ? { color: accent } : void 0,
+              children: e.rank
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "min-w-0 flex-1 truncate text-sm font-medium", children: [
+            renderAddress ? renderAddress(e.address) : (0, import_address.shortenAddress)(e.address),
+            isViewer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ml-1.5 text-xs text-muted-foreground", children: "(you)" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_level_badge.LevelBadge, { level: e.currentLevel, name: e.currentLevelName, badgeColor: e.badgeColor, size: "sm", className: "hidden sm:inline-flex" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "shrink-0 text-sm font-semibold tabular-nums", children: [
+            e.totalXp.toLocaleString(),
+            " XP"
+          ] })
+        ]
+      },
+      e.address
+    );
+  }) });
+}
+function LeaderboardWidget({ entries, title = "Top Creators", href, renderAddress, className }) {
+  if (entries.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: (0, import_cn.cn)("rounded-xl border border-border bg-card p-4 sm:p-5", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-3 flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-base font-black", children: title }),
+      href && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href, className: "text-xs font-semibold text-muted-foreground active:opacity-70", children: "View leaderboard \u2192" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: "space-y-2.5", children: entries.map((e) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "flex items-center gap-2.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "span",
+        {
+          className: "w-5 shrink-0 text-center text-sm font-black tabular-nums",
+          style: rankAccent(e.rank) ? { color: rankAccent(e.rank) } : void 0,
+          children: e.rank
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "min-w-0 flex-1 truncate text-sm font-medium", children: renderAddress ? renderAddress(e.address) : (0, import_address.shortenAddress)(e.address) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_level_badge.LevelBadge, { level: e.currentLevel, name: e.currentLevelName, badgeColor: e.badgeColor, size: "sm" })
+    ] }, e.address)) })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LeaderboardTable,
+  LeaderboardWidget
+});
+//# sourceMappingURL=leaderboard-table.cjs.map

package/dist/components/rewards/leaderboard-table.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/rewards/leaderboard-table.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { shortenAddress } from \"../../utils/address.js\";\nimport { LevelBadge } from \"./level-badge.js\";\n\nexport interface LeaderboardEntryLike {\n  rank: number;\n  address: string;\n  publicId?: string | null;\n  totalXp: number;\n  currentLevel: number;\n  currentLevelName: string;\n  badgeColor: string;\n}\n\nexport interface LeaderboardTableProps {\n  entries: LeaderboardEntryLike[];\n  /** The viewer's address — its row gets highlighted. */\n  highlightAddress?: string | null;\n  /** Render the address cell (e.g. a profile link). Defaults to a shortened address. */\n  renderAddress?: (address: string) => ReactNode;\n  className?: string;\n}\n\nfunction rankAccent(rank: number): string | null {\n  if (rank === 1) return \"#f59e0b\";\n  if (rank === 2) return \"#94a3b8\";\n  if (rank === 3) return \"#b45309\";\n  return null;\n}\n\n/** Full leaderboard rows: rank, address, level chip, XP. */\nexport function LeaderboardTable({ entries, highlightAddress, renderAddress, className }: LeaderboardTableProps) {\n  return (\n    <div className={cn(\"overflow-hidden rounded-xl border border-border\", className)}>\n      {entries.map((e) => {\n        const accent = rankAccent(e.rank);\n        const isViewer = highlightAddress != null && e.address === highlightAddress;\n        return (\n          <div\n            key={e.address}\n            className={cn(\n              \"flex items-center gap-3 border-b border-border/60 bg-card px-3 py-2.5 last:border-b-0 sm:px-4\",\n              isViewer && \"bg-primary/10\"\n            )}\n          >\n            <span\n              className=\"w-8 shrink-0 text-center text-sm font-black tabular-nums\"\n              style={accent ? { color: accent } : undefined}\n            >\n              {e.rank}\n            </span>\n            <span className=\"min-w-0 flex-1 truncate text-sm font-medium\">\n              {renderAddress ? renderAddress(e.address) : shortenAddress(e.address)}\n              {isViewer && <span className=\"ml-1.5 text-xs text-muted-foreground\">(you)</span>}\n            </span>\n            <LevelBadge level={e.currentLevel} name={e.currentLevelName} badgeColor={e.badgeColor} size=\"sm\" className=\"hidden sm:inline-flex\" />\n            <span className=\"shrink-0 text-sm font-semibold tabular-nums\">{e.totalXp.toLocaleString()} XP</span>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nexport interface LeaderboardWidgetProps {\n  entries: LeaderboardEntryLike[];\n  title?: string;\n  /** Link to the full leaderboard (\"/rewards\"). */\n  href?: string;\n  renderAddress?: (address: string) => ReactNode;\n  className?: string;\n}\n\n/** Compact top-N card for homepage/discover rails. */\nexport function LeaderboardWidget({ entries, title = \"Top Creators\", href, renderAddress, className }: LeaderboardWidgetProps) {\n  if (entries.length === 0) return null;\n  return (\n    <section className={cn(\"rounded-xl border border-border bg-card p-4 sm:p-5\", className)}>\n      <div className=\"mb-3 flex items-center justify-between\">\n        <h2 className=\"text-base font-black\">{title}</h2>\n        {href && (\n          <a href={href} className=\"text-xs font-semibold text-muted-foreground active:opacity-70\">\n            View leaderboard →\n          </a>\n        )}\n      </div>\n      <ol className=\"space-y-2.5\">\n        {entries.map((e) => (\n          <li key={e.address} className=\"flex items-center gap-2.5\">\n            <span\n              className=\"w-5 shrink-0 text-center text-sm font-black tabular-nums\"\n              style={rankAccent(e.rank) ? { color: rankAccent(e.rank)! } : undefined}\n            >\n              {e.rank}\n            </span>\n            <span className=\"min-w-0 flex-1 truncate text-sm font-medium\">\n              {renderAddress ? renderAddress(e.address) : shortenAddress(e.address)}\n            </span>\n            <LevelBadge level={e.currentLevel} name={e.currentLevelName} badgeColor={e.badgeColor} size=\"sm\" />\n          </li>\n        ))}\n      </ol>\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8CY;AA7CZ,gBAAmB;AACnB,qBAA+B;AAC/B,yBAA2B;AAqB3B,SAAS,WAAW,MAA6B;AAC/C,MAAI,SAAS,EAAG,QAAO;AACvB,MAAI,SAAS,EAAG,QAAO;AACvB,MAAI,SAAS,EAAG,QAAO;AACvB,SAAO;AACT;AAGO,SAAS,iBAAiB,EAAE,SAAS,kBAAkB,eAAe,UAAU,GAA0B;AAC/G,SACE,4CAAC,SAAI,eAAW,cAAG,mDAAmD,SAAS,GAC5E,kBAAQ,IAAI,CAAC,MAAM;AAClB,UAAM,SAAS,WAAW,EAAE,IAAI;AAChC,UAAM,WAAW,oBAAoB,QAAQ,EAAE,YAAY;AAC3D,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,eAAW;AAAA,UACT;AAAA,UACA,YAAY;AAAA,QACd;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,SAAS,EAAE,OAAO,OAAO,IAAI;AAAA,cAEnC,YAAE;AAAA;AAAA,UACL;AAAA,UACA,6CAAC,UAAK,WAAU,+CACb;AAAA,4BAAgB,cAAc,EAAE,OAAO,QAAI,+BAAe,EAAE,OAAO;AAAA,YACnE,YAAY,4CAAC,UAAK,WAAU,wCAAuC,mBAAK;AAAA,aAC3E;AAAA,UACA,4CAAC,iCAAW,OAAO,EAAE,cAAc,MAAM,EAAE,kBAAkB,YAAY,EAAE,YAAY,MAAK,MAAK,WAAU,yBAAwB;AAAA,UACnI,6CAAC,UAAK,WAAU,+CAA+C;AAAA,cAAE,QAAQ,eAAe;AAAA,YAAE;AAAA,aAAG;AAAA;AAAA;AAAA,MAjBxF,EAAE;AAAA,IAkBT;AAAA,EAEJ,CAAC,GACH;AAEJ;AAYO,SAAS,kBAAkB,EAAE,SAAS,QAAQ,gBAAgB,MAAM,eAAe,UAAU,GAA2B;AAC7H,MAAI,QAAQ,WAAW,EAAG,QAAO;AACjC,SACE,6CAAC,aAAQ,eAAW,cAAG,sDAAsD,SAAS,GACpF;AAAA,iDAAC,SAAI,WAAU,0CACb;AAAA,kDAAC,QAAG,WAAU,wBAAwB,iBAAM;AAAA,MAC3C,QACC,4CAAC,OAAE,MAAY,WAAU,iEAAgE,qCAEzF;AAAA,OAEJ;AAAA,IACA,4CAAC,QAAG,WAAU,eACX,kBAAQ,IAAI,CAAC,MACZ,6CAAC,QAAmB,WAAU,6BAC5B;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,WAAW,EAAE,IAAI,IAAI,EAAE,OAAO,WAAW,EAAE,IAAI,EAAG,IAAI;AAAA,UAE5D,YAAE;AAAA;AAAA,MACL;AAAA,MACA,4CAAC,UAAK,WAAU,+CACb,0BAAgB,cAAc,EAAE,OAAO,QAAI,+BAAe,EAAE,OAAO,GACtE;AAAA,MACA,4CAAC,iCAAW,OAAO,EAAE,cAAc,MAAM,EAAE,kBAAkB,YAAY,EAAE,YAAY,MAAK,MAAK;AAAA,SAV1F,EAAE,OAWX,CACD,GACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/rewards/leaderboard-table.d.cts

@@ -0,0 +1,34 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface LeaderboardEntryLike {
+    rank: number;
+    address: string;
+    publicId?: string | null;
+    totalXp: number;
+    currentLevel: number;
+    currentLevelName: string;
+    badgeColor: string;
+}
+interface LeaderboardTableProps {
+    entries: LeaderboardEntryLike[];
+    /** The viewer's address — its row gets highlighted. */
+    highlightAddress?: string | null;
+    /** Render the address cell (e.g. a profile link). Defaults to a shortened address. */
+    renderAddress?: (address: string) => ReactNode;
+    className?: string;
+}
+/** Full leaderboard rows: rank, address, level chip, XP. */
+declare function LeaderboardTable({ entries, highlightAddress, renderAddress, className }: LeaderboardTableProps): react_jsx_runtime.JSX.Element;
+interface LeaderboardWidgetProps {
+    entries: LeaderboardEntryLike[];
+    title?: string;
+    /** Link to the full leaderboard ("/rewards"). */
+    href?: string;
+    renderAddress?: (address: string) => ReactNode;
+    className?: string;
+}
+/** Compact top-N card for homepage/discover rails. */
+declare function LeaderboardWidget({ entries, title, href, renderAddress, className }: LeaderboardWidgetProps): react_jsx_runtime.JSX.Element | null;
+
+export { type LeaderboardEntryLike, LeaderboardTable, type LeaderboardTableProps, LeaderboardWidget, type LeaderboardWidgetProps };

package/dist/components/rewards/leaderboard-table.d.ts

@@ -0,0 +1,34 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface LeaderboardEntryLike {
+    rank: number;
+    address: string;
+    publicId?: string | null;
+    totalXp: number;
+    currentLevel: number;
+    currentLevelName: string;
+    badgeColor: string;
+}
+interface LeaderboardTableProps {
+    entries: LeaderboardEntryLike[];
+    /** The viewer's address — its row gets highlighted. */
+    highlightAddress?: string | null;
+    /** Render the address cell (e.g. a profile link). Defaults to a shortened address. */
+    renderAddress?: (address: string) => ReactNode;
+    className?: string;
+}
+/** Full leaderboard rows: rank, address, level chip, XP. */
+declare function LeaderboardTable({ entries, highlightAddress, renderAddress, className }: LeaderboardTableProps): react_jsx_runtime.JSX.Element;
+interface LeaderboardWidgetProps {
+    entries: LeaderboardEntryLike[];
+    title?: string;
+    /** Link to the full leaderboard ("/rewards"). */
+    href?: string;
+    renderAddress?: (address: string) => ReactNode;
+    className?: string;
+}
+/** Compact top-N card for homepage/discover rails. */
+declare function LeaderboardWidget({ entries, title, href, renderAddress, className }: LeaderboardWidgetProps): react_jsx_runtime.JSX.Element | null;
+
+export { type LeaderboardEntryLike, LeaderboardTable, type LeaderboardTableProps, LeaderboardWidget, type LeaderboardWidgetProps };

package/dist/components/rewards/leaderboard-table.js

@@ -0,0 +1,71 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { shortenAddress } from "../../utils/address.js";
+import { LevelBadge } from "./level-badge.js";
+function rankAccent(rank) {
+  if (rank === 1) return "#f59e0b";
+  if (rank === 2) return "#94a3b8";
+  if (rank === 3) return "#b45309";
+  return null;
+}
+function LeaderboardTable({ entries, highlightAddress, renderAddress, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden rounded-xl border border-border", className), children: entries.map((e) => {
+    const accent = rankAccent(e.rank);
+    const isViewer = highlightAddress != null && e.address === highlightAddress;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-3 border-b border-border/60 bg-card px-3 py-2.5 last:border-b-0 sm:px-4",
+          isViewer && "bg-primary/10"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "w-8 shrink-0 text-center text-sm font-black tabular-nums",
+              style: accent ? { color: accent } : void 0,
+              children: e.rank
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1 truncate text-sm font-medium", children: [
+            renderAddress ? renderAddress(e.address) : shortenAddress(e.address),
+            isViewer && /* @__PURE__ */ jsx("span", { className: "ml-1.5 text-xs text-muted-foreground", children: "(you)" })
+          ] }),
+          /* @__PURE__ */ jsx(LevelBadge, { level: e.currentLevel, name: e.currentLevelName, badgeColor: e.badgeColor, size: "sm", className: "hidden sm:inline-flex" }),
+          /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-sm font-semibold tabular-nums", children: [
+            e.totalXp.toLocaleString(),
+            " XP"
+          ] })
+        ]
+      },
+      e.address
+    );
+  }) });
+}
+function LeaderboardWidget({ entries, title = "Top Creators", href, renderAddress, className }) {
+  if (entries.length === 0) return null;
+  return /* @__PURE__ */ jsxs("section", { className: cn("rounded-xl border border-border bg-card p-4 sm:p-5", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-base font-black", children: title }),
+      href && /* @__PURE__ */ jsx("a", { href, className: "text-xs font-semibold text-muted-foreground active:opacity-70", children: "View leaderboard \u2192" })
+    ] }),
+    /* @__PURE__ */ jsx("ol", { className: "space-y-2.5", children: entries.map((e) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2.5", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "w-5 shrink-0 text-center text-sm font-black tabular-nums",
+          style: rankAccent(e.rank) ? { color: rankAccent(e.rank) } : void 0,
+          children: e.rank
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-medium", children: renderAddress ? renderAddress(e.address) : shortenAddress(e.address) }),
+      /* @__PURE__ */ jsx(LevelBadge, { level: e.currentLevel, name: e.currentLevelName, badgeColor: e.badgeColor, size: "sm" })
+    ] }, e.address)) })
+  ] });
+}
+export {
+  LeaderboardTable,
+  LeaderboardWidget
+};
+//# sourceMappingURL=leaderboard-table.js.map

package/dist/components/rewards/leaderboard-table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/rewards/leaderboard-table.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { shortenAddress } from \"../../utils/address.js\";\nimport { LevelBadge } from \"./level-badge.js\";\n\nexport interface LeaderboardEntryLike {\n  rank: number;\n  address: string;\n  publicId?: string | null;\n  totalXp: number;\n  currentLevel: number;\n  currentLevelName: string;\n  badgeColor: string;\n}\n\nexport interface LeaderboardTableProps {\n  entries: LeaderboardEntryLike[];\n  /** The viewer's address — its row gets highlighted. */\n  highlightAddress?: string | null;\n  /** Render the address cell (e.g. a profile link). Defaults to a shortened address. */\n  renderAddress?: (address: string) => ReactNode;\n  className?: string;\n}\n\nfunction rankAccent(rank: number): string | null {\n  if (rank === 1) return \"#f59e0b\";\n  if (rank === 2) return \"#94a3b8\";\n  if (rank === 3) return \"#b45309\";\n  return null;\n}\n\n/** Full leaderboard rows: rank, address, level chip, XP. */\nexport function LeaderboardTable({ entries, highlightAddress, renderAddress, className }: LeaderboardTableProps) {\n  return (\n    <div className={cn(\"overflow-hidden rounded-xl border border-border\", className)}>\n      {entries.map((e) => {\n        const accent = rankAccent(e.rank);\n        const isViewer = highlightAddress != null && e.address === highlightAddress;\n        return (\n          <div\n            key={e.address}\n            className={cn(\n              \"flex items-center gap-3 border-b border-border/60 bg-card px-3 py-2.5 last:border-b-0 sm:px-4\",\n              isViewer && \"bg-primary/10\"\n            )}\n          >\n            <span\n              className=\"w-8 shrink-0 text-center text-sm font-black tabular-nums\"\n              style={accent ? { color: accent } : undefined}\n            >\n              {e.rank}\n            </span>\n            <span className=\"min-w-0 flex-1 truncate text-sm font-medium\">\n              {renderAddress ? renderAddress(e.address) : shortenAddress(e.address)}\n              {isViewer && <span className=\"ml-1.5 text-xs text-muted-foreground\">(you)</span>}\n            </span>\n            <LevelBadge level={e.currentLevel} name={e.currentLevelName} badgeColor={e.badgeColor} size=\"sm\" className=\"hidden sm:inline-flex\" />\n            <span className=\"shrink-0 text-sm font-semibold tabular-nums\">{e.totalXp.toLocaleString()} XP</span>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nexport interface LeaderboardWidgetProps {\n  entries: LeaderboardEntryLike[];\n  title?: string;\n  /** Link to the full leaderboard (\"/rewards\"). */\n  href?: string;\n  renderAddress?: (address: string) => ReactNode;\n  className?: string;\n}\n\n/** Compact top-N card for homepage/discover rails. */\nexport function LeaderboardWidget({ entries, title = \"Top Creators\", href, renderAddress, className }: LeaderboardWidgetProps) {\n  if (entries.length === 0) return null;\n  return (\n    <section className={cn(\"rounded-xl border border-border bg-card p-4 sm:p-5\", className)}>\n      <div className=\"mb-3 flex items-center justify-between\">\n        <h2 className=\"text-base font-black\">{title}</h2>\n        {href && (\n          <a href={href} className=\"text-xs font-semibold text-muted-foreground active:opacity-70\">\n            View leaderboard →\n          </a>\n        )}\n      </div>\n      <ol className=\"space-y-2.5\">\n        {entries.map((e) => (\n          <li key={e.address} className=\"flex items-center gap-2.5\">\n            <span\n              className=\"w-5 shrink-0 text-center text-sm font-black tabular-nums\"\n              style={rankAccent(e.rank) ? { color: rankAccent(e.rank)! } : undefined}\n            >\n              {e.rank}\n            </span>\n            <span className=\"min-w-0 flex-1 truncate text-sm font-medium\">\n              {renderAddress ? renderAddress(e.address) : shortenAddress(e.address)}\n            </span>\n            <LevelBadge level={e.currentLevel} name={e.currentLevelName} badgeColor={e.badgeColor} size=\"sm\" />\n          </li>\n        ))}\n      </ol>\n    </section>\n  );\n}\n"],"mappings":"AA8CY,cAMA,YANA;AA7CZ,SAAS,UAAU;AACnB,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAqB3B,SAAS,WAAW,MAA6B;AAC/C,MAAI,SAAS,EAAG,QAAO;AACvB,MAAI,SAAS,EAAG,QAAO;AACvB,MAAI,SAAS,EAAG,QAAO;AACvB,SAAO;AACT;AAGO,SAAS,iBAAiB,EAAE,SAAS,kBAAkB,eAAe,UAAU,GAA0B;AAC/G,SACE,oBAAC,SAAI,WAAW,GAAG,mDAAmD,SAAS,GAC5E,kBAAQ,IAAI,CAAC,MAAM;AAClB,UAAM,SAAS,WAAW,EAAE,IAAI;AAChC,UAAM,WAAW,oBAAoB,QAAQ,EAAE,YAAY;AAC3D,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,WAAW;AAAA,UACT;AAAA,UACA,YAAY;AAAA,QACd;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,SAAS,EAAE,OAAO,OAAO,IAAI;AAAA,cAEnC,YAAE;AAAA;AAAA,UACL;AAAA,UACA,qBAAC,UAAK,WAAU,+CACb;AAAA,4BAAgB,cAAc,EAAE,OAAO,IAAI,eAAe,EAAE,OAAO;AAAA,YACnE,YAAY,oBAAC,UAAK,WAAU,wCAAuC,mBAAK;AAAA,aAC3E;AAAA,UACA,oBAAC,cAAW,OAAO,EAAE,cAAc,MAAM,EAAE,kBAAkB,YAAY,EAAE,YAAY,MAAK,MAAK,WAAU,yBAAwB;AAAA,UACnI,qBAAC,UAAK,WAAU,+CAA+C;AAAA,cAAE,QAAQ,eAAe;AAAA,YAAE;AAAA,aAAG;AAAA;AAAA;AAAA,MAjBxF,EAAE;AAAA,IAkBT;AAAA,EAEJ,CAAC,GACH;AAEJ;AAYO,SAAS,kBAAkB,EAAE,SAAS,QAAQ,gBAAgB,MAAM,eAAe,UAAU,GAA2B;AAC7H,MAAI,QAAQ,WAAW,EAAG,QAAO;AACjC,SACE,qBAAC,aAAQ,WAAW,GAAG,sDAAsD,SAAS,GACpF;AAAA,yBAAC,SAAI,WAAU,0CACb;AAAA,0BAAC,QAAG,WAAU,wBAAwB,iBAAM;AAAA,MAC3C,QACC,oBAAC,OAAE,MAAY,WAAU,iEAAgE,qCAEzF;AAAA,OAEJ;AAAA,IACA,oBAAC,QAAG,WAAU,eACX,kBAAQ,IAAI,CAAC,MACZ,qBAAC,QAAmB,WAAU,6BAC5B;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,WAAW,EAAE,IAAI,IAAI,EAAE,OAAO,WAAW,EAAE,IAAI,EAAG,IAAI;AAAA,UAE5D,YAAE;AAAA;AAAA,MACL;AAAA,MACA,oBAAC,UAAK,WAAU,+CACb,0BAAgB,cAAc,EAAE,OAAO,IAAI,eAAe,EAAE,OAAO,GACtE;AAAA,MACA,oBAAC,cAAW,OAAO,EAAE,cAAc,MAAM,EAAE,kBAAkB,YAAY,EAAE,YAAY,MAAK,MAAK;AAAA,SAV1F,EAAE,OAWX,CACD,GACH;AAAA,KACF;AAEJ;","names":[]}