"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AccessibleInput = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const AccessibleInput = ({ type = 'text', label, id, placeholder, helperText, error, isRequired = false, isDisabled = false, maxLength, showCounter = false, onChange, onBlur, className = '', ...props }) => {
    // Generate an ID if not provided
    const inputId = id || `input-${Math.random().toString(36).substring(2, 9)}`;
    const hasError = !!error;
    const helperTextId = helperText ? `${inputId}-helper-text` : undefined;
    const errorId = error ? `${inputId}-error` : undefined;
    const ariaDescribedBy = [helperTextId, errorId].filter(Boolean).join(' ') || undefined;
    const characterCount = props.value?.toString().length || 0;
    // Styling classes
    const inputContainerClasses = [
        'relative w-full',
        className
    ].filter(Boolean).join(' ');
    const labelClasses = [
        'block mb-1 font-medium text-gray-700',
        isRequired ? 'required' : '',
    ].filter(Boolean).join(' ');
    const inputClasses = [
        'w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500',
        hasError ? 'border-red-500 text-red-900 placeholder-red-300' : 'border-gray-300',
        isDisabled ? 'bg-gray-100 cursor-not-allowed opacity-50' : '',
    ].filter(Boolean).join(' ');
    const helperTextClasses = 'mt-1 text-sm text-gray-600';
    const errorTextClasses = 'mt-1 text-sm text-red-600';
    const counterClasses = 'mt-1 text-sm text-gray-500 text-right';
    return ((0, jsx_runtime_1.jsxs)("div", { className: inputContainerClasses, children: [label && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: inputId, className: labelClasses, children: [label, isRequired && (0, jsx_runtime_1.jsx)("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })] })), (0, jsx_runtime_1.jsx)("input", { id: inputId, type: type, placeholder: placeholder, disabled: isDisabled, required: isRequired, maxLength: maxLength, "aria-invalid": hasError ? 'true' : 'false', "aria-describedby": ariaDescribedBy, "aria-label": !label ? props['aria-label'] : undefined, onChange: onChange, onBlur: onBlur, className: inputClasses, ...props }), 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 })), showCounter && maxLength && ((0, jsx_runtime_1.jsxs)("div", { className: counterClasses, children: [characterCount, "/", maxLength] }))] }));
};
exports.AccessibleInput = AccessibleInput;
exports.default = exports.AccessibleInput;
//# sourceMappingURL=AccessibleInput.js.map