"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TailwindInput = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const cn_js_1 = require("../utils/cn.js");
/**
 * Input component built with Tailwind CSS
 *
 * A flexible input component that supports various sizes, states, and decorations
 * like icons and adornments.
 *
 * @example
 * // Basic usage
 * <TailwindInput label="Email" name="email" type="email" />
 *
 * @example
 * // With validation error
 * <TailwindInput
 *   label="Username"
 *   name="username"
 *   error="Username is already taken"
 * />
 *
 * @example
 * // With icon
 * <TailwindInput
 *   label="Search"
 *   name="search"
 *   type="search"
 *   icon={<SearchIcon />}
 * />
 */
exports.TailwindInput = (0, react_1.forwardRef)(({ id, name, type = 'text', value, defaultValue, placeholder, label, helperText, error, isDisabled = false, isReadOnly = false, isRequired = false, size = 'md', isFullWidth = false, autoFocus = false, onChange, onFocus, onBlur, onKeyDown, onKeyUp, onKeyPress, icon, iconPosition = 'left', adornment, adornmentPosition = 'right', containerClassName, inputClassName, labelClassName, className, ...props }, ref) => {
    // Generate a unique ID if not provided
    const inputId = id || `input-${name}-${Math.random().toString(36).substring(2, 9)}`;
    // Size-specific classes
    const sizeClasses = {
        sm: "h-8 text-xs px-3",
        md: "h-10 text-sm px-4",
        lg: "h-12 text-base px-5",
    };
    // Base container classes
    const containerClasses = (0, cn_js_1.cn)("flex flex-col w-full", isFullWidth ? "w-full" : "max-w-sm", containerClassName);
    // Label classes
    const labelClasses = (0, cn_js_1.cn)("block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", error ? "text-red-500 dark:text-red-400" : "", labelClassName);
    // Input field container classes
    const fieldContainerClasses = (0, cn_js_1.cn)("relative rounded-md", icon ? "flex items-center" : "");
    // Input element classes
    const inputClasses = (0, cn_js_1.cn)(
    // Base styles
    "flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm", "ring-offset-background placeholder:text-muted-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:opacity-50", 
    // Size variations
    sizeClasses[size], 
    // Icon padding adjustments
    icon && iconPosition === 'left' ? "pl-10" : "", icon && iconPosition === 'right' ? "pr-10" : "", 
    // Adornment padding adjustments
    adornment && adornmentPosition === 'left' ? "pl-12" : "", adornment && adornmentPosition === 'right' ? "pr-12" : "", 
    // State variations
    error ? "border-red-500 focus-visible:ring-red-500" : "", 
    // Additional classes
    inputClassName, className);
    // Helper/error text classes
    const helperTextClasses = (0, cn_js_1.cn)("mt-1 text-xs", error ? "text-red-500 dark:text-red-400" : "text-gray-500 dark:text-gray-400");
    // Icon container classes
    const iconContainerClasses = (position) => (0, cn_js_1.cn)("absolute inset-y-0 flex items-center text-gray-500", position === 'left' ? "left-3" : "right-3");
    // Adornment container classes
    const adornmentContainerClasses = (position) => (0, cn_js_1.cn)("absolute inset-y-0 flex items-center", position === 'left' ? "left-0 pl-3" : "right-0 pr-3");
    return ((0, jsx_runtime_1.jsxs)("div", { className: containerClasses, 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", children: "*" })] })), (0, jsx_runtime_1.jsxs)("div", { className: fieldContainerClasses, children: [icon && iconPosition === 'left' && ((0, jsx_runtime_1.jsx)("div", { className: iconContainerClasses('left'), children: icon })), adornment && adornmentPosition === 'left' && ((0, jsx_runtime_1.jsx)("div", { className: adornmentContainerClasses('left'), children: adornment })), (0, jsx_runtime_1.jsx)("input", { id: inputId, name: name, type: type, value: value, defaultValue: defaultValue, placeholder: placeholder, disabled: isDisabled, readOnly: isReadOnly, required: isRequired, autoFocus: autoFocus, className: inputClasses, onChange: onChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onKeyPress: onKeyPress, ref: ref, "aria-invalid": error ? "true" : "false", "aria-describedby": helperText || error ? `${inputId}-helper-text` : undefined, ...props }), icon && iconPosition === 'right' && ((0, jsx_runtime_1.jsx)("div", { className: iconContainerClasses('right'), children: icon })), adornment && adornmentPosition === 'right' && ((0, jsx_runtime_1.jsx)("div", { className: adornmentContainerClasses('right'), children: adornment }))] }), (helperText || error) && ((0, jsx_runtime_1.jsx)("div", { id: `${inputId}-helper-text`, className: helperTextClasses, children: error || helperText }))] }));
});
exports.TailwindInput.displayName = 'TailwindInput';
exports.default = exports.TailwindInput;
//# sourceMappingURL=TailwindInput.js.map