"use client";
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { motion, type HTMLMotionProps } from "motion/react";
import { cva, type VariantProps } from "class-variance-authority";
import { springs } from "@/lib/motion";
import { cn } from "@/lib/utils";

const colors = ["primary", "secondary", "tertiary", "accent", "danger", "neutral"] as const;

// Each color role maps to its token family. `neutral` uses surface tokens.
const solid: Record<(typeof colors)[number], string> = {
  primary: "bg-primary text-on-primary",
  secondary: "bg-secondary text-on-secondary",
  tertiary: "bg-tertiary text-on-tertiary",
  accent: "bg-accent text-on-accent",
  danger: "bg-danger text-on-danger",
  neutral: "bg-surface text-on-surface",
};
const soft: typeof solid = {
  primary: "bg-primary-container text-on-primary-container",
  secondary: "bg-secondary-container text-on-secondary-container",
  tertiary: "bg-tertiary-container text-on-tertiary-container",
  accent: "bg-accent-container text-on-accent-container",
  danger: "bg-danger-container text-on-danger-container",
  neutral: "bg-surface-sunken text-on-surface",
};
const text: typeof solid = {
  primary: "text-on-primary-container",
  secondary: "text-on-secondary-container",
  tertiary: "text-on-tertiary-container",
  accent: "text-on-accent-container",
  danger: "text-on-danger-container",
  neutral: "text-on-surface",
};

const buttonVariants = cva(
  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-full font-bold transition-[box-shadow,background-color] duration-150 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-[1.15em] [&_svg]:shrink-0",
  {
    variants: {
      variant: {
        solid: "shadow-clay active:shadow-clay-pressed",
        soft: "shadow-clay-sm active:shadow-clay-pressed",
        outline: "bg-surface shadow-clay-sm ring-2 ring-inset ring-current/25 active:shadow-clay-pressed",
        ghost: "bg-transparent hover:bg-surface-sunken",
      },
      color: Object.fromEntries(colors.map((c) => [c, ""])) as Record<(typeof colors)[number], string>,
      size: {
        sm: "h-9 px-4 text-sm",
        default: "h-11 px-6 text-base",
        lg: "h-14 px-8 text-lg",
        icon: "size-11",
      },
    },
    compoundVariants: colors.flatMap((color) => [
      { variant: "solid" as const, color, className: solid[color] },
      { variant: "soft" as const, color, className: soft[color] },
      { variant: "outline" as const, color, className: text[color] },
      { variant: "ghost" as const, color, className: text[color] },
    ]),
    defaultVariants: { variant: "solid", color: "primary", size: "default" },
  }
);

export interface ButtonProps
  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color">,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean;
}

/** Clay squish: lifts on hover, flattens and spreads when pressed, springs back. */
const press = {
  whileHover: { y: -2 },
  whileTap: { y: 1, scaleY: 0.9, scaleX: 1.05 },
  transition: springs.squish,
};

export function Button({ className, variant, color, size, asChild, ...props }: ButtonProps) {
  const classes = cn(buttonVariants({ variant, color, size }), className);
  if (asChild) {
    // Slot cannot take motion props, so links get the same feel from CSS.
    return <Slot className={cn(classes, "transition-[box-shadow,background-color,translate,scale] hover:-translate-y-0.5 active:translate-y-0.5 active:scale-y-95")} {...props} />;
  }
  const isGhost = variant === "ghost";
  return (
    <motion.button
      className={classes}
      {...(isGhost ? { whileTap: { scale: 0.94 }, transition: springs.squish } : press)}
      {...(props as HTMLMotionProps<"button">)}
    />
  );
}
export { buttonVariants };
Installation
