`asChild` pattern in React

Button.tsx

import { clsx } from "clsx";
import { type ButtonHTMLAttributes } from "react";
import { Slot } from "./Slot";

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
	asChild?: boolean;
	children: React.ReactNode;
}

export const Button = ({ asChild = false, ...props }: ButtonProps) => {
	const Comp = asChild ? Slot : "button";

	return (
		<Comp
			{...props}
			className={clsx(
				"………",
				props.className,
			)}
		/>
	);
};

Slot.tsx

// https://www.jacobparis.com/content/react-as-child

import clsx from "clsx";
import { isValidElement, cloneElement, Children } from "react";

export const Slot = ({
	children,
	...props
}: React.HTMLAttributes<HTMLElement> & {
	children?: React.ReactNode;
}) => {
	if (isValidElement(children)) {
		// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
		return cloneElement(children, {
			...props,
			...children.props,
			// eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
			className: clsx(children.props.className, props.className),
		});
	}
	if (Children.count(children) > 1) {
		Children.only(null);
	}
	return null;
};