import { klassed } from "@klass/react";

const Button = klassed("button", {
  base: "button--base",
  variants: {
    size: {
      sm: "button--size-sm",
      md: "button--size-md",
      lg: "button--size-lg",
    },
    loading: {
      true: "button--loading-true",
      false: "button--loading-false",
    },
    className: {
      will: "not-work",
    },
  },
  defaultVariants: {
    // size: "md",
    // loading: false,
  },
});

function App() {
  return (
    <div>
      <Button size="md" loading className="Extra classes">
        klassed button
      </Button>
    </div>
  );
}

Button.klass();
// "button--base"

Button.klass({ size: "sm", loading: true } /*, "Extra classes" */);
// "button--base button--size-sm button--loading-true"

Button.klass.variant.size("sm");
// button--size-sm
Button.klass.variant.loading(true);
// button--loading-true