"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AccessibleCheckbox = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
/**
 * Simplified Accessible Checkbox Component
 * Provides basic accessibility features without external dependencies
 */
const react_1 = require("react");
const AccessibleCheckbox = ({ label, id, helperText, error, isRequired = false, isDisabled = false, isIndeterminate = false, onChange, className = '', ...props }) => {
    // Generate an ID if not provided
    const checkboxId = id || `checkbox-${Math.random().toString(36).substring(2, 9)}`;
    const checkboxRef = (0, react_1.useRef)(null);
    const hasError = !!error;
    const helperTextId = helperText ? `${checkboxId}-helper-text` : undefined;
    const errorId = error ? `${checkboxId}-error` : undefined;
    const ariaDescribedBy = [helperTextId, errorId].filter(Boolean).join(' ') || undefined;
    // Handle indeterminate state
    (0, react_1.useEffect)(() => {
        if (checkboxRef.current) {
            checkboxRef.current.indeterminate = isIndeterminate;
        }
    }, [isIndeterminate]);
    // Styling classes
    const checkboxContainerClasses = [
        'relative flex items-start',
        className
    ].filter(Boolean).join(' ');
    const checkboxWrapperClasses = 'flex items-center h-5';
    const checkboxClasses = [
        'h-4 w-4 rounded border focus:ring-2 focus:ring-blue-500',
        hasError ? 'border-red-500 text-red-600' : 'border-gray-300 text-blue-600',
        isDisabled ? 'opacity-50 cursor-not-allowed bg-gray-100' : '',
    ].filter(Boolean).join(' ');
    const labelClasses = [
        'ml-2 text-sm font-medium text-gray-700',
        isDisabled ? 'opacity-50' : '',
        isRequired ? 'required' : '',
    ].filter(Boolean).join(' ');
    const helperTextClasses = 'mt-1 ml-6 text-sm text-gray-600';
    const errorTextClasses = 'mt-1 ml-6 text-sm text-red-600';
    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: checkboxContainerClasses, children: [(0, jsx_runtime_1.jsx)("div", { className: checkboxWrapperClasses, children: (0, jsx_runtime_1.jsx)("input", { type: "checkbox", id: checkboxId, ref: checkboxRef, "aria-describedby": ariaDescribedBy, disabled: isDisabled, required: isRequired, onChange: onChange, className: checkboxClasses, "aria-invalid": hasError ? 'true' : 'false', ...props }) }), label && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: checkboxId, className: labelClasses, children: [label, isRequired && (0, jsx_runtime_1.jsx)("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })] }))] }), helperText && !error && ((0, jsx_runtime_1.jsx)("div", { id: helperTextId, className: helperTextClasses, children: helperText })), error && ((0, jsx_runtime_1.jsx)("div", { id: errorId, role: "alert", className: errorTextClasses, children: error }))] }));
};
exports.AccessibleCheckbox = AccessibleCheckbox;
exports.default = exports.AccessibleCheckbox;
//# sourceMappingURL=AccessibleCheckbox.js.map