guillotine

import { createNormalizer } from "@zag-js/types";

export const propMap = {
	onFocus: "onFocusin",
	onBlur: "onFocusout",
	onChange: "onInput",
	onDoubleClick: "onDblclick",
	htmlFor: "for",
	className: "class",
	defaultValue: "value",
	defaultChecked: "checked",
};

const toStyleString = (style) => {
	let string = "";
	for (let key in style) {
		const value = style[key];
		if (value === null || value === undefined) continue;
		if (!key.startsWith("--"))
			key = key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
		string += `${key}:${value};`;
	}
	return string;
};

export const normalizeProps = createNormalizer((props) => {
	return Object.entries(props).reduce((acc, [key, value]) => {
		if (value === undefined) return acc;

		if (key in propMap) {
			key = propMap[key];
		}

		if (key === "style" && typeof value === "object") {
			acc.style = toStyleString(value);
			return acc;
		}

		acc[key.toLowerCase()] = value;

		return acc;
	}, {});
});