fix: UI refactor

src/components/ui/Badge.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { cn } from "../../lib/utils";
+
+export type BadgeVariant =
+  | "default"
+  | "success"
+  | "warning"
+  | "danger"
+  | "info";
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  variant?: BadgeVariant;
+  dot?: boolean;
+}
+
+const variantClasses: Record<BadgeVariant, string> = {
+  default: "bg-gray-100 text-gray-700",
+  success: "bg-green-100 text-green-700",
+  warning: "bg-amber-100 text-amber-700",
+  danger: "bg-red-100 text-red-700",
+  info: "bg-blue-100 text-blue-700",
+};
+
+const dotClasses: Record<BadgeVariant, string> = {
+  default: "bg-gray-500",
+  success: "bg-green-500",
+  warning: "bg-amber-500",
+  danger: "bg-red-500",
+  info: "bg-blue-500",
+};
+
+export function Badge({
+  variant = "default",
+  dot = false,
+  className,
+  children,
+  ...rest
+}: BadgeProps) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium",
+        variantClasses[variant],
+        className
+      )}
+      {...rest}
+    >
+      {dot && (
+        <span
+          className={cn("h-1.5 w-1.5 shrink-0 rounded-full", dotClasses[variant])}
+          aria-hidden="true"
+        />
+      )}
+      {children}
+    </span>
+  );
+}

src/components/ui/Button.tsx

@@ -0,0 +1,110 @@
+import React from "react";
+import { cn } from "../../lib/utils";
+
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
+export type ButtonSize = "sm" | "md" | "lg";
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  loading?: boolean;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+}
+
+const variantClasses: Record<ButtonVariant, string> = {
+  primary:
+    "bg-indigo-600 text-white hover:bg-indigo-700 focus-visible:ring-indigo-500 disabled:bg-indigo-300",
+  secondary:
+    "bg-white text-gray-700 border border-gray-300 hover:bg-gray-50 focus-visible:ring-gray-400 disabled:text-gray-400",
+  ghost:
+    "bg-transparent text-gray-600 hover:bg-gray-100 focus-visible:ring-gray-400 disabled:text-gray-300",
+  danger:
+    "bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-500 disabled:bg-red-300",
+};
+
+const sizeClasses: Record<ButtonSize, string> = {
+  sm: "px-3 py-1.5 text-sm gap-1.5",
+  md: "px-4 py-2 text-sm gap-2",
+  lg: "px-6 py-3 text-base gap-2",
+};
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      variant = "primary",
+      size = "md",
+      loading = false,
+      leftIcon,
+      rightIcon,
+      className,
+      children,
+      disabled,
+      ...rest
+    },
+    ref
+  ) => {
+    const isDisabled = disabled || loading;
+
+    return (
+      <button
+        ref={ref}
+        disabled={isDisabled}
+        className={cn(
+          "inline-flex items-center justify-center rounded-lg font-medium",
+          "transition-colors duration-150",
+          "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+          "disabled:cursor-not-allowed",
+          variantClasses[variant],
+          sizeClasses[size],
+          className
+        )}
+        {...rest}
+      >
+        {loading ? (
+          <Spinner size={size} />
+        ) : (
+          leftIcon && <span className="shrink-0">{leftIcon}</span>
+        )}
+        {children}
+        {!loading && rightIcon && (
+          <span className="shrink-0">{rightIcon}</span>
+        )}
+      </button>
+    );
+  }
+);
+
+Button.displayName = "Button";
+
+// ---------------------------------------------------------------------------
+// Internal spinner
+// ---------------------------------------------------------------------------
+
+function Spinner({ size }: { size: ButtonSize }) {
+  const dim = size === "sm" ? "h-3.5 w-3.5" : size === "lg" ? "h-5 w-5" : "h-4 w-4";
+  return (
+    <svg
+      className={cn("animate-spin", dim)}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+    >
+      <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>
+  );
+}

