Idea, add polymorphic components & tsx export

[thefubon]

import { tv } from 'tailwind-variants'

const button = tv({
  base: "font-medium inline-flex items-center",
  variants: {
    variant: {
      default: "bg-white border hover:bg-gray-50",
      filled: "bg-light-primary hover:bg-light-hover-primary text-white",
      light: "bg-light-primary/10 hover:bg-light-hover-primary/[0.12] text-light-primary",
      outline: "bg-white hover:bg-light-primary/5 border border-light-primary text-light-primary",
      subtle: "bg-white hover:bg-light-hover-primary/[0.12] text-light-primary",
      transparent: "bg-white text-light-primary",
      white: "bg-white hover:bg-gray-50 text-light-primary",
    },
    size: {
      xs: "px-3 h-7 text-xs",
      sm: "px-4 h-8 text-sm",
      md: "px-5 h-9 text-base",
      lg: "px-6 h-10 text-lg",
      xl: "px-7 h-11 text-xl",
      '2xl': "px-8 h-12 text-xl",
    },
    radius: {
      xs: "rounded-sm",
      sm: "rounded",
      md: "rounded-md",
      lg: "rounded-lg",
      xl: "rounded-xl",
      '2xl': "rounded-2xl",
      full: "rounded-full",
    },
    fullWidth: {
      true: "w-full"
    },
  },
  defaultVariants: {
    variant: "filled",
    size: "sm",
    radius: "sm",
  },
});

export default function Button({as, ...props}:any) {
  const Component = as || "button";

  return (
    <>
      <Component className={button(props)} {...props}>
        {props.children}
      </Component>
    </>
  )
};