Sweep Button

npm install motion clsx tailwind-merge

import { clsx, type ClassValue } from "clsx";
import { extendTailwindMerge } from "tailwind-merge";

/* tailwind-merge must know the site's type scale (globals.css) is a font size, not a text color — otherwise
   cn("text-h6 text-muted-foreground") drops text-h6. */
const twMerge = extendTailwindMerge({
  extend: { classGroups: { "font-size": [{ text: ["display", "h1", "h2", "h3", "h4", "h5", "h6"] }] } },
});

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

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

/*
 * Sweep Button — a label box and an arrow box two pixels apart. On hover and on keyboard focus a fill sweeps across
 * the label box from the left, the label turns light, the gap closes and the inner corners go square so the two boxes
 * become one block, and the arrow turns 45° (from the Ciketo "Button/Primary"). Without the arrow it is the label box
 * alone, with the sweep.
 *
 * It is plain CSS: no animation library, no JavaScript, so it works as it is on a server page and without scripts.
 * Framer's spring (bounce 0, 0.4s) is approximated by cubic-bezier(0.22, 1, 0.36, 1) over 400 ms — the curve Ciketo's
 * own Next.js edition uses for its width changes; a critically damped spring has that shape. With reduced motion the
 * state simply changes, with no sweep.
 *
 * Improvement over Ciketo, which fades the label's colour and so passes through light text on a light box half way:
 * the light label is a second copy, clipped by the same edge as the fill, so the text changes colour exactly where the
 * sweep passes. The copy is aria-hidden: the label is read once.
 */

const ease = "duration-400 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none";

const sizes = {
  sm: { label: "h-8 px-4 text-xs", arrow: "size-8" },
  default: { label: "h-9 px-5 text-sm", arrow: "size-9" },
  lg: { label: "h-11 px-7 text-base", arrow: "size-11" },
} as const;

type Common = {
  size?: keyof typeof sizes;
  /** The arrow box beside the label. Without it the button is the label box alone. */
  arrow?: boolean;
  className?: string;
  children?: React.ReactNode;
};

export type SweepButtonProps =
  | (Common & { href: string } & Omit<React.ComponentProps<"a">, keyof Common | "href">)
  | (Common & { href?: undefined } & Omit<React.ComponentProps<"button">, keyof Common>);

export function SweepButton({ size = "default", arrow = true, className, children, ...props }: SweepButtonProps) {
  const s = sizes[size];

  const content = (
    <>
      <span
        className={cn(
          "relative flex items-center justify-center overflow-hidden rounded-md bg-secondary font-medium whitespace-nowrap text-secondary-foreground transition-[border-radius]",
          arrow && "group-hover:rounded-r-none group-focus-visible:rounded-r-none",
          s.label,
          ease,
        )}
      >
        {children}
        {/* The fill and the light label are one layer, so they share an edge. */}
        <span
          aria-hidden
          className={cn(
            "absolute inset-0 flex items-center justify-center bg-primary px-[inherit] text-primary-foreground transition-[clip-path]",
            "[clip-path:inset(0_100%_0_0)] group-hover:[clip-path:inset(0)] group-focus-visible:[clip-path:inset(0)]",
            ease,
          )}
        >
          {children}
        </span>
      </span>
      {arrow && (
        <span
          aria-hidden
          className={cn(
            "ml-0.5 grid shrink-0 place-items-center rounded-md bg-secondary text-secondary-foreground transition-[margin,border-radius]",
            "group-hover:ml-0 group-hover:rounded-l-none group-focus-visible:ml-0 group-focus-visible:rounded-l-none",
            s.arrow,
            ease,
          )}
        >
          <svg
            viewBox="0 0 16 16"
            fill="none"
            stroke="currentColor"
            strokeWidth={1.5}
            strokeLinecap="round"
            strokeLinejoin="round"
            className={cn(
              "size-4 transition-transform group-hover:rotate-45 group-focus-visible:rotate-45",
              ease,
            )}
          >
            <path d="M4.5 11.5l7-7M5.5 4.5h6v6" />
          </svg>
        </span>
      )}
    </>
  );

  const classes = cn(
    "group inline-flex shrink-0 cursor-pointer items-stretch rounded-md outline-none select-none",
    "focus-visible:ring-[3px] focus-visible:ring-ring/50",
    className,
  );

  if (props.href !== undefined) {
    const { href, ...rest } = props;
    const external = /^https?:\/\//.test(href);
    return (
      <Link href={href} {...(external ? { target: "_blank", rel: "noopener noreferrer" } : {})} {...rest} className={classes}>
        {content}
      </Link>
    );
  }

  const { type = "button", ...rest } = props as React.ComponentProps<"button">;
  return (
    <button type={type} {...rest} className={cn(classes, "disabled:pointer-events-none disabled:opacity-50")}>
      {content}
    </button>
  );
}