hh-ui-components/dist/esm/components/Form/InputForm.js

import React from "react";
import classNames from "classnames";
export var InputForm = function (_a) {
    var _b = _a.id, id = _b === void 0 ? "float_fill" : _b, _c = _a.htmlFor, htmlFor = _c === void 0 ? "float_fill" : _c, _d = _a.variants, variants = _d === void 0 ? "primary" : _d, _f = _a.type, type = _f === void 0 ? "text" : _f, placeholder = _a.placeholder, _g = _a.error, error = _g === void 0 ? null : _g, 
    // errorType = null,
    _h = _a.label, 
    // errorType = null,
    label = _h === void 0 ? "Input" : _h, value = _a.value, onBlur = _a.onBlur, onKeyUp = _a.onKeyUp, onChange = _a.onChange, className = _a.className, _j = _a.disabled, disabled = _j === void 0 ? false : _j, _k = _a.ariaLabel, ariaLabel = _k === void 0 ? "in-label" : _k;
    var classes = classNames({
        "": true,
        " ": variants === "primary"
    });
    return (React.createElement("div", { className: "relative ".concat(className) },
        React.createElement("div", { className: "relative ".concat(classes) },
            React.createElement("input", { type: type, id: id + Math.random(), className: "!rounded-none autofill:!bg-white block px-[15px] 2xl:px-[1.042vw] pt-[21.5px] 2xl:pt-[1.493vw] pb-[6.5px] 2xl:pb-[0.451vw] h-[50px] 2xl:h-[3.472vw] w-full text-body-text-lg 2xl:text-body-text-2xl text-lnk bg-white border focus:outline-none focus:border-2 focus:ring-0 peer ".concat(error
                    ? "border-red"
                    : "border-subdued hover:border-black appearance-none focus:border-blue", " ").concat(disabled ? " disabled:border-neutral" : " "), placeholder: placeholder, value: value, onBlur: onBlur, onKeyUp: onKeyUp, onChange: onChange, disabled: disabled, "aria-label": ariaLabel }),
            React.createElement("label", { htmlFor: htmlFor, className: "absolute text-body-text-lg 2xl:text-[0.972vw] text-subdued duration-300 transform top-2/4 -translate-y-2/4 z-10 origin-[0] left-[15px] 2xl:left-[1.042vw] 2xl:peer-focus:text-[0.833vw] peer-focus:text-subdued peer-placeholder-shown:-translate-y-2/4 peer-focus:top-[16px] 2xl:peer-focus:top-[1.111vw] peer-focus:text-caption select-none pointer-events-none  peer-autofill:top-[16px] 2xl:peer-autofill:top-[1.111vw] ".concat(error
                    ? "top-[16px] md:top-[16px] lg:top-[16px] 2xl:top-[1.111vw]"
                    : "", " ").concat(value &&
                    "top-[16px] md:top-[16px] lg:top-[16px] 2xl:top-[1.111vw] text-caption 2xl:text-[0.833vw]", " ").concat(disabled ? "!text-neutral" : "") }, label))));
};
//# sourceMappingURL=InputForm.js.map