@ntrs/core 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,39 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { ClassValue } from 'clsx';
+
+type ButtonVariant = 'default' | 'outline' | 'destructive' | 'ghost';
+type ButtonSize = 'sm' | 'md' | 'lg';
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+}
+declare function Button({ variant, size, className, ...props }: ButtonProps): react.JSX.Element;
+
+interface StatPillProps {
+    label: string;
+    value: string | number;
+    className?: string;
+}
+declare function StatPill({ label, value, className }: StatPillProps): react.JSX.Element;
+
+interface PageHeaderProps {
+    title: string;
+    subtitle?: string;
+    action?: ReactNode;
+    className?: string;
+}
+declare function PageHeader({ title, subtitle, action, className }: PageHeaderProps): react.JSX.Element;
+
+type NavItem = 'arena' | 'upload' | 'leaderboard' | 'my-memes';
+interface AppShellProps {
+    active: NavItem;
+    userName?: string;
+    onNavigate?: (item: NavItem) => void;
+    children: ReactNode;
+}
+declare function AppShell({ active, userName, onNavigate, children }: AppShellProps): react.JSX.Element;
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { AppShell, type AppShellProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, type NavItem, PageHeader, type PageHeaderProps, StatPill, type StatPillProps, cn };

package/dist/index.js

