Icon Button

import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

const iconButtonVariants = cva(
  "relative inline-flex shrink-0 items-center justify-center rounded-lg transition-[scale,background-color,color,box-shadow] duration-150 ease-out outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 after:absolute after:top-1/2 after:left-1/2 after:size-10 after:-translate-1/2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        secondary:
          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        outline:
          "bg-card shadow-border hover:shadow-border-hover dark:bg-secondary/30",
        ghost:
          "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
        destructive:
          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
      },
      size: {
        sm: "size-8 rounded-md [&_svg]:size-3.5",
        default: "size-9 [&_svg]:size-4",
        lg: "size-10 [&_svg]:size-5",
      },
    },
    defaultVariants: {
      variant: "ghost",
      size: "default",
    },
  },
);

export interface IconButtonProps
  extends React.ComponentProps<"button">,
    VariantProps<typeof iconButtonVariants> {
  /** Required — icon-only buttons carry no visible text for screen readers. */
  "aria-label": string;
  /** Disables press-scale feedback where the motion would distract. */
  static?: boolean;
}

/**
 * An icon-only button. The accessible name is enforced at the type level,
 * and every size keeps a 40px hit target via an invisible `after:`
 * pseudo-element centered on the visual.
 */
function IconButton({
  className,
  variant,
  size,
  static: isStatic = false,
  ...props
}: IconButtonProps) {
  return (
    <button
      data-slot="icon-button"
      className={cn(
        iconButtonVariants({ variant, size }),
        !isStatic && "active:not-disabled:scale-[0.97]",
        className,
      )}
      {...props}
    />
  );
}

export { IconButton, iconButtonVariants };