apps/web/src/components/ui/button.tsx

import * as React from "react";
import { cn } from "@/lib/utils";

export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
  variant?: "default" | "ghost" | "outline" | "danger";
  size?: "sm" | "md" | "lg";
};

const base =
  "inline-flex items-center justify-center rounded-full font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ember/70 disabled:opacity-50";

const variants: Record<string, string> = {
  default: "bg-ink text-white hover:bg-ink/90",
  ghost: "bg-transparent text-ink hover:bg-black/5",
  outline: "border border-ink/20 text-ink hover:bg-black/5",
  danger: "bg-red-600 text-white hover:bg-red-500",
};

const sizes: Record<string, string> = {
  sm: "h-9 px-4 text-sm",
  md: "h-11 px-6 text-sm",
  lg: "h-12 px-8 text-base",
};

export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant = "default", size = "md", ...props }, ref) => (
    <button ref={ref} className={cn(base, variants[variant], sizes[size], className)} {...props} />
  )
);
Button.displayName = "Button";