Hover fill

import { useState, type ReactNode } from 'react';
import { motion, useReducedMotion } from 'motion/react';

const EASE = [0.23, 1, 0.32, 1] as const;
// The dot's slot and the arrow's slot are the same width, so the label slides
// exactly one slot and the button never changes size.
const SLOT = 26;

export function HoverFillButton({
  children,
  onClick
}: {
  children: ReactNode;
  onClick?: () => void;
}) {
  const [active, setActive] = useState(false);
  const reduceMotion = useReducedMotion();
  const transition = reduceMotion
    ? { duration: 0.15 }
    : { duration: 0.45, ease: EASE };
  const slide = active && !reduceMotion;

  return (
    <button
      type='button'
      onClick={onClick}
      onPointerEnter={(event) => setActive(event.pointerType === 'mouse')}
      onPointerLeave={() => setActive(false)}
      onFocus={(event) =>
        setActive(event.currentTarget.matches(':focus-visible'))
      }
      onBlur={() => setActive(false)}
      className='relative isolate flex h-14 items-center overflow-hidden rounded-full border px-7 text-lg font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring'
    >
      {/* A circle centered on the dot, big enough to cover the farthest corner. */}
      <motion.span
        aria-hidden
        className='absolute top-1/2 left-[33px] -z-10 -mt-[320px] -ml-[320px] size-[640px] rounded-full bg-foreground'
        initial={false}
        animate={
          reduceMotion ? { opacity: active ? 1 : 0 } : { scale: active ? 1 : 0 }
        }
        transition={transition}
      />
      <span aria-hidden className='shrink-0' style={{ width: SLOT }}>
        <span className='block size-2.5 rounded-full bg-foreground' />
      </span>
      <motion.span
        initial={false}
        animate={{ x: slide ? -SLOT : 0 }}
        transition={transition}
        className={`transition-colors duration-200 ${active ? 'text-background' : 'text-foreground'}`}
      >
        {children}
      </motion.span>
      <motion.svg
        viewBox='0 0 16 16'
        aria-hidden
        className='absolute top-1/2 right-7 -mt-2.5 size-5 text-background'
        fill='none'
        stroke='currentColor'
        strokeWidth={1.8}
        strokeLinecap='round'
        initial={false}
        animate={{ opacity: slide ? 1 : 0, x: slide ? 0 : -10 }}
        transition={transition}
      >
        <path d='M3 8h10M9 4l4 4-4 4' />
      </motion.svg>
    </button>
  );
}