/*! ratio-ui · design system for knowledge sharing · https://github.com/losol/ratio-ui · (c) 2026 Losol AS · MPL-2.0 */
import React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/forms/Input/Checkbox.tsx
var checkboxStyles = {
	container: "my-2",
	checkbox: "align-text-bottom w-5 h-5 text-(--primary) bg-card border-border-1 focus:ring-(--focus-ring) focus:ring-2",
	label: "font-bold ml-2 text-(--text)",
	description: "ml-7 mt-2 text-sm"
};
var CheckBoxLabel = ({ children, className, htmlFor }) => {
	return /* @__PURE__ */ jsx("label", {
		htmlFor,
		className: className || checkboxStyles.label,
		children
	});
};
var CheckBoxDescription = ({ children, className }) => {
	return /* @__PURE__ */ jsx("p", {
		className: className || checkboxStyles.description,
		children
	});
};
var Checkbox = React.forwardRef((props, ref) => {
	const { className, containerClassName, children, id, disabled, defaultChecked, testId, ...rest } = props;
	const checkboxClassName = className || checkboxStyles.checkbox;
	const containerClass = containerClassName || checkboxStyles.container;
	const enhancedChildren = React.Children.map(children, (child) => {
		if (React.isValidElement(child) && child.type === CheckBoxLabel) return React.cloneElement(child, { htmlFor: id });
		return child;
	});
	return /* @__PURE__ */ jsxs("div", {
		className: containerClass,
		children: [/* @__PURE__ */ jsx("input", {
			type: "checkbox",
			className: checkboxClassName,
			ref,
			id,
			disabled,
			defaultChecked,
			"data-testid": testId,
			...rest
		}), enhancedChildren]
	}, id);
});
Checkbox.displayName = "Checkbox";
Checkbox.Label = CheckBoxLabel;
Checkbox.Description = CheckBoxDescription;
//#endregion
export { CheckBoxDescription, CheckBoxLabel, Checkbox, checkboxStyles };

//# sourceMappingURL=Checkbox.js.map