/**
 * Data OK Checkbox component
 * A checkbox that displays a green checkmark icon when checked and a red radio button off icon when unchecked
 */
'use client';
import { jsx as _jsx } from "react/jsx-runtime";
import React from 'react';
import { IoCheckmarkCircle, IoRadioButtonOff } from 'react-icons/io5';
import { cn } from '../utils/cn.js';
/**
 * Data OK Checkbox component
 * Displays a green checkmark when checked, light red radio button off when unchecked
 */
export const DataOkCheckbox = React.forwardRef(({ checked, onChange, 'aria-label': ariaLabel, className, disabled }, ref) => {
    /**
     * Handle click to toggle checkbox state
     */
    const handle_click = () => {
        if (!disabled) {
            onChange(!checked);
        }
    };
    return (_jsx("button", { ref: ref, type: "button", role: "checkbox", "aria-checked": checked, "aria-label": ariaLabel || (checked ? 'Data OK' : 'Data not OK'), onClick: handle_click, disabled: disabled, suppressHydrationWarning: true, className: cn('cls_data_ok_checkbox flex h-9 w-9 items-center justify-center rounded-md border-0 bg-transparent transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', className), children: checked ? (_jsx(IoCheckmarkCircle, { className: "h-6 w-6", style: { color: '#10b981' } })) : (_jsx(IoRadioButtonOff, { className: "h-6 w-6", style: { color: '#f87171' } })) }));
});
DataOkCheckbox.displayName = 'DataOkCheckbox';
//# sourceMappingURL=data_ok_checkbox.js.map