klass

npm install @klass/core @klass/preact

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

const Button = klassed(
  "button",
  {
    base: "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded tracking-wide transition duration-300 focus-visible:outline-none disabled:cursor-not-allowed disabled:shadow-none",
    variants: {
      color: {
        red: "bg-red-500 hover:bg-red-600 focus:bg-red-700 disabled:border-red-300 disabled:bg-red-300 text-white",
        green: "bg-green-500 hover:bg-green-600 focus:bg-green-700 disabled:border-green-300 disabled:bg-green-300 text-white",
        blue: "bg-blue-500 hover:bg-blue-600 focus:bg-blue-700 disabled:border-blue-300 disabled:bg-blue-300 text-white",
      },
      size: {
        sm: "h-10 px-4 text-sm font-medium",
        md: "h-11 px-5 text-base font-medium",
        lg: "h-12 px-6 text-lg font-bold",
      },
    },
    defaults: {
      color: "green",
      size: "md",
    },
  },
  {
    dp: {
      type: "button",
    },
  },
);

import { reklassed } from "@klass/preact";

const Box = reklassed("div", {
  conditions: [
    {
      base: "",
      sm: "sm:",
      md: "md:",
      lg: "lg:",
      xl: "xl:",
      xxl: "2xl:",
    },
    "base",
  ],
  variants: {
    m: {
      "1": "m-1",
      "2": "m-2",
      "3": "m-3",
      "4": "m-4",
      "5": "m-5",
    },
    mx: {
      "1": "mx-1",
      "2": "mx-2",
      "3": "mx-3",
      "4": "mx-4",
      "5": "mx-5",
    },
    my: {
      "1": "my-1",
      "2": "my-2",
      "3": "my-3",
      "4": "my-4",
      "5": "my-5",
    },
    p: {
      "1": "p-1",
      "2": "p-2",
      "3": "p-3",
      "4": "p-4",
      "5": "p-5",
    },
    px: {
      "1": "px-1",
      "2": "px-2",
      "3": "px-3",
      "4": "px-4",
      "5": "px-5",
    },
    py: {
      "1": "py-1",
      "2": "py-2",
      "3": "py-3",
      "4": "py-4",
      "5": "py-5",
    },
  },
});