import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from '../../../utils/cn.js';
import { DataFormFieldLayout } from '../shared/data_form_field_layout.js';
export function BooleanField(props) {
    const { field, mode, value, on_change } = props;
    const checked = Boolean(value);
    return (_jsx(DataFormFieldLayout, { ...props, children: mode === 'edit' ? (_jsxs("label", { className: cn('cls_data_form_boolean_input', 'flex items-center gap-2 cursor-pointer'), children: [_jsx("input", { type: "checkbox", className: "w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500", checked: checked, disabled: field.disabled, onChange: (e) => on_change(e.target.checked) }), _jsx("span", { className: "text-sm text-gray-700", children: checked ? 'Yes' : 'No' })] })) : (_jsx("div", { className: "cls_data_form_boolean_view text-sm", children: checked ? 'Yes' : 'No' })) }));
}
//# sourceMappingURL=boolean_field.js.map