simplify usage of honey input

move nonce to context
remove className props as customization not needed

Author: nichtsam

package.json

@@ -6,9 +6,7 @@
 		"node": ">=20.0.0"
 	},
 	"type": "module",
-	"funding": [
-		"https://github.com/sponsors/sergiodxa"
-	],
+	"funding": ["https://github.com/sponsors/sergiodxa"],
 	"exports": {
 		"./package.json": "./package.json",
 		"./promise": {
@@ -258,9 +256,5 @@
 	"dependencies": {
 		"type-fest": "^4.33.0"
 	},
-	"files": [
-		"build",
-		"package.json",
-		"README.md"
-	]
+	"files": ["build", "package.json", "README.md"]
 }

src/react/honeypot.tsx

@@ -7,19 +7,22 @@ const HoneypotContext = React.createContext<HoneypotContextType>({});
 
 export function HoneypotInputs({
 	label = "Please leave this field blank",
-	nonce,
-	className = "__honeypot_inputs",
 }: HoneypotInputs.Props) {
 	let context = React.useContext(HoneypotContext);
 
 	let {
+		nonce,
 		nameFieldName = "name__confirm",
 		validFromFieldName = "from__confirm",
 		encryptedValidFrom,
 	} = context;
 
 	return (
-		<div id={`${nameFieldName}_wrap`} className={className} aria-hidden="true">
+		<div
+			id={`${nameFieldName}_wrap`}
+			className="__honeypot_inputs"
+			aria-hidden="true"
+		>
 			<style nonce={nonce}>{".__honeypot_inputs { display: none; }"}</style>
 			<label htmlFor={nameFieldName}>{label}</label>
 			<input
@@ -49,15 +52,7 @@ export function HoneypotInputs({
 }
 
 export namespace HoneypotInputs {
-	export type Props = {
-		label?: string;
-		nonce?: string;
-		/**
-		 * The classname used to link the Honeypot input with the CSS that hides it.
-		 * @default "__honeypot_inputs"
-		 */
-		className?: string;
-	};
+	export type Props = { label?: string };
 }
 
 export type HoneypotProviderProps = HoneypotContextType & {

src/server/honeypot.ts

@@ -1,6 +1,10 @@
 import { decrypt, encrypt, randomString } from "../common/crypto.js";
 
 export interface HoneypotInputProps {
+	/**
+	 * The nonce for the style tag that will be used to hide the honeypot input.
+	 */
+	nonce?: string;
 	/**
 	 * The name expected to be used by the honeypot input field.
 	 */
@@ -21,6 +25,10 @@ export interface HoneypotConfig {
 	 * name will be different for each request.
 	 */
 	randomizeNameFieldName?: boolean;
+	/**
+	 * The nonce for the style tag that will be used to hide the honeypot input.
+	 */
+	nonce?: string;
 	/**
 	 * The name of the field that will be used for the honeypot input.
 	 */
@@ -71,6 +79,7 @@ export class Honeypot {
 		validFromTimestamp = Date.now(),
 	} = {}): Promise<HoneypotInputProps> {
 		return {
+			nonce: this.config.nonce,
 			nameFieldName: this.nameFieldName,
 			validFromFieldName: this.validFromFieldName,
 			encryptedValidFrom: await this.encrypt(validFromTimestamp.toString()),