Convenient way to split cva / other props

[CGamesPlay]

This comes up every time I use CVA in a new project. I have a low-level component like Button, and it accepts come CVA props, HTML props, and custom props. It would be great to have an entry point into CVA that returned the computed class as well as the props that were unused. It could look something like this:

import { cva, splitProps } from "cva";

const button = cva({
  base: "rounded border font-semibold",
  variants: {
    intent: {
      primary: "border-transparent bg-blue-500 text-white hover:bg-blue-600",
      secondary: "border-gray-400 bg-white text-gray-800 hover:bg-gray-100",
    },
    size: {
      small: "px-2 py-1 text-sm",
      medium: "px-4 py-2 text-base",
    },
  },
  defaultVariants: {
    intent: "primary",
    size: "medium",
  },
});


splitProps(button, { intent: "secondary", type: "submit", onClick: () => {} });
// => [ "font-semibold border rounded ...", { type: "submit", onClick: () => {} } ]

// Alternative API, no opinion on which is better:
// button.splitProps({ intent: "secondary", type: "submit", onClick: () => {} })

This could be used in React like so:

type ButtonProps = VariantProps<typeof Button> &
  React.ComponentProps<"button"> & { analyticsTag: string };

const Button: React.FC<ButtonProps> = (props) => {
  const [className, { analyticsTag, onClick, ...rest }] = splitProps(
    button,
    props,
  );
  return (
    <button
      {...rest}
      className={className}
      onClick={analyticsHandler.bind(analyticsTag, onClick)}
    />
  );
};

The version I have is implemented as an HOC for React, but the gist is here: cva.tsx

Update: I made a different version which might be suitable for inclusion in the core library. It is a top-level method, so that tree-shaking would remove it. cva.tsx