src/components/ui/Card.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import { cn } from "../../lib/utils";
+
+// ---------------------------------------------------------------------------
+// Card
+// ---------------------------------------------------------------------------
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Remove default padding */
+  noPadding?: boolean;
+}
+
+export function Card({ noPadding = false, className, children, ...rest }: CardProps) {
+  return (
+    <div
+      className={cn(
+        "rounded-2xl border border-gray-200 bg-white shadow-sm",
+        !noPadding && "p-6",
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// CardHeader
+// ---------------------------------------------------------------------------
+
+export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  title: React.ReactNode;
+  subtitle?: React.ReactNode;
+  action?: React.ReactNode;
+}
+
+export function CardHeader({ title, subtitle, action, className, ...rest }: CardHeaderProps) {
+  return (
+    <div
+      className={cn("flex items-start justify-between gap-4", className)}
+      {...rest}
+    >
+      <div className="min-w-0">
+        <h3 className="truncate text-base font-semibold text-gray-900">
+          {title}
+        </h3>
+        {subtitle && (
+          <p className="mt-0.5 truncate text-sm text-gray-500">{subtitle}</p>
+        )}
+      </div>
+      {action && <div className="shrink-0">{action}</div>}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// CardBody
+// ---------------------------------------------------------------------------
+
+export interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function CardBody({ className, children, ...rest }: CardBodyProps) {
+  return (
+    <div className={cn("mt-4", className)} {...rest}>
+      {children}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// CardFooter
+// ---------------------------------------------------------------------------
+
+export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function CardFooter({ className, children, ...rest }: CardFooterProps) {
+  return (
+    <div
+      className={cn(
+        "mt-4 flex items-center justify-end gap-3 border-t border-gray-100 pt-4",
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}

src/components/ui/Input.tsx

@@ -0,0 +1,103 @@
+import React from "react";
+import { cn } from "../../lib/utils";
+
+export interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+  label?: string;
+  hint?: string;
+  error?: string;
+  leftAddon?: React.ReactNode;
+  rightAddon?: React.ReactNode;
+  size?: "sm" | "md" | "lg";
+}
+
+const sizeClasses = {
+  sm: "h-8 px-3 text-sm",
+  md: "h-10 px-3.5 text-sm",
+  lg: "h-12 px-4 text-base",
+};
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      label,
+      hint,
+      error,
+      leftAddon,
+      rightAddon,
+      size = "md",
+      className,
+      id,
+      ...rest
+    },
+    ref
+  ) => {
+    const inputId = id ?? (label ? label.toLowerCase().replace(/\s+/g, "-") : undefined);
+
+    return (
+      <div className="flex flex-col gap-1">
+        {label && (
+          <label
+            htmlFor={inputId}
+            className="text-sm font-medium text-gray-700"
+          >
+            {label}
+          </label>
+        )}
+
+        <div className="relative flex items-center">
+          {leftAddon && (
+            <span className="pointer-events-none absolute left-3 text-gray-400">
+              {leftAddon}
+            </span>
+          )}
+
+          <input
+            ref={ref}
+            id={inputId}
+            className={cn(
+              "w-full rounded-lg border bg-white text-gray-900 placeholder-gray-400",
+              "transition-colors duration-150",
+              "focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500",
+              "disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-400",
+              error
+                ? "border-red-400 focus:ring-red-400 focus:border-red-400"
+                : "border-gray-300",
+              sizeClasses[size],
+              leftAddon && "pl-9",
+              rightAddon && "pr-9",
+              className
+            )}
+            aria-invalid={!!error}
+            aria-describedby={
+              error
+                ? `${inputId}-error`
+                : hint
+                ? `${inputId}-hint`
+                : undefined
+            }
+            {...rest}
+          />
+
+          {rightAddon && (
+            <span className="pointer-events-none absolute right-3 text-gray-400">
+              {rightAddon}
+            </span>
+          )}
+        </div>
+
+        {error ? (
+          <p id={`${inputId}-error`} className="text-xs text-red-500" role="alert">
+            {error}
+          </p>
+        ) : hint ? (
+          <p id={`${inputId}-hint`} className="text-xs text-gray-500">
+            {hint}
+          </p>
+        ) : null}
+      </div>
+    );
+  }
+);
+
+Input.displayName = "Input";