Dynamic Button

import {
  AnimatePresence,
  type HTMLMotionProps,
  motion,
  useReducedMotion,
} from "motion/react";
import {
  forwardRef,
  type Key,
  type ReactNode,
  useCallback,
  useImperativeHandle,
  useLayoutEffect,
  useRef,
  useState,
	} from "react";
	
	type DynamicButtonVariant = "primary" | "secondary";
	
	const uiEaseOut = [0.23, 1, 0.32, 1] as const;
	
	export type DynamicButtonProps = Omit<
	  HTMLMotionProps<"button">,
  "animate" | "children" | "initial" | "ref" | "transition"
> & {
  children: string;
  icon?: ReactNode;
  stateKey?: Key;
  variant?: DynamicButtonVariant;
  width?: "content" | "full";
};

const buttonClasses: Record<DynamicButtonVariant, string> = {
  primary: "border-neutral-950 bg-neutral-950 text-white hover:bg-neutral-800",
  secondary:
    "border-neutral-200 bg-white text-neutral-950 hover:border-neutral-300 hover:bg-neutral-50",
};

function getButtonClassName({
  className,
  variant = "primary",
}: {
  className?: string;
  variant?: DynamicButtonVariant;
}) {
  return [
    "inline-flex h-7 cursor-pointer items-center justify-center gap-1.5 rounded-lg border px-2 text-sm font-medium transition-colors",
    buttonClasses[variant],
    className,
  ]
    .filter(Boolean)
    .join(" ");
}

export const DynamicButton = forwardRef<HTMLButtonElement, DynamicButtonProps>(
  function DynamicButton(
    {
      children,
      className,
      icon,
      stateKey,
      type = "button",
      variant = "primary",
      width = "content",
      ...props
    },
    forwardedRef,
  ) {
    const shouldReduceMotion = useReducedMotion();
    const buttonRef = useRef<HTMLButtonElement>(null);
    const measureRef = useRef<HTMLSpanElement>(null);
    const measurementSignatureRef = useRef("");
    const [measuredWidth, setMeasuredWidth] = useState<number | null>(null);
    const iconKey = stateKey ?? children;
    const measurementSignature = [
      children,
      className,
      icon ? "icon" : "no-icon",
      stateKey,
      variant,
    ].join("\0");
	    const shouldMeasureWidth = width === "content";
	    const widthTransition = shouldReduceMotion
	      ? { duration: 0 }
	      : { bounce: 0, duration: 0.26, type: "spring" as const };
	    const contentTransition = {
	      duration: shouldReduceMotion ? 0.16 : 0.18,
	      ease: uiEaseOut,
	    };
	    const contentVisible = { opacity: 1, transform: "translateY(0px)" };
	    const contentInitial = shouldReduceMotion
	      ? { opacity: 0, transform: "translateY(0px)" }
	      : { opacity: 0, transform: "translateY(8px)" };
	    const contentExit = shouldReduceMotion
	      ? { opacity: 0, transform: "translateY(0px)" }
	      : { opacity: 0, transform: "translateY(-8px)" };

    useImperativeHandle(
      forwardedRef,
      () => buttonRef.current as HTMLButtonElement,
    );

    const syncWidth = useCallback(() => {
      const button = buttonRef.current;
      const measure = measureRef.current;

      if (!button || !measure || !shouldMeasureWidth) {
        return;
      }

      const styles = window.getComputedStyle(button);
      const horizontalPadding =
        Number.parseFloat(styles.paddingLeft) +
        Number.parseFloat(styles.paddingRight) +
        Number.parseFloat(styles.borderLeftWidth) +
        Number.parseFloat(styles.borderRightWidth);
      const nextWidth = Math.ceil(measure.scrollWidth + horizontalPadding);

      setMeasuredWidth((currentWidth) =>
        currentWidth === nextWidth ? currentWidth : nextWidth,
      );
    }, [shouldMeasureWidth]);

    useLayoutEffect(() => {
      const measure = measureRef.current;

      if (!measure || !shouldMeasureWidth) {
        setMeasuredWidth(null);
        return;
      }

      syncWidth();

      const observer = new ResizeObserver(syncWidth);
      observer.observe(measure);
      window.addEventListener("resize", syncWidth);

      return () => {
        observer.disconnect();
        window.removeEventListener("resize", syncWidth);
      };
    }, [shouldMeasureWidth, syncWidth]);

    useLayoutEffect(() => {
      if (measurementSignatureRef.current === measurementSignature) {
        return;
      }

      measurementSignatureRef.current = measurementSignature;
      syncWidth();
    }, [measurementSignature, syncWidth]);

    return (
      <motion.button
        {...props}
        animate={
          width === "content" ? { width: measuredWidth ?? "auto" } : undefined
        }
	        className={getButtonClassName({
	          className: [
	            "relative overflow-hidden whitespace-nowrap",
	            "transition-[color,background-color,border-color,box-shadow,transform] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] active:scale-[0.97]",
	            width === "full" ? "w-full" : "",
	            className,
	          ]
            .filter(Boolean)
            .join(" "),
          variant,
	        })}
	        initial={false}
	        ref={buttonRef}
	        transition={width === "content" ? { width: widthTransition } : undefined}
	        type={type}
	      >
        <span className="relative inline-flex items-center gap-1.5">
          {icon ? (
            <span className="relative inline-grid size-[15px] shrink-0 overflow-hidden">
	              <AnimatePresence initial={false} mode="popLayout">
	                <motion.span
	                  animate={contentVisible}
	                  className="col-start-1 row-start-1 flex size-[15px] items-center justify-center"
	                  exit={contentExit}
	                  initial={contentInitial}
	                  key={iconKey}
	                  transition={contentTransition}
	                >
                  {icon}
                </motion.span>
              </AnimatePresence>
            </span>
          ) : null}

          <span className="relative inline-grid overflow-hidden">
	            <AnimatePresence initial={false} mode="popLayout">
	              <motion.span
	                animate={contentVisible}
	                className="col-start-1 row-start-1 block"
	                exit={contentExit}
	                initial={contentInitial}
	                key={children}
	                transition={contentTransition}
	              >
                {children}
              </motion.span>
            </AnimatePresence>
          </span>
        </span>
        <span
          aria-hidden="true"
          className="pointer-events-none absolute inline-flex items-center gap-1.5 opacity-0"
          ref={measureRef}
        >
          {icon ? (
            <span className="flex size-[15px] shrink-0 items-center justify-center">
              {icon}
            </span>
          ) : null}
          <span>{children}</span>
        </span>
      </motion.button>
    );
  },
);