@@ -0,0 +1,108 @@
+"use client";
+
+// src/lib/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/button/index.tsx
+import { jsx } from "react/jsx-runtime";
+var variantClasses = {
+  default: "bg-primary text-primary-foreground hover:opacity-90",
+  outline: "border border-border bg-transparent text-foreground hover:bg-muted",
+  destructive: "bg-destructive text-destructive-foreground hover:opacity-90",
+  ghost: "bg-transparent text-foreground hover:bg-muted"
+};
+var sizeClasses = {
+  sm: "h-8 px-3 text-sm",
+  md: "h-10 px-4 text-sm",
+  lg: "h-12 px-6 text-base"
+};
+function Button({ variant = "default", size = "md", className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: cn(
+        "inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors",
+        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary",
+        "disabled:pointer-events-none disabled:opacity-50",
+        variantClasses[variant],
+        sizeClasses[size],
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/stat-pill/index.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function StatPill({ label, value, className }) {
+  return /* @__PURE__ */ jsxs("span", { className: cn("inline-flex items-center gap-2 rounded-full bg-muted px-3 py-1 text-sm", className), children: [
+    /* @__PURE__ */ jsx2("span", { className: "text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx2("span", { className: "font-semibold tabular-nums", children: value })
+  ] });
+}
+
+// src/page-header/index.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function PageHeader({ title, subtitle, action, className }) {
+  return /* @__PURE__ */ jsxs2("div", { className: cn("mb-8 flex flex-wrap items-end justify-between gap-4", className), children: [
+    /* @__PURE__ */ jsxs2("div", { children: [
+      /* @__PURE__ */ jsx3("h1", { className: "text-2xl font-bold tracking-tight", children: title }),
+      subtitle && /* @__PURE__ */ jsx3("p", { className: "mt-1 text-muted-foreground", children: subtitle })
+    ] }),
+    action
+  ] });
+}
+
+// src/app-shell/index.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var NAV = [
+  { id: "arena", label: "Arena", icon: "\u2694\uFE0F" },
+  { id: "upload", label: "Upload", icon: "\u{1F4E4}" },
+  { id: "leaderboard", label: "Leaderboard", icon: "\u{1F3C6}" },
+  { id: "my-memes", label: "My Memes", icon: "\u{1F5C2}\uFE0F" }
+];
+function AppShell({ active, userName, onNavigate, children }) {
+  return /* @__PURE__ */ jsxs3("div", { className: "color-background min-h-screen", children: [
+    /* @__PURE__ */ jsx4("header", { className: "color-card sticky top-0 z-10 border-b border-border", children: /* @__PURE__ */ jsxs3("div", { className: "mx-auto flex h-16 max-w-5xl items-center justify-between gap-6 px-4", children: [
+      /* @__PURE__ */ jsxs3("span", { className: "text-lg font-black tracking-tight", children: [
+        "\u2694\uFE0F Meme Battle ",
+        /* @__PURE__ */ jsx4("span", { className: "text-primary", children: "Arena" })
+      ] }),
+      /* @__PURE__ */ jsx4("nav", { "aria-label": "Main", className: "flex items-center gap-1", children: NAV.map((item) => /* @__PURE__ */ jsxs3(
+        "button",
+        {
+          type: "button",
+          onClick: () => onNavigate?.(item.id),
+          "aria-current": active === item.id ? "page" : void 0,
+          className: cn(
+            "rounded-lg px-3 py-2 text-sm font-medium transition-colors",
+            active === item.id ? "bg-primary/10 text-primary" : "text-muted-foreground hover:bg-muted hover:text-foreground"
+          ),
+          children: [
+            /* @__PURE__ */ jsx4("span", { "aria-hidden": true, className: "mr-1.5", children: item.icon }),
+            item.label
+          ]
+        },
+        item.id
+      )) }),
+      userName && /* @__PURE__ */ jsxs3("span", { className: "hidden items-center gap-2 text-sm text-muted-foreground sm:flex", children: [
+        /* @__PURE__ */ jsx4("span", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-primary/15 font-bold text-primary", children: userName[0].toUpperCase() }),
+        userName
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx4("main", { className: "mx-auto max-w-5xl px-4 py-8", children })
+  ] });
+}
+export {
+  AppShell,
+  Button,
+  PageHeader,
+  StatPill,
+  cn
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/cn.ts","../src/button/index.tsx","../src/stat-pill/index.tsx","../src/page-header/index.tsx","../src/app-shell/index.tsx"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","'use client';\n\nimport type { ButtonHTMLAttributes } from 'react';\nimport { cn } from '../lib/cn';\n\nexport type ButtonVariant = 'default' | 'outline' | 'destructive' | 'ghost';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n}\n\nconst variantClasses: Record<ButtonVariant, string> = {\n  default: 'bg-primary text-primary-foreground hover:opacity-90',\n  outline: 'border border-border bg-transparent text-foreground hover:bg-muted',\n  destructive: 'bg-destructive text-destructive-foreground hover:opacity-90',\n  ghost: 'bg-transparent text-foreground hover:bg-muted',\n};\n\nconst sizeClasses: Record<ButtonSize, string> = {\n  sm: 'h-8 px-3 text-sm',\n  md: 'h-10 px-4 text-sm',\n  lg: 'h-12 px-6 text-base',\n};\n\nexport function Button({ variant = 'default', size = 'md', className, ...props }: ButtonProps) {\n  return (\n    <button\n      className={cn(\n        'inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors',\n        'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary',\n        'disabled:pointer-events-none disabled:opacity-50',\n        variantClasses[variant],\n        sizeClasses[size],\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n","import { cn } from '../lib/cn';\n\nexport interface StatPillProps {\n  label: string;\n  value: string | number;\n  className?: string;\n}\n\nexport function StatPill({ label, value, className }: StatPillProps) {\n  return (\n    <span className={cn('inline-flex items-center gap-2 rounded-full bg-muted px-3 py-1 text-sm', className)}>\n      <span className=\"text-muted-foreground\">{label}</span>\n      <span className=\"font-semibold tabular-nums\">{value}</span>\n    </span>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '../lib/cn';\n\nexport interface PageHeaderProps {\n  title: string;\n  subtitle?: string;\n  action?: ReactNode;\n  className?: string;\n}\n\nexport function PageHeader({ title, subtitle, action, className }: PageHeaderProps) {\n  return (\n    <div className={cn('mb-8 flex flex-wrap items-end justify-between gap-4', className)}>\n      <div>\n        <h1 className=\"text-2xl font-bold tracking-tight\">{title}</h1>\n        {subtitle && <p className=\"mt-1 text-muted-foreground\">{subtitle}</p>}\n      </div>\n      {action}\n    </div>\n  );\n}\n","'use client';\n\nimport type { ReactNode } from 'react';\nimport { cn } from '../lib/cn';\n\nexport type NavItem = 'arena' | 'upload' | 'leaderboard' | 'my-memes';\n\nexport interface AppShellProps {\n  active: NavItem;\n  userName?: string;\n  onNavigate?: (item: NavItem) => void;\n  children: ReactNode;\n}\n\nconst NAV: { id: NavItem; label: string; icon: string }[] = [\n  { id: 'arena', label: 'Arena', icon: '⚔️' },\n  { id: 'upload', label: 'Upload', icon: '📤' },\n  { id: 'leaderboard', label: 'Leaderboard', icon: '🏆' },\n  { id: 'my-memes', label: 'My Memes', icon: '🗂️' },\n];\n\nexport function AppShell({ active, userName, onNavigate, children }: AppShellProps) {\n  return (\n    <div className=\"color-background min-h-screen\">\n      <header className=\"color-card sticky top-0 z-10 border-b border-border\">\n        <div className=\"mx-auto flex h-16 max-w-5xl items-center justify-between gap-6 px-4\">\n          <span className=\"text-lg font-black tracking-tight\">\n            ⚔️ Meme Battle <span className=\"text-primary\">Arena</span>\n          </span>\n          <nav aria-label=\"Main\" className=\"flex items-center gap-1\">\n            {NAV.map((item) => (\n              <button\n                key={item.id}\n                type=\"button\"\n                onClick={() => onNavigate?.(item.id)}\n                aria-current={active === item.id ? 'page' : undefined}\n                className={cn(\n                  'rounded-lg px-3 py-2 text-sm font-medium transition-colors',\n                  active === item.id\n                    ? 'bg-primary/10 text-primary'\n                    : 'text-muted-foreground hover:bg-muted hover:text-foreground',\n                )}\n              >\n                <span aria-hidden className=\"mr-1.5\">{item.icon}</span>\n                {item.label}\n              </button>\n            ))}\n          </nav>\n          {userName && (\n            <span className=\"hidden items-center gap-2 text-sm text-muted-foreground sm:flex\">\n              <span className=\"flex h-8 w-8 items-center justify-center rounded-full bg-primary/15 font-bold text-primary\">\n                {userName[0].toUpperCase()}\n              </span>\n              {userName}\n            </span>\n          )}\n        </div>\n      </header>\n      <main className=\"mx-auto max-w-5xl px-4 py-8\">{children}</main>\n    </div>\n  );\n}\n"],"mappings":"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","names":["jsx","jsx","jsxs","jsx","jsxs"]}

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@ntrs/core",
+  "version": "0.1.0",
+  "description": "NTRS design system — generic primitives and design tokens shared by every project",
+  "type": "module",
+  "sideEffects": ["**/*.css"],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./tokens.css": "./src/tokens.css"
+  },
+  "files": ["dist", "src/tokens.css"],
+  "scripts": {
+    "build": "tsup",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.6.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
+}

package/src/tokens.css

@@ -0,0 +1,76 @@
+@import "tailwindcss";
+
+/* class-based dark mode for Tailwind v4 (boilerplate §14) */
+@variant dark (.dark &);
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --primary: 262 83% 58%;
+    --primary-foreground: 0 0% 98%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --border: 0 0% 89.8%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 98%;
+    --success: 142 71% 40%;
+    --success-foreground: 0 0% 98%;
+    --gold: 43 96% 50%;
+    --radius: 0.75rem;
+  }
+
+  .dark {
+    --background: 0 0% 5.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 9%;
+    --card-foreground: 0 0% 98%;
+    --primary: 262 83% 66%;
+    --primary-foreground: 0 0% 9%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --border: 0 0% 16.9%;
+    --destructive: 0 62% 52%;
+    --destructive-foreground: 0 0% 98%;
+    --success: 142 60% 45%;
+    --success-foreground: 0 0% 98%;
+    --gold: 43 96% 56%;
+  }
+
+  /* smooth-transition surface utilities (boilerplate convention) */
+  .color-background {
+    background-color: hsl(var(--background));
+    transition: background-color 200ms ease-in-out;
+  }
+  .color-foreground {
+    color: hsl(var(--foreground));
+    transition: color 200ms ease-in-out;
+  }
+  .color-card {
+    background-color: hsl(var(--card));
+    color: hsl(var(--card-foreground));
+    transition: background-color 200ms ease-in-out, color 200ms ease-in-out;
+  }
+}
+
+/* expose tokens as Tailwind utilities: bg-background, text-muted-foreground, border-border, ... */
+@theme inline {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-border: hsl(var(--border));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-success: hsl(var(--success));
+  --color-success-foreground: hsl(var(--success-foreground));
+  --color-gold: hsl(var(--gold));
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 0.25rem);
+}