@paradise-ui/text-field
Version:
An enhanced version of common <input> component
231 lines (227 loc) • 12.2 kB
JavaScript
'use client'
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/TextField.tsx
var TextField_exports = {};
__export(TextField_exports, {
TextField: () => TextField
});
module.exports = __toCommonJS(TextField_exports);
var import_react = require("react");
var import_common = require("@paradise-ui/common");
// src/elementClass.ts
var import_clsx = __toESM(require("clsx"));
var defaultTextFieldElementClass = (props) => {
return {
root: (0, import_clsx.default)([
"pui-text-field",
`pui-text-field--${props.variant}`,
`pui-text-field--${props.size}`,
!!props.errorMessage || props.invalid ? `pui-text-field--error` : "",
props.focus ? "pui-text-field--focus" : "",
props.disabled ? `pui-text-field--disabled` : "",
props.className
]),
labelBlock: "pui-text-field__label-block",
label: "pui-text-field__label",
secondaryLabel: "pui-text-field__label-secondary",
inputBlock: "pui-text-field__input-block",
inputPrefix: "pui-text-field__input-prefix",
input: "",
inputSuffix: "pui-text-field__input-suffix",
messageBlock: "pui-text-field__message-block",
helperText: "pui-text-field__helper-text",
errorMessage: "pui-text-field__error-message"
};
};
var tailwindTextFieldElementClass = (props) => {
return {
root: (0, import_clsx.default)([
"w-full text-[var(--pui-text,#31333e)] dark:text-[var(--pui-text-in-dark,#e7e7e9)] border-box text-[1rem]",
props.className
]),
labelBlock: (0, import_clsx.default)(["flex justify-between mb-[0.25rem]", props.size === "sm" ? "text-[0.75rem]" : "text-[0.875rem]"]),
label: "",
secondaryLabel: "text-[var(--pui-text-secondary,#63636e)] dark:text-[var(--pui-text-secondary-in-dark,#a4a4ad)]",
inputBlock: (0, import_clsx.default)([
"flex overflow-hidden antialiased",
props.size === "sm" && "text-[0.875rem]",
props.size === "sm" && (props.variant === "line" ? "h-[1.625rem]" : "h-[2rem]"),
props.size === "md" && (props.variant === "line" ? "h-[1.875rem]" : "h-[2.5rem]"),
props.size === "lg" && "text-[1.125rem]",
props.size === "lg" && (props.variant === "line" ? "h-[2rem]" : "h-[3rem]"),
props.variant === "outlined" && [
"rounded-[5px]",
"border border-solid",
!props.focus && !props.errorMessage && !props.invalid && "border-[var(--pui-soft-border,#dadce3)] dark:border-[var(--pui-soft-border-in-dark,#373a3a)]"
],
props.variant === "line" && [
"bg-transparent mb-[0.3rem]",
"border-0 border-b border-solid",
!props.focus && !props.errorMessage && !props.invalid && "border-[var(--pui-soft-border,#dadce3)] dark:border-[var(--pui-soft-border-in-dark,#373a3a)]"
],
props.variant === "filled" && [
"rounded-[5px]",
!props.errorMessage && !props.invalid && "bg-[var(--pui-input-filler,#f0f0f2)] dark:bg-[var(--pui-input-filler-dark,#313437)]",
"border border-solid",
!props.focus && !props.errorMessage && !props.invalid && !props.disabled && "border-[var(--pui-input-filler,#f0f0f2)] dark:border-[var(--pui-input-filler-dark,#313437)]"
],
!props.focus && !props.errorMessage && !props.disabled && "hover:border-[var(--pui-border,#c3c7d0)] dark:hover:var(--pui-border-in-dark,#43474a)",
props.disabled && "opacity-50 cursor-not-allowed",
props.focus && !props.errorMessage && "border-[var(--pui-info,#008DDA)]",
props.focus && !props.errorMessage && (props.variant === "line" ? "border-b-[1.5px]" : "shadow-[0_0_0_0.5px_var(--pui-info,#008DDA)]"),
(!!props.errorMessage || props.invalid) && "border-[var(--pui-error,#e74747)]",
(!!props.errorMessage || props.invalid) && (props.variant === "line" ? "border-b-[1.5px]" : "shadow-[0_0_0_0.5px_var(--pui-error,#e74747)]"),
(!!props.errorMessage || props.invalid) && props.variant === "filled" && "bg-[var(--pui-error-lighten,#fbe3e3)] dark:bg-[var(--pui-error-darken,#230b0b)]"
]),
inputPrefix: (0, import_clsx.default)([
"h-full flex items-center",
props.variant !== "line" && props.size === "sm" && "pl-[0.5rem]",
props.variant !== "line" && props.size === "md" && "pl-[0.75rem]",
props.variant !== "line" && props.size === "lg" && "pl-[1rem]",
props.variant === "line" && props.size === "sm" && "pr-[0.5rem]",
props.variant === "line" && props.size === "md" && "pr-[0.75rem]",
props.variant === "line" && props.size === "lg" && "pr-[1rem]"
]),
input: (0, import_clsx.default)([
"w-full h-full font-inherit text-inherit border-0 outline-0 shadow-none bg-inherit disabled:cursor-not-allowed disabled:bg-inherit",
"placeholder:text-[var(--pui-input-placeholder,#adb5bd)] dark:placeholder:text-[var(--pui-input-placeholder-dark,#696969)]",
props.variant === "filled" && "bg-inherit",
props.variant === "line" ? "p-0" : "py-0",
props.variant !== "line" && props.size === "sm" && "px-[0.5rem]",
props.variant !== "line" && props.size === "md" && "px-[0.75rem]",
props.variant !== "line" && props.size === "lg" && "px-[1rem]"
]),
inputSuffix: (0, import_clsx.default)([
"h-full flex items-center",
props.variant === "line" && props.size === "sm" && "pl-[0.5rem]",
props.variant === "line" && props.size === "md" && "pl-[0.75rem]",
props.variant === "line" && props.size === "lg" && "pl-[1rem]",
props.variant !== "line" && props.size === "sm" && "pr-[0.5rem]",
props.variant !== "line" && props.size === "md" && "pr-[0.75rem]",
props.variant !== "line" && props.size === "lg" && "pr-[1rem]"
]),
messageBlock: (0, import_clsx.default)([
"mt-[0.25em] text-[var(--pui-text-secondary,#63636e)] dark:text-[var(--pui-text-secondary-in-dark,#a4a4ad)]",
props.size === "sm" ? "text-[0.65rem]" : "text-[0.75rem]"
]),
helperText: "",
errorMessage: "text-[var(--pui-error,#e74747)]"
};
};
// src/TextField.tsx
var import_clsx2 = __toESM(require("clsx"));
var import_jsx_runtime = require("react/jsx-runtime");
var TextField = (0, import_react.forwardRef)((props, ref) => {
const {
label = "",
secondaryLabel = "",
variant = "outlined",
size = "md",
name = "",
type = "text",
className = "",
placeholder = "",
value,
invalid = false,
disabled = false,
prefix = "",
suffix = "",
errorMessage = "",
helperText = "",
onChange,
elementClass,
extraElementClass,
...rest
} = props;
const puiContext = (0, import_react.useContext)(import_common.ParadiseUIContext);
const [focus, setFocus] = (0, import_react.useState)(false);
const elementClassProps = { variant, size, type, invalid, disabled, ...props, focus };
const [textFieldElementClass, setTextFieldElementClass] = (0, import_react.useState)(
defaultTextFieldElementClass(elementClassProps)
);
(0, import_react.useEffect)(() => {
var _a, _b;
let newElementClass = defaultTextFieldElementClass(elementClassProps);
if (puiContext) {
if (puiContext.elementClassLibrary === "tailwind") {
newElementClass = tailwindTextFieldElementClass(elementClassProps);
}
newElementClass = {
...newElementClass,
...((_a = puiContext.componentElementClasses) == null ? void 0 : _a.textField) && ((_b = puiContext.componentElementClasses) == null ? void 0 : _b.textField(elementClassProps)) || {}
};
}
if (elementClass) {
newElementClass = { ...newElementClass, ...elementClass(elementClassProps) };
}
setTextFieldElementClass(newElementClass);
}, [props, focus]);
const id = (0, import_react.useId)();
const inputId = `${id}-${name}`;
const descriptionId = `${id}-description`;
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_clsx2.default)(textFieldElementClass.root, extraElementClass == null ? void 0 : extraElementClass.root), "aria-disabled": disabled, children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_clsx2.default)(textFieldElementClass.labelBlock, extraElementClass == null ? void 0 : extraElementClass.labelBlock), children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { className: (0, import_clsx2.default)(textFieldElementClass.label, extraElementClass == null ? void 0 : extraElementClass.label), children: label }),
!!secondaryLabel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { className: (0, import_clsx2.default)(textFieldElementClass.secondaryLabel, extraElementClass == null ? void 0 : extraElementClass.secondaryLabel), children: secondaryLabel })
] }),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_clsx2.default)(textFieldElementClass.inputBlock, extraElementClass == null ? void 0 : extraElementClass.inputBlock), children: [
prefix && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx2.default)(textFieldElementClass.inputPrefix, extraElementClass == null ? void 0 : extraElementClass.inputPrefix), children: prefix }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"input",
{
ref,
name,
className: (0, import_clsx2.default)(textFieldElementClass.input, extraElementClass == null ? void 0 : extraElementClass.input),
type,
disabled,
"aria-disabled": disabled,
onChange: (e) => {
if (e.target.value !== value) {
!!onChange && onChange(e.target.value);
}
},
onFocus: () => setFocus(true),
onBlur: () => setFocus(false),
placeholder,
value,
id: inputId,
"aria-describedby": descriptionId,
...rest
}
),
suffix && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx2.default)(textFieldElementClass.inputSuffix, extraElementClass == null ? void 0 : extraElementClass.inputSuffix), children: suffix })
] }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx2.default)(textFieldElementClass.messageBlock, extraElementClass == null ? void 0 : extraElementClass.messageBlock), children: !errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx2.default)(textFieldElementClass.helperText, extraElementClass == null ? void 0 : extraElementClass.helperText), children: helperText }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx2.default)(textFieldElementClass.errorMessage, extraElementClass == null ? void 0 : extraElementClass.errorMessage), children: errorMessage }) })
] });
});
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
TextField
});