function for oneliners?

[Venipa]

I've made a helper function a few days ago and wondered if something like this could be implemented in a seperate exported function besides "cva"

import { cva, VariantProps } from "class-variance-authority";
import { ReactElement } from "react";
type CreateCVAProps<T> = Parameters<typeof cva<T>>;
export function createCVA<P = {}, T = any>(base?: CreateCVAProps<T>[0], config?: CreateCVAProps<T>[1]) {
  const baseClassName = cva(base, config);
  type cxProps = VariantProps<typeof baseClassName>;
  type ComponentProps = P & cxProps;
  return function (this: any, element: <P2 = {}>(prop: ComponentProps & P2 & { className: string }) => ReactElement<P, any>) {
    return function (props: ComponentProps) {
      return element({ ...props, className: baseClassName(props as any) });
    }
  }
}

Usage

// some element to be reused
export const SomeElement = createCVA<{ key: string }>(
  'bg-white overflow-hidden rounded-lg shadow-lg',
  {
    variants: {
      intent: {
        outline: 'border border-gray-200 shadow-none',
      },
      size: {
        md: 'px-2 h-10',
      },
    },
    defaultVariants: {
      intent: 'outline',
      size: 'md',
    },
  }
)(({ className, key, ...props }) => {
  return <Select.Content { ...{ ...props, className, key } } />;
});