import { h } from "@stencil/core";
import { configStore } from "../../store/store";
export const ZInput = ({ id, label, placeholder = '', value = '', onChange, onKeyDown, autoFocus, type = 'text', error, maxLength, disabled, min }) => {
    const theme = configStore.get('theme');
    return (h("div", { class: "mb-2", "data-theme": theme }, label && h("label", { class: "z-input-label" }, label), h("div", { class: "relative" }, h("input", { id: id, type: type, placeholder: placeholder, class: `z-input ${maxLength ? 'pr-16' : ''} ${disabled ? 'bg-paper' : ''}`, value: value, onInput: (e) => {
            if (onChange)
                onChange(e.target.value);
        }, onKeyDown: onKeyDown, autoFocus: autoFocus, maxLength: maxLength, disabled: disabled, min: min }), maxLength && (h("span", { class: "absolute right-3 top-1/2 -translate-y-1/2 text-xs text-gray-400 pointer-events-none" }, "(", !!value.length && value.length, "/", maxLength, ")"))), !!error && h("p", { class: "z-input-error" }, error)));
};
