checkbox.json

{
    "rules": {
        "merge": ["input"]
    },
    "base": ["m-form-checkbox cursor-pointer"],
    "wrapper": ["m-form-checkbox-wrap", "flex items-center space-x-8"],
    "label": ["m-form-checkbox-label", "f-body-1 inline-flex relative"],
    "required": "sr-only",
    "check": [
        "m-form-checkbox-check",
        "peer",
        "w-24 h-24 rounded-sm relative",
        "shadow-[0_0px_0px_1px_rgba(0,0,0,1)]",
        "transition-colors duration-300 ease-out",
        "peer-checked:bg-[black]",
        "peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2"
    ],
    "checkmark": [
        "checkmark",
        "absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2",
        "text-[white]"
    ],
    "input": [
        "absolute w-1 h-1",
        "border-0 p-0 -m-1",
        "overflow-hidden whitespace-nowrap",
        "peer",
        "focus:outline-none",
        "[clip:rect(0,0,0,0)]"
    ],
    "hint": ["m-form-checkbox-hint", "f-ui-2 text-secondary"]
}