@smitch/fluid/lib/input/Input.js

A lightweight, Tailwind-powered React/Next.js UI component library.

"use client";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from "react";
import { twMerge } from "tailwind-merge";
import { forwardRef } from "react";
var sizes = {
    sm: "text-base",
    md: "text-lg",
    lg: "text-xl",
    xl: "text-2xl",
};
var darkthemeClasses = "dark:bg-dark dark:text-light";
var typeClasses = function (type) {
    return type === "checkbox"
        ? "form-checkbox rounded-md w-[1.5em] h-[1.5em] cursor-pointer !check:dark:bg-dark !text-info border-neutral border-2"
        : type === "radio"
            ? "form-radio w-[1.5em] h-[1.5em] cursor-pointer bg-transparent !text-info border-2"
            : type === "color"
                ? "form-color cursor-pointer aspect-square w-[2em] h-[2em] border-neutral border-2"
                : type === "number"
                    ? "form-input text-center ".concat(darkthemeClasses, " [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none me-4")
                    : type === "file"
                        ? "hidden"
                        : type === "range"
                            ? "appearance-none h-[.5em] w-full [&&::-webkit-slider-thumb]:cursor-grab [&&::-webkit-slider-thumb]:appearance-none [&&::-webkit-slider-thumb]:h-[1em] [&&::-webkit-slider-thumb]:w-[1em] [&&::-webkit-slider-thumb]:bg-current"
                            : "form-input w-full border-neutral ".concat(darkthemeClasses, " read-only:cursor-default read-only:bg-transparent read-only:!border-none");
};
var styles = {
    required: "!bg-[var(--highlight-color)] !text-dark",
};
var Input = forwardRef(function Input(props, ref) {
    var _a = props.type, type = _a === void 0 ? "text" : _a, _b = props.size, size = _b === void 0 ? "md" : _b, _c = props.autocomplete, autocomplete = _c === void 0 ? "off" : _c, _d = props.name, name = _d === void 0 ? "control-name" : _d, id = props.id, _e = props.className, className = _e === void 0 ? "" : _e, style = props.style, _f = props.rounded, rounded = _f === void 0 ? "md" : _f, _g = props.required, required = _g === void 0 ? false : _g, _h = props.readonly, readonly = _h === void 0 ? false : _h, _j = props.disabled, disabled = _j === void 0 ? false : _j, _k = props.hint, hint = _k === void 0 ? false : _k, tabindex = props.tabindex, min = props.min, max = props.max, minLength = props.minLength, maxLength = props.maxLength, step = props.step, pattern = props.pattern, title = props.title, value = props.value, defaultChecked = props.defaultChecked, accept = props.accept, multiple = props.multiple, placeholder = props.placeholder, list = props.list, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, hidden = props.hidden, ariaLabel = props.ariaLabel, autocorrect = props.autocorrect, spellcheck = props.spellcheck, _l = props.suppressHydrationWarning, suppressHydrationWarning = _l === void 0 ? false : _l;
    var sizeClasses = useMemo(function () { return sizes[size]; }, [size]);
    return (_jsxs(_Fragment, { children: [_jsx("input", { className: twMerge("input ".concat(typeClasses(type), " peer ").concat(sizeClasses, " rounded-").concat(rounded, " font-normal color-scheme:light dark:[color-scheme:dark] focus:outline-none focus-visible:outline-none focus-visible:border-info disabled:bg-neutral disabled:cursor-default disabled:text-dark disabled:border-transparent invalid:!border-warning-dark invalid:dark:!border-warning-light"), className), style: style, type: type, name: name, id: id, autoComplete: autocomplete, required: required, "aria-required": required, hidden: hidden, readOnly: readonly, tabIndex: tabindex, ref: ref, min: min, max: max, minLength: minLength, maxLength: maxLength, step: step, pattern: pattern, title: title, placeholder: placeholder, defaultValue: value, defaultChecked: defaultChecked, accept: accept, multiple: multiple, list: list, disabled: disabled, onChange: onChange, onInput: onChange, onFocus: onFocus, onBlur: onBlur, "data-testid": id || name, "aria-label": ariaLabel, autoCorrect: autocorrect, spellCheck: spellcheck, suppressHydrationWarning: suppressHydrationWarning }), hint && (_jsx("p", { className: "hint text-sm font-normal mt-[.5em] dark:text-light peer-invalid:text-warning-dark peer-invalid:dark:text-warning-light inline-block", children: title }))] }));
});
export default Input;
//# sourceMappingURL=Input.js.map