import { klass, reklass } from "@klass/core"; const button = klass({ base: "inline-flex items-center justify-center rounded-md outline-none", variants: { color: { default: "bg-neutral-700 text-white", primary: "bg-indigo-700 text-white", secondary: "bg-orange-700 text-white", }, size: { sm: "px-3 py-0.5 h-7 text-sm font-medium", md: "px-4 py-1 h-8 text-base font-medium", lg: "px-5 py-1.5 h-9 text-lg font-semibold", }, block: { true: "w-full", }, }, defaults: { color: "default", size: "md", }, }); const box = reklass({ conditions: [ { base: "", sm: "sm:", md: "md:", lg: "lg:", xl: "xl:", "2xl": "2xl:", }, "base", ], variants: { m: { "0": "m-0", "1": "m-1", "2": "m-2", "3": "m-3", "4": "m-4", "5": "m-5", "6": "m-6", "7": "m-7", "8": "m-8", }, p: { "0": "p-0", "1": "p-1", "2": "p-2", "3": "p-3", "4": "p-4", "5": "p-5", "6": "p-6", "7": "p-7", "8": "p-8", }, }, }); button({ color: "primary", block: true }); // "inline-flex items-center justify-center rounded-md outline-none bg-indigo-700 text-white px-4 py-1 h-8 text-base font-medium w-full" // access variant button.g.color("primary"); // "bg-indigo-700 text-white" box({ m: "1", p: "2" }); // "m-1 p-1" box({ m: { base: "1", md: "2" }, p: { base: "1", md: "2" } }); // "m-1 md:m-2 p-1 md:p-2" // access revariant box.g.m("1"); // "m-1"; box.g.p({ base: "1", md: "2" }); // "p-1 md:p-2"

import { klassed, reklassed } from "@klass/{preact,qwik,react,solid,vue}"; const Button = klassed( "button", { base: "inline-flex items-center justify-center rounded-md outline-none", variants: { color: { default: "bg-neutral-700 text-white", primary: "bg-indigo-700 text-white", secondary: "bg-orange-700 text-white", }, size: { sm: "px-3 py-0.5 h-7 text-sm font-medium", md: "px-4 py-1 h-8 text-base font-medium", lg: "px-5 py-1.5 h-9 text-lg font-semibold", }, block: { true: "w-full", }, }, defaults: { color: "default", size: "md", }, }, { // default props dp: { type: "button", }, } ); const Box = reklassed("div", { conditions: [ { base: "", sm: "sm:", md: "md:", lg: "lg:", xl: "xl:", "2xl": "2xl:", }, "base", ], variants: { m: { "0": "m-0", "1": "m-1", "2": "m-2", "3": "m-3", "4": "m-4", "5": "m-5", "6": "m-6", "7": "m-7", "8": "m-8", }, p: { "0": "p-0", "1": "p-1", "2": "p-2", "3": "p-3", "4": "p-4", "5": "p-5", "6": "p-6", "7": "p-7", "8": "p-8", }, }, }); const App = () => { return ( <Box m={{ base: "1", md: "2" }} p="2"> <Box as="section"> <Button color="primary" block> Primary Block Button </Button> </Box> <Box as="section"> <Button as="a" color="secondary"> Secondary Anchor Button </Button> </Box> </Box> ); }; export default App;