@smitch/fluid
Version:
A Next/React ui-component libray.
37 lines (36 loc) • 4.37 kB
JavaScript
'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-accent"), 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:decoration-accent peer-invalid:underline decoration-wavy underline-offset-4 inline-block', children: title }))] }));
});
export default Input;