@q3assets/ui 0.1.0

package/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@q3assets/ui",
+  "version": "0.1.0",
+  "exports": {
+    "./kpi-card": "./src/kpi-card.tsx",
+    "./status-badge": "./src/status-badge.tsx"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "react": "^19",
+    "typescript": "^5"
+  }
+}

package/src/kpi-card.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+interface KpiCardProps {
+  label: string
+  value: number | string
+  subtitle?: string
+  trend?: { value: number; label: string }
+  color?: "default" | "success" | "warning" | "danger"
+}
+
+const colorMap = {
+  default: "text-indigo-400",
+  success: "text-emerald-400",
+  warning: "text-amber-400",
+  danger: "text-red-400",
+}
+
+export function KpiCard({ label, value, subtitle, trend, color = "default" }: KpiCardProps) {
+  return (
+    <div className="rounded-xl border border-[var(--border)] bg-[var(--bg-card)] p-5 transition-colors hover:bg-[var(--bg-card-hover)]">
+      <p className="text-sm text-[var(--text-muted)]">{label}</p>
+      <p className={`mt-1.5 text-3xl font-semibold tracking-tight ${colorMap[color]}`}>{value}</p>
+      {subtitle && <p className="mt-1 text-xs text-[var(--text-muted)]">{subtitle}</p>}
+      {trend && (
+        <p className={`mt-2 text-xs ${trend.value >= 0 ? "text-emerald-400" : "text-red-400"}`}>
+          {trend.value >= 0 ? "\u2191" : "\u2193"} {Math.abs(trend.value)}% {trend.label}
+        </p>
+      )}
+    </div>
+  )
+}

package/src/status-badge.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+const statusStyles: Record<string, string> = {
+  researched: "bg-zinc-800 text-zinc-300",
+  pitched: "bg-blue-900/50 text-blue-300",
+  responded: "bg-cyan-900/50 text-cyan-300",
+  follow_up: "bg-amber-900/50 text-amber-300",
+  booked: "bg-emerald-900/50 text-emerald-300",
+  declined: "bg-red-900/50 text-red-300",
+  completed: "bg-purple-900/50 text-purple-300",
+  tentative: "bg-amber-900/50 text-amber-300",
+  confirmed: "bg-emerald-900/50 text-emerald-300",
+  cancelled: "bg-red-900/50 text-red-300",
+  pending: "bg-zinc-800 text-zinc-300",
+  active: "bg-emerald-900/50 text-emerald-300",
+  inactive: "bg-zinc-800 text-zinc-300",
+}
+
+export function StatusBadge({ status }: { status: string }) {
+  const style = statusStyles[status] || "bg-zinc-800 text-zinc-300"
+  return (
+    <span className={`inline-block rounded-full px-2.5 py-0.5 text-xs font-medium ${style}`}>
+      {status.replace(/_/g, " ")}
+    </span>
+  )
+}

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@q3/tsconfig/base.json",
+  "compilerOptions": {
+    "outDir": "dist"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}