first commit

web/components/ui/Badge.tsx

@@ -0,0 +1,40 @@
+import { clsx } from "clsx";
+
+type Variant = "success" | "warning" | "danger" | "neutral" | "accent";
+
+interface BadgeProps {
+  variant?: Variant;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const variantClasses: Record<Variant, string> = {
+  success: "bg-success/15 text-success border-success/30",
+  warning: "bg-warning/15 text-warning border-warning/30",
+  danger: "bg-danger/15 text-danger border-danger/30",
+  neutral: "bg-surface-2 text-text-secondary border-border",
+  accent: "bg-accent/15 text-accent border-accent/30",
+};
+
+export function Badge({ variant = "neutral", children, className }: BadgeProps) {
+  return (
+    <span
+      className={clsx(
+        "inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-xs font-medium",
+        variantClasses[variant],
+        className
+      )}
+    >
+      {(variant === "success" || variant === "warning" || variant === "danger") && (
+        <span
+          className={clsx("h-1.5 w-1.5 rounded-full", {
+            "bg-success": variant === "success",
+            "bg-warning": variant === "warning",
+            "bg-danger": variant === "danger",
+          })}
+        />
+      )}
+      {children}
+    </span>
+  );
+}

web/components/ui/Button.tsx

@@ -0,0 +1,75 @@
+import { ButtonHTMLAttributes, forwardRef } from "react";
+import { clsx } from "clsx";
+
+type Variant = "primary" | "secondary" | "danger" | "ghost";
+type Size = "sm" | "md" | "lg";
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: Variant;
+  size?: Size;
+  loading?: boolean;
+}
+
+const variantClasses: Record<Variant, string> = {
+  primary:
+    "bg-accent hover:bg-accent-hover text-white border-transparent",
+  secondary:
+    "bg-surface-2 hover:bg-[#2d3048] text-text-primary border-border",
+  danger:
+    "bg-danger hover:bg-danger-hover text-white border-transparent",
+  ghost:
+    "bg-transparent hover:bg-surface-2 text-text-secondary hover:text-text-primary border-transparent",
+};
+
+const sizeClasses: Record<Size, string> = {
+  sm: "px-3 py-1.5 text-sm",
+  md: "px-4 py-2 text-sm",
+  lg: "px-5 py-2.5 text-base",
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    { variant = "primary", size = "md", loading, className, children, disabled, ...props },
+    ref
+  ) => {
+    return (
+      <button
+        ref={ref}
+        disabled={disabled || loading}
+        className={clsx(
+          "inline-flex items-center gap-2 rounded-lg border font-medium transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2 focus:ring-offset-background disabled:opacity-50 disabled:cursor-not-allowed",
+          variantClasses[variant],
+          sizeClasses[size],
+          className
+        )}
+        {...props}
+      >
+        {loading && (
+          <svg
+            className="animate-spin h-4 w-4"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+          >
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+            />
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+            />
+          </svg>
+        )}
+        {children}
+      </button>
+    );
+  }
+);
+
+Button.displayName = "Button";

web/components/ui/Card.tsx

@@ -0,0 +1,37 @@
+import { clsx } from "clsx";
+import { HTMLAttributes } from "react";
+
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  padding?: boolean;
+}
+
+export function Card({ className, padding = true, children, ...props }: CardProps) {
+  return (
+    <div
+      className={clsx(
+        "rounded-xl border border-border bg-surface",
+        padding && "p-6",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function CardHeader({ className, children, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={clsx("mb-4 flex items-center justify-between", className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+export function CardTitle({ className, children, ...props }: HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h2 className={clsx("text-lg font-semibold text-text-primary", className)} {...props}>
+      {children}
+    </h2>
+  );
+}

web/components/ui/Table.tsx

@@ -0,0 +1,67 @@
+import { clsx } from "clsx";
+import { HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from "react";
+
+export function Table({ className, children, ...props }: HTMLAttributes<HTMLTableElement>) {
+  return (
+    <div className="overflow-x-auto">
+      <table
+        className={clsx("w-full border-collapse text-sm", className)}
+        {...props}
+      >
+        {children}
+      </table>
+    </div>
+  );
+}
+
+export function Thead({ className, children, ...props }: HTMLAttributes<HTMLTableSectionElement>) {
+  return (
+    <thead className={clsx("border-b border-border", className)} {...props}>
+      {children}
+    </thead>
+  );
+}
+
+export function Tbody({ className, children, ...props }: HTMLAttributes<HTMLTableSectionElement>) {
+  return (
+    <tbody className={clsx("divide-y divide-border", className)} {...props}>
+      {children}
+    </tbody>
+  );
+}
+
+export function Tr({ className, children, ...props }: HTMLAttributes<HTMLTableRowElement>) {
+  return (
+    <tr
+      className={clsx("transition-colors hover:bg-surface-2/50", className)}
+      {...props}
+    >
+      {children}
+    </tr>
+  );
+}
+
+export function Th({ className, children, ...props }: ThHTMLAttributes<HTMLTableCellElement>) {
+  return (
+    <th
+      className={clsx(
+        "px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-text-secondary",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </th>
+  );
+}
+
+export function Td({ className, children, ...props }: TdHTMLAttributes<HTMLTableCellElement>) {
+  return (
+    <td
+      className={clsx("px-4 py-3 text-text-primary", className)}
+      {...props}
+    >
+      {children}
+    </td>
+  );
+}

web/components/ui/index.ts

@@ -0,0 +1,4 @@
+export { Button } from "./Button";
+export { Badge } from "./Badge";
+export { Card, CardHeader, CardTitle } from "./Card";
+export { Table, Thead, Tbody, Tr, Th, Td } from "./Table";