@ntrs/meme 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,92 @@
+import * as react from 'react';
+
+type MemeCardState = 'idle' | 'selected' | 'winner' | 'loser';
+interface MemeCardProps {
+    title: string;
+    imageUrl: string;
+    rating?: number;
+    record?: {
+        wins: number;
+        losses: number;
+    };
+    /** rating change shown as a badge in the "winner"/"loser" states */
+    delta?: number;
+    state?: MemeCardState;
+    onClick?: () => void;
+    className?: string;
+}
+declare function MemeCard({ title, imageUrl, rating, record, delta, state, onClick, className, }: MemeCardProps): react.JSX.Element;
+
+interface VoteButtonProps {
+    side: 'left' | 'right';
+    disabled?: boolean;
+    onVote?: () => void;
+    className?: string;
+}
+declare function VoteButton({ side, disabled, onVote, className }: VoteButtonProps): react.JSX.Element;
+
+interface RatingDeltaProps {
+    delta: number;
+    className?: string;
+}
+declare function RatingDelta({ delta, className }: RatingDeltaProps): react.JSX.Element;
+
+interface BattleMeme {
+    id: string;
+    title: string;
+    imageUrl: string;
+    rating: number;
+    record?: {
+        wins: number;
+        losses: number;
+    };
+}
+interface BattleResult {
+    winnerId: string;
+    delta: number;
+}
+interface BattleStageProps {
+    memeA: BattleMeme;
+    memeB: BattleMeme;
+    /** ready → cards clickable · voting → optimistic selection shown · revealed → winner/loser + deltas */
+    phase: 'ready' | 'voting' | 'revealed';
+    /** the meme the user clicked (voting phase) */
+    selectedId?: string;
+    result?: BattleResult;
+    onVote?: (memeId: string) => void;
+    className?: string;
+}
+declare function BattleStage(props: BattleStageProps): react.JSX.Element;
+
+interface LeaderboardRow {
+    rank: number;
+    id: string;
+    title: string;
+    imageUrl: string;
+    rating: number;
+    wins: number;
+    losses: number;
+    uploader: string;
+}
+interface LeaderboardTableProps {
+    rows: LeaderboardRow[];
+    isLoading?: boolean;
+    /** meme ids to highlight (e.g. the current user's uploads) */
+    highlightIds?: string[];
+    className?: string;
+}
+declare function LeaderboardTable({ rows, isLoading, highlightIds, className }: LeaderboardTableProps): react.JSX.Element;
+
+interface UploadDropzoneProps {
+    /** visual state — parent owns the actual file/drag logic */
+    state?: 'idle' | 'dragover' | 'preview' | 'error';
+    previewUrl?: string;
+    error?: string;
+    accept?: string;
+    maxSizeMb?: number;
+    onFile?: (file: File) => void;
+    className?: string;
+}
+declare function UploadDropzone({ state, previewUrl, error, accept, maxSizeMb, onFile, className, }: UploadDropzoneProps): react.JSX.Element;
+
+export { type BattleMeme, type BattleResult, BattleStage, type BattleStageProps, type LeaderboardRow, LeaderboardTable, type LeaderboardTableProps, MemeCard, type MemeCardProps, type MemeCardState, RatingDelta, type RatingDeltaProps, UploadDropzone, type UploadDropzoneProps, VoteButton, type VoteButtonProps };

package/dist/index.js

