nexaas-ui-components 1.0.11 → 1.0.12

package/dist/index.cjs

@@ -2280,6 +2280,61 @@ var MaskedInput = ({
     }
   );
 };
+function InputTest({
+  label,
+  name,
+  control,
+  error,
+  required,
+  placeholder,
+  disabled,
+  defaultValue
+}) {
+  const fieldValidationMessages = [error == null ? void 0 : error.message];
+  const hasError = fieldValidationMessages.some((item) => item !== void 0);
+  const styles = {
+    input: `text-p-md pl-2 peer shadow-input border rounded-lg outline-none block pb-[10px] h-[46px] w-full disabled:bg-neutral-100 focus-visible:border-1 ${label ? "pt-[22px]" : "pt-[10px]"} ${hasError ? "border-dangerous-500 text-dangerous-500" : "border-neutral-300 focus-visible:border-blue-500"}`,
+    label: "absolute text-label top-[0.80rem] z-10 origin-[0] transform -translate-y-3 scale-75 duration-300 text-sm peer-focus:text-blue-500 peer-focus:scale-75 peer-focus:-translate-y-3 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 left-2.5 cursor-text"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactHookForm.Controller,
+    {
+      control,
+      name,
+      defaultValue,
+      render: ({ field }) => {
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ...field,
+              type: "text",
+              id: name,
+              className: clsx7__default.default(styles.input),
+              placeholder: !label && placeholder ? placeholder : " ",
+              disabled
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: clsx7__default.default(styles.label), children: [
+            label,
+            required && label && /* @__PURE__ */ jsxRuntime.jsx("strong", { className: "text-dangerous-500", children: "\xA0*" })
+          ] }),
+          fieldValidationMessages.map((message, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "text-dangerous-500 text-xs mt-1 ml-[2px]",
+              role: "alert",
+              "aria-label": message,
+              children: message
+            },
+            index
+          ))
+        ] });
+      }
+    }
+  );
+}
+InputTest.displayName = "InputTest";
 var Modal = ReactModalNamespace__namespace.default || ReactModalNamespace__namespace;
 var alertTypes = {
   success: "text-success-500",
@@ -3747,6 +3802,7 @@ exports.Input = Input;
 exports.InputMoney = InputMoney;
 exports.InputNumber = InputNumber;
 exports.InputPercentage = InputPercentage;
+exports.InputTest = InputTest;
 exports.Logo = Logo;
 exports.MaskedInput = MaskedInput;
 exports.ModalDialog = ModalDialog;