Expand 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));
}

"use client";

import * as React from "react";
import Link from "next/link";
import { motion, type HTMLMotionProps, type Transition } from "motion/react";
import { cn } from "@/lib/utils";

/*
 * Expand Button — a round icon button that grows to show its label when it is pointed at (from the Compose Digi "Button/Social").
 * At rest it is a circle with an outline and the icon; on hover, and on keyboard focus, it widens to fit the label beside the
 * icon while a fill fades in under it and the icon and label turn to the fill's text colour.
 *
 * Framer's spring drives the width, the padding and the fill: stiffness 500, damping 60, mass 1 (over-damped, no overshoot,
 * about 0.65 s), so the growth is calm; leaving mirrors it. The colours change at once, as in the template.
 *
 * The label is always in the markup, clipped while the button is closed, so the button is named by it: there is no second
 * name to keep in step. Pass `href` to render a Next.js link; external http(s) links open in a new tab.
 * Touch has no hover, so on a touch screen it is just the icon button: a tap follows the link.
 */

const grow: Transition = { type: "spring", stiffness: 500, damping: 60, mass: 1 };

/* The height is the closed width, so the closed button is a circle. `pad` centres the 16px icon in it. */
const sizes = {
  sm: { box: 32, pad: 8 },
  default: { box: 36, pad: 10 },
  lg: { box: 40, pad: 12 },
} as const;

type Common = {
  /** The icon, 16px: an svg, or a component that takes its size from a `size-4` class. */
  icon: React.ReactNode;
  size?: keyof typeof sizes;
  className?: string;
  /** The label: shown when the button is open, and the button's accessible name. */
  children: React.ReactNode;
};

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

const MotionLink = motion.create(Link);

export function ExpandButton({ icon, size = "default", className, children, ...props }: ExpandButtonProps) {
  const { box, pad } = sizes[size];
  /* Keyboard focus opens it the way a pointer does; a click that leaves focus on it does not keep it open. */
  const [focused, setFocused] = React.useState(false);
  const { onFocus, onBlur } = props as { onFocus?: React.FocusEventHandler<HTMLElement>; onBlur?: React.FocusEventHandler<HTMLElement> };

  const motionProps = {
    initial: false,
    animate: focused ? "open" : "rest",
    whileHover: "open",
    variants: {
      rest: { width: box, paddingLeft: pad, paddingRight: pad },
      open: { width: "auto", paddingLeft: 12, paddingRight: 12 },
    },
    transition: grow,
    onFocus: (event: React.FocusEvent<HTMLElement>) => {
      onFocus?.(event);
      setFocused(event.currentTarget.matches(":focus-visible"));
    },
    onBlur: (event: React.FocusEvent<HTMLElement>) => {
      onBlur?.(event);
      setFocused(false);
    },
    /* The colours turn at once. The hover rule is only for a pointer that can hover: a touch screen keeps :hover after a tap,
       which would leave a light icon on a fill that never came. */
    className: cn(
      "relative inline-flex shrink-0 cursor-pointer items-center gap-2.5 overflow-hidden rounded-full text-sm font-medium whitespace-nowrap text-foreground outline-none select-none",
      "focus-visible:text-primary-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 [@media(hover:hover)]:hover:text-primary-foreground",
      className,
    ),
    style: { height: box },
  } as const;

  /* The outline is its own layer, so it takes no room from the circle: the icon sits exactly in the middle at rest. */
  const content = (
    <>
      <motion.span aria-hidden className="absolute inset-0 bg-primary" variants={{ rest: { opacity: 0 }, open: { opacity: 1 } }} transition={grow} />
      <span aria-hidden className="pointer-events-none absolute inset-0 rounded-full border border-foreground" />
      <span aria-hidden className="relative flex size-4 shrink-0 items-center justify-center [&_svg]:size-4">
        {icon}
      </span>
      <span className="relative">{children}</span>
    </>
  );

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

  const { type = "button", ...button } = props as HTMLMotionProps<"button">;
  return (
    <motion.button type={type} {...button} {...motionProps}>
      {content}
    </motion.button>
  );
}