@@ -0,0 +1,278 @@
+"use client";
+
+// src/meme-card/index.tsx
+import { cn as cn2 } from "@ntrs/core";
+
+// src/rating-delta/index.tsx
+import { cn } from "@ntrs/core";
+import { jsxs } from "react/jsx-runtime";
+function RatingDelta({ delta, className }) {
+  const sign = delta > 0 ? "+" : delta < 0 ? "\u2212" : "\xB1";
+  const arrow = delta > 0 ? "\u25B2" : delta < 0 ? "\u25BC" : "";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-semibold tabular-nums",
+        delta > 0 && "bg-success/15 text-success",
+        delta < 0 && "bg-destructive/15 text-destructive",
+        delta === 0 && "bg-muted text-muted-foreground",
+        className
+      ),
+      children: [
+        sign,
+        Math.abs(delta),
+        " ",
+        arrow
+      ]
+    }
+  );
+}
+
+// src/meme-card/index.tsx
+import { jsx, jsxs as jsxs2 } from "react/jsx-runtime";
+function MemeCard({
+  title,
+  imageUrl,
+  rating,
+  record,
+  delta,
+  state = "idle",
+  onClick,
+  className
+}) {
+  const clickable = state === "idle" && !!onClick;
+  const Tag = clickable ? "button" : "div";
+  return /* @__PURE__ */ jsxs2(
+    Tag,
+    {
+      type: clickable ? "button" : void 0,
+      onClick: clickable ? onClick : void 0,
+      "aria-label": clickable ? `Vote for ${title}` : void 0,
+      className: cn2(
+        "color-card relative block w-full overflow-hidden rounded-xl border border-border text-left",
+        "transition-all duration-300",
+        clickable && "cursor-pointer hover:-translate-y-1 hover:shadow-lg hover:border-primary/50",
+        state === "selected" && "ring-2 ring-primary",
+        state === "winner" && "ring-2 ring-success shadow-lg",
+        state === "loser" && "opacity-50 grayscale",
+        className
+      ),
+      children: [
+        state === "winner" && /* @__PURE__ */ jsx("span", { className: "absolute left-3 top-3 z-10 rounded-full bg-success px-2.5 py-1 text-xs font-bold text-success-foreground shadow", children: "\u{1F3C6} Winner" }),
+        /* @__PURE__ */ jsx("div", { className: "aspect-[4/3] w-full bg-muted", children: /* @__PURE__ */ jsx("img", { src: imageUrl, alt: title, className: "h-full w-full object-cover" }) }),
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-3 p-4", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "truncate font-semibold", children: title }),
+            record && /* @__PURE__ */ jsxs2("p", { className: "text-xs text-muted-foreground tabular-nums", children: [
+              record.wins,
+              "W \u2013 ",
+              record.losses,
+              "L"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { className: "flex shrink-0 items-center gap-2", children: [
+            (state === "winner" || state === "loser") && delta !== void 0 && /* @__PURE__ */ jsx(RatingDelta, { delta: state === "winner" ? Math.abs(delta) : -Math.abs(delta) }),
+            rating !== void 0 && /* @__PURE__ */ jsx("span", { className: "rounded-lg bg-muted px-2 py-1 text-sm font-bold tabular-nums", children: rating })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/vote-button/index.tsx
+import { cn as cn3 } from "@ntrs/core";
+import { jsx as jsx2, jsxs as jsxs3 } from "react/jsx-runtime";
+function VoteButton({ side, disabled, onVote, className }) {
+  return /* @__PURE__ */ jsxs3(
+    "button",
+    {
+      type: "button",
+      disabled,
+      onClick: onVote,
+      "aria-label": `Vote ${side}`,
+      className: cn3(
+        "inline-flex h-12 items-center gap-2 rounded-full bg-primary px-6 font-semibold text-primary-foreground",
+        "transition-transform hover:scale-105 active:scale-95",
+        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary",
+        "disabled:pointer-events-none disabled:opacity-40",
+        className
+      ),
+      children: [
+        side === "left" && /* @__PURE__ */ jsx2("span", { "aria-hidden": true, children: "\u2190" }),
+        "Vote",
+        side === "right" && /* @__PURE__ */ jsx2("span", { "aria-hidden": true, children: "\u2192" })
+      ]
+    }
+  );
+}
+
+// src/battle-stage/index.tsx
+import { cn as cn4 } from "@ntrs/core";
+import { jsx as jsx3, jsxs as jsxs4 } from "react/jsx-runtime";
+function cardState(memeId, { phase, selectedId, result }) {
+  if (phase === "voting") return memeId === selectedId ? "selected" : "idle";
+  if (phase === "revealed" && result) return memeId === result.winnerId ? "winner" : "loser";
+  return "idle";
+}
+function BattleStage(props) {
+  const { memeA, memeB, phase, result, onVote, className } = props;
+  return /* @__PURE__ */ jsxs4("div", { className: cn4("grid grid-cols-1 items-center gap-6 md:grid-cols-[1fr_auto_1fr]", className), children: [
+    [memeA, memeB].map((meme, i) => /* @__PURE__ */ jsx3("div", { className: cn4(i === 1 && "md:order-3"), children: /* @__PURE__ */ jsx3(
+      MemeCard,
+      {
+        title: meme.title,
+        imageUrl: meme.imageUrl,
+        rating: meme.rating,
+        record: meme.record,
+        state: cardState(meme.id, props),
+        delta: result?.delta,
+        onClick: phase === "ready" && onVote ? () => onVote(meme.id) : void 0
+      }
+    ) }, meme.id)),
+    /* @__PURE__ */ jsx3("div", { className: "justify-self-center md:order-2", "aria-hidden": true, children: /* @__PURE__ */ jsx3(
+      "span",
+      {
+        className: cn4(
+          "flex h-14 w-14 items-center justify-center rounded-full border-2 border-border bg-card text-lg font-black text-muted-foreground",
+          phase === "voting" && "animate-pulse border-primary text-primary"
+        ),
+        children: "VS"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs4("p", { className: "text-center text-sm text-muted-foreground md:order-4 md:col-span-3", children: [
+      phase === "ready" && "Click the funnier meme \u2014 or press \u2190 / \u2192",
+      phase === "voting" && "Counting your vote\u2026",
+      phase === "revealed" && result && `Ratings updated: \xB1${result.delta} points`
+    ] })
+  ] });
+}
+
+// src/leaderboard-table/index.tsx
+import { cn as cn5 } from "@ntrs/core";
+import { jsx as jsx4, jsxs as jsxs5 } from "react/jsx-runtime";
+var MEDALS = { 1: "\u{1F947}", 2: "\u{1F948}", 3: "\u{1F949}" };
+function LeaderboardTable({ rows, isLoading, highlightIds = [], className }) {
+  if (isLoading) {
+    return /* @__PURE__ */ jsx4("div", { className: cn5("space-y-2", className), "aria-busy": "true", "aria-label": "Loading leaderboard", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx4("div", { className: "h-16 animate-pulse rounded-xl bg-muted" }, i)) });
+  }
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsxs5("div", { className: cn5("color-card rounded-xl border border-border p-12 text-center", className), children: [
+      /* @__PURE__ */ jsx4("p", { className: "text-4xl", children: "\u{1F997}" }),
+      /* @__PURE__ */ jsx4("p", { className: "mt-3 font-semibold", children: "No champions yet" }),
+      /* @__PURE__ */ jsx4("p", { className: "mt-1 text-sm text-muted-foreground", children: "Upload a meme and start voting to crown the first one." })
+    ] });
+  }
+  return /* @__PURE__ */ jsx4("div", { className: cn5("color-card overflow-x-auto rounded-xl border border-border", className), children: /* @__PURE__ */ jsxs5("table", { className: "w-full text-sm", children: [
+    /* @__PURE__ */ jsx4("thead", { children: /* @__PURE__ */ jsxs5("tr", { className: "border-b border-border text-left text-xs uppercase tracking-wide text-muted-foreground", children: [
+      /* @__PURE__ */ jsx4("th", { scope: "col", className: "px-4 py-3 w-14", children: "#" }),
+      /* @__PURE__ */ jsx4("th", { scope: "col", className: "px-4 py-3", children: "Meme" }),
+      /* @__PURE__ */ jsx4("th", { scope: "col", className: "px-4 py-3 text-right", children: "Record" }),
+      /* @__PURE__ */ jsx4("th", { scope: "col", className: "px-4 py-3 text-right", children: "Rating" })
+    ] }) }),
+    /* @__PURE__ */ jsx4("tbody", { children: rows.map((row) => {
+      const podium = row.rank <= 3;
+      return /* @__PURE__ */ jsxs5(
+        "tr",
+        {
+          className: cn5(
+            "border-b border-border last:border-0 transition-colors hover:bg-muted/50",
+            highlightIds.includes(row.id) && "bg-primary/5"
+          ),
+          children: [
+            /* @__PURE__ */ jsx4("td", { className: cn5("px-4 py-3 tabular-nums", podium ? "text-lg" : "text-muted-foreground"), children: MEDALS[row.rank] ?? row.rank }),
+            /* @__PURE__ */ jsx4("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx4("img", { src: row.imageUrl, alt: "", className: "h-10 w-10 rounded-lg object-cover" }),
+              /* @__PURE__ */ jsxs5("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx4("p", { className: cn5("truncate", podium ? "font-bold" : "font-medium"), children: row.title }),
+                /* @__PURE__ */ jsxs5("p", { className: "truncate text-xs text-muted-foreground", children: [
+                  "by ",
+                  row.uploader
+                ] })
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsxs5("td", { className: "px-4 py-3 text-right tabular-nums text-muted-foreground", children: [
+              /* @__PURE__ */ jsxs5("span", { className: "text-success font-medium", children: [
+                row.wins,
+                "W"
+              ] }),
+              " \u2013 ",
+              /* @__PURE__ */ jsxs5("span", { children: [
+                row.losses,
+                "L"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx4("td", { className: cn5("px-4 py-3 text-right tabular-nums font-bold", row.rank === 1 && "text-gold"), children: row.rating })
+          ]
+        },
+        row.id
+      );
+    }) })
+  ] }) });
+}
+
+// src/upload-dropzone/index.tsx
+import { useRef } from "react";
+import { cn as cn6 } from "@ntrs/core";
+import { Fragment, jsx as jsx5, jsxs as jsxs6 } from "react/jsx-runtime";
+function UploadDropzone({
+  state = "idle",
+  previewUrl,
+  error,
+  accept = "image/jpeg,image/png,image/webp,image/gif",
+  maxSizeMb = 5,
+  onFile,
+  className
+}) {
+  const inputRef = useRef(null);
+  return /* @__PURE__ */ jsxs6("div", { className, children: [
+    /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        onClick: () => inputRef.current?.click(),
+        "aria-label": "Choose an image to upload",
+        className: cn6(
+          "flex min-h-56 w-full flex-col items-center justify-center gap-3 rounded-xl border-2 border-dashed p-6 transition-colors",
+          state === "idle" && "border-border bg-muted/30 hover:border-primary/60 hover:bg-muted/60",
+          state === "dragover" && "border-primary bg-primary/5",
+          state === "preview" && "border-border bg-card p-3",
+          state === "error" && "border-destructive bg-destructive/5"
+        ),
+        children: state === "preview" && previewUrl ? /* @__PURE__ */ jsx5("img", { src: previewUrl, alt: "Upload preview", className: "max-h-72 w-full rounded-lg object-contain" }) : /* @__PURE__ */ jsxs6(Fragment, { children: [
+          /* @__PURE__ */ jsx5("span", { className: "text-4xl", "aria-hidden": true, children: state === "error" ? "\u{1F6AB}" : state === "dragover" ? "\u{1F4E5}" : "\u{1F5BC}\uFE0F" }),
+          /* @__PURE__ */ jsx5("span", { className: "font-medium", children: state === "dragover" ? "Drop it!" : "Drag a meme here, or click to browse" }),
+          /* @__PURE__ */ jsxs6("span", { className: "text-xs text-muted-foreground", children: [
+            "JPEG \xB7 PNG \xB7 WebP \xB7 GIF \u2014 up to ",
+            maxSizeMb,
+            " MB"
+          ] })
+        ] })
+      }
+    ),
+    state === "error" && error && /* @__PURE__ */ jsx5("p", { role: "alert", className: "mt-2 text-sm font-medium text-destructive", children: error }),
+    /* @__PURE__ */ jsx5(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept,
+        className: "hidden",
+        onChange: (e) => {
+          const file = e.target.files?.[0];
+          if (file) onFile?.(file);
+        }
+      }
+    )
+  ] });
+}
+export {
+  BattleStage,
+  LeaderboardTable,
+  MemeCard,
+  RatingDelta,
+  UploadDropzone,
+  VoteButton
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/meme-card/index.tsx","../src/rating-delta/index.tsx","../src/vote-button/index.tsx","../src/battle-stage/index.tsx","../src/leaderboard-table/index.tsx","../src/upload-dropzone/index.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@ntrs/core';\nimport { RatingDelta } from '../rating-delta';\n\nexport type MemeCardState = 'idle' | 'selected' | 'winner' | 'loser';\n\nexport interface MemeCardProps {\n  title: string;\n  imageUrl: string;\n  rating?: number;\n  record?: { wins: number; losses: number };\n  /** rating change shown as a badge in the \"winner\"/\"loser\" states */\n  delta?: number;\n  state?: MemeCardState;\n  onClick?: () => void;\n  className?: string;\n}\n\nexport function MemeCard({\n  title,\n  imageUrl,\n  rating,\n  record,\n  delta,\n  state = 'idle',\n  onClick,\n  className,\n}: MemeCardProps) {\n  const clickable = state === 'idle' && !!onClick;\n  const Tag = clickable ? 'button' : 'div';\n\n  return (\n    <Tag\n      type={clickable ? 'button' : undefined}\n      onClick={clickable ? onClick : undefined}\n      aria-label={clickable ? `Vote for ${title}` : undefined}\n      className={cn(\n        'color-card relative block w-full overflow-hidden rounded-xl border border-border text-left',\n        'transition-all duration-300',\n        clickable && 'cursor-pointer hover:-translate-y-1 hover:shadow-lg hover:border-primary/50',\n        state === 'selected' && 'ring-2 ring-primary',\n        state === 'winner' && 'ring-2 ring-success shadow-lg',\n        state === 'loser' && 'opacity-50 grayscale',\n        className,\n      )}\n    >\n      {state === 'winner' && (\n        <span className=\"absolute left-3 top-3 z-10 rounded-full bg-success px-2.5 py-1 text-xs font-bold text-success-foreground shadow\">\n          🏆 Winner\n        </span>\n      )}\n      <div className=\"aspect-[4/3] w-full bg-muted\">\n        <img src={imageUrl} alt={title} className=\"h-full w-full object-cover\" />\n      </div>\n      <div className=\"flex items-center justify-between gap-3 p-4\">\n        <div className=\"min-w-0\">\n          <p className=\"truncate font-semibold\">{title}</p>\n          {record && (\n            <p className=\"text-xs text-muted-foreground tabular-nums\">\n              {record.wins}W – {record.losses}L\n            </p>\n          )}\n        </div>\n        <div className=\"flex shrink-0 items-center gap-2\">\n          {(state === 'winner' || state === 'loser') && delta !== undefined && (\n            <RatingDelta delta={state === 'winner' ? Math.abs(delta) : -Math.abs(delta)} />\n          )}\n          {rating !== undefined && (\n            <span className=\"rounded-lg bg-muted px-2 py-1 text-sm font-bold tabular-nums\">{rating}</span>\n          )}\n        </div>\n      </div>\n    </Tag>\n  );\n}\n","import { cn } from '@ntrs/core';\n\nexport interface RatingDeltaProps {\n  delta: number;\n  className?: string;\n}\n\nexport function RatingDelta({ delta, className }: RatingDeltaProps) {\n  const sign = delta > 0 ? '+' : delta < 0 ? '−' : '±';\n  const arrow = delta > 0 ? '▲' : delta < 0 ? '▼' : '';\n  return (\n    <span\n      className={cn(\n        'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-semibold tabular-nums',\n        delta > 0 && 'bg-success/15 text-success',\n        delta < 0 && 'bg-destructive/15 text-destructive',\n        delta === 0 && 'bg-muted text-muted-foreground',\n        className,\n      )}\n    >\n      {sign}\n      {Math.abs(delta)} {arrow}\n    </span>\n  );\n}\n","'use client';\n\nimport { cn } from '@ntrs/core';\n\nexport interface VoteButtonProps {\n  side: 'left' | 'right';\n  disabled?: boolean;\n  onVote?: () => void;\n  className?: string;\n}\n\nexport function VoteButton({ side, disabled, onVote, className }: VoteButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      disabled={disabled}\n      onClick={onVote}\n      aria-label={`Vote ${side}`}\n      className={cn(\n        'inline-flex h-12 items-center gap-2 rounded-full bg-primary px-6 font-semibold text-primary-foreground',\n        'transition-transform hover:scale-105 active:scale-95',\n        'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary',\n        'disabled:pointer-events-none disabled:opacity-40',\n        className,\n      )}\n    >\n      {side === 'left' && <span aria-hidden>←</span>}\n      Vote\n      {side === 'right' && <span aria-hidden>→</span>}\n    </button>\n  );\n}\n","'use client';\n\nimport { cn } from '@ntrs/core';\nimport { MemeCard, type MemeCardState } from '../meme-card';\n\nexport interface BattleMeme {\n  id: string;\n  title: string;\n  imageUrl: string;\n  rating: number;\n  record?: { wins: number; losses: number };\n}\n\nexport interface BattleResult {\n  winnerId: string;\n  delta: number;\n}\n\nexport interface BattleStageProps {\n  memeA: BattleMeme;\n  memeB: BattleMeme;\n  /** ready → cards clickable · voting → optimistic selection shown · revealed → winner/loser + deltas */\n  phase: 'ready' | 'voting' | 'revealed';\n  /** the meme the user clicked (voting phase) */\n  selectedId?: string;\n  result?: BattleResult;\n  onVote?: (memeId: string) => void;\n  className?: string;\n}\n\nfunction cardState(memeId: string, { phase, selectedId, result }: BattleStageProps): MemeCardState {\n  if (phase === 'voting') return memeId === selectedId ? 'selected' : 'idle';\n  if (phase === 'revealed' && result) return memeId === result.winnerId ? 'winner' : 'loser';\n  return 'idle';\n}\n\nexport function BattleStage(props: BattleStageProps) {\n  const { memeA, memeB, phase, result, onVote, className } = props;\n\n  return (\n    <div className={cn('grid grid-cols-1 items-center gap-6 md:grid-cols-[1fr_auto_1fr]', className)}>\n      {[memeA, memeB].map((meme, i) => (\n        <div key={meme.id} className={cn(i === 1 && 'md:order-3')}>\n          <MemeCard\n            title={meme.title}\n            imageUrl={meme.imageUrl}\n            rating={meme.rating}\n            record={meme.record}\n            state={cardState(meme.id, props)}\n            delta={result?.delta}\n            onClick={phase === 'ready' && onVote ? () => onVote(meme.id) : undefined}\n          />\n        </div>\n      ))}\n      <div className=\"justify-self-center md:order-2\" aria-hidden>\n        <span\n          className={cn(\n            'flex h-14 w-14 items-center justify-center rounded-full border-2 border-border bg-card text-lg font-black text-muted-foreground',\n            phase === 'voting' && 'animate-pulse border-primary text-primary',\n          )}\n        >\n          VS\n        </span>\n      </div>\n      <p className=\"text-center text-sm text-muted-foreground md:order-4 md:col-span-3\">\n        {phase === 'ready' && 'Click the funnier meme — or press ← / →'}\n        {phase === 'voting' && 'Counting your vote…'}\n        {phase === 'revealed' && result && `Ratings updated: ±${result.delta} points`}\n      </p>\n    </div>\n  );\n}\n","import { cn } from '@ntrs/core';\n\nexport interface LeaderboardRow {\n  rank: number;\n  id: string;\n  title: string;\n  imageUrl: string;\n  rating: number;\n  wins: number;\n  losses: number;\n  uploader: string;\n}\n\nexport interface LeaderboardTableProps {\n  rows: LeaderboardRow[];\n  isLoading?: boolean;\n  /** meme ids to highlight (e.g. the current user's uploads) */\n  highlightIds?: string[];\n  className?: string;\n}\n\nconst MEDALS: Record<number, string> = { 1: '🥇', 2: '🥈', 3: '🥉' };\n\nexport function LeaderboardTable({ rows, isLoading, highlightIds = [], className }: LeaderboardTableProps) {\n  if (isLoading) {\n    return (\n      <div className={cn('space-y-2', className)} aria-busy=\"true\" aria-label=\"Loading leaderboard\">\n        {Array.from({ length: 5 }).map((_, i) => (\n          <div key={i} className=\"h-16 animate-pulse rounded-xl bg-muted\" />\n        ))}\n      </div>\n    );\n  }\n\n  if (rows.length === 0) {\n    return (\n      <div className={cn('color-card rounded-xl border border-border p-12 text-center', className)}>\n        <p className=\"text-4xl\">🦗</p>\n        <p className=\"mt-3 font-semibold\">No champions yet</p>\n        <p className=\"mt-1 text-sm text-muted-foreground\">Upload a meme and start voting to crown the first one.</p>\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn('color-card overflow-x-auto rounded-xl border border-border', className)}>\n      <table className=\"w-full text-sm\">\n        <thead>\n          <tr className=\"border-b border-border text-left text-xs uppercase tracking-wide text-muted-foreground\">\n            <th scope=\"col\" className=\"px-4 py-3 w-14\">#</th>\n            <th scope=\"col\" className=\"px-4 py-3\">Meme</th>\n            <th scope=\"col\" className=\"px-4 py-3 text-right\">Record</th>\n            <th scope=\"col\" className=\"px-4 py-3 text-right\">Rating</th>\n          </tr>\n        </thead>\n        <tbody>\n          {rows.map((row) => {\n            const podium = row.rank <= 3;\n            return (\n              <tr\n                key={row.id}\n                className={cn(\n                  'border-b border-border last:border-0 transition-colors hover:bg-muted/50',\n                  highlightIds.includes(row.id) && 'bg-primary/5',\n                )}\n              >\n                <td className={cn('px-4 py-3 tabular-nums', podium ? 'text-lg' : 'text-muted-foreground')}>\n                  {MEDALS[row.rank] ?? row.rank}\n                </td>\n                <td className=\"px-4 py-3\">\n                  <div className=\"flex items-center gap-3\">\n                    <img src={row.imageUrl} alt=\"\" className=\"h-10 w-10 rounded-lg object-cover\" />\n                    <div className=\"min-w-0\">\n                      <p className={cn('truncate', podium ? 'font-bold' : 'font-medium')}>{row.title}</p>\n                      <p className=\"truncate text-xs text-muted-foreground\">by {row.uploader}</p>\n                    </div>\n                  </div>\n                </td>\n                <td className=\"px-4 py-3 text-right tabular-nums text-muted-foreground\">\n                  <span className=\"text-success font-medium\">{row.wins}W</span>\n                  {' – '}\n                  <span>{row.losses}L</span>\n                </td>\n                <td className={cn('px-4 py-3 text-right tabular-nums font-bold', row.rank === 1 && 'text-gold')}>\n                  {row.rating}\n                </td>\n              </tr>\n            );\n          })}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n","'use client';\n\nimport { useRef } from 'react';\nimport { cn } from '@ntrs/core';\n\nexport interface UploadDropzoneProps {\n  /** visual state — parent owns the actual file/drag logic */\n  state?: 'idle' | 'dragover' | 'preview' | 'error';\n  previewUrl?: string;\n  error?: string;\n  accept?: string;\n  maxSizeMb?: number;\n  onFile?: (file: File) => void;\n  className?: string;\n}\n\nexport function UploadDropzone({\n  state = 'idle',\n  previewUrl,\n  error,\n  accept = 'image/jpeg,image/png,image/webp,image/gif',\n  maxSizeMb = 5,\n  onFile,\n  className,\n}: UploadDropzoneProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  return (\n    <div className={className}>\n      <button\n        type=\"button\"\n        onClick={() => inputRef.current?.click()}\n        aria-label=\"Choose an image to upload\"\n        className={cn(\n          'flex min-h-56 w-full flex-col items-center justify-center gap-3 rounded-xl border-2 border-dashed p-6 transition-colors',\n          state === 'idle' && 'border-border bg-muted/30 hover:border-primary/60 hover:bg-muted/60',\n          state === 'dragover' && 'border-primary bg-primary/5',\n          state === 'preview' && 'border-border bg-card p-3',\n          state === 'error' && 'border-destructive bg-destructive/5',\n        )}\n      >\n        {state === 'preview' && previewUrl ? (\n          <img src={previewUrl} alt=\"Upload preview\" className=\"max-h-72 w-full rounded-lg object-contain\" />\n        ) : (\n          <>\n            <span className=\"text-4xl\" aria-hidden>\n              {state === 'error' ? '🚫' : state === 'dragover' ? '📥' : '🖼️'}\n            </span>\n            <span className=\"font-medium\">\n              {state === 'dragover' ? 'Drop it!' : 'Drag a meme here, or click to browse'}\n            </span>\n            <span className=\"text-xs text-muted-foreground\">\n              JPEG · PNG · WebP · GIF — up to {maxSizeMb} MB\n            </span>\n          </>\n        )}\n      </button>\n      {state === 'error' && error && (\n        <p role=\"alert\" className=\"mt-2 text-sm font-medium text-destructive\">\n          {error}\n        </p>\n      )}\n      <input\n        ref={inputRef}\n        type=\"file\"\n        accept={accept}\n        className=\"hidden\"\n        onChange={(e) => {\n          const file = e.target.files?.[0];\n          if (file) onFile?.(file);\n        }}\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":["cn","jsxs","cn","cn","jsx","jsxs","cn","jsx","jsxs","cn","cn","jsx","jsxs","cn","jsx","jsxs"]}

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@ntrs/meme",
+  "version": "0.1.0",
+  "description": "NTRS design system — Meme Battle Arena components",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsup",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@ntrs/core": "^0.1.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
+}