@wavelengthusaf/components 2.7.0 → 2.7.1

package/README.md

@@ -14,6 +14,11 @@ npm install @wavelengthusaf/components
 
 ## Release Notes
 
+### 2.7.1
+
+- 4/1/2025
+- Updated WavelengthTextField component to have another variant.
+
 ### 2.7.0
 
 - 3/24/2025

package/dist/cjs/index.cjs

@@ -206,7 +206,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element = REACT_ELEMENT_TYPE;
         var ForwardRef2 = REACT_FORWARD_REF_TYPE;
-        var Fragment15 = REACT_FRAGMENT_TYPE;
+        var Fragment14 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo2 = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -265,7 +265,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element;
         exports.ForwardRef = ForwardRef2;
-        exports.Fragment = Fragment15;
+        exports.Fragment = Fragment14;
         exports.Lazy = Lazy;
         exports.Memo = Memo2;
         exports.Portal = Portal;
@@ -5959,6 +5959,54 @@ function DefaultPagination({ totalPages, currentPageNumber, siblingCount = 1, bo
 
 
 
+
+var InputWrapper = _styledcomponents2.default.div`
+  position: relative;
+  width: 100%;
+`;
+var StandardTextField = _styledcomponents2.default.input`
+  width: ${(props) => props.width || "320px"};
+  height: ${(props) => props.height || "35px"};
+  padding-left: 12px;
+  font-size: 16px;
+  border: none;
+  border-bottom: 2px solid ${(props) => props.error ? "red" : props.borderColor || "#ccc"}; /* Red border when error */
+  color: ${(props) => props.textColor || "black"};
+  outline: none;
+  box-sizing: border-box;
+  background-color: transparent;
+
+  &:focus {
+    border-bottom-color: ${(props) => props.error ? "red" : props.focusColor || "#d16a2f"};
+  }
+
+  &::placeholder {
+    opacity: 0.4;
+    color: ${(props) => props.error ? "red" : "#888"}; /* Placeholder color changes to red on error */
+  }
+
+  &:focus + label,
+  &:valid + label {
+    top: -5px;
+    font-size: 12px;
+    color: ${(props) => props.error ? "red" : props.labelColor}; // Change label color on error
+  }
+
+  &:not(:placeholder-shown) + label {
+    top: -8px;
+    font-size: 12px;
+    color: ${(props) => props.error ? "red" : props.labelColor}; // Label color when input has a value
+  }
+`;
+var StyledLabel = _styledcomponents2.default.label`
+  position: absolute;
+  top: 8px;
+  left: 16px;
+  font-size: 14px;
+  color: ${(props) => props.color || "#aaa"};
+  pointer-events: none;
+  transition: all 0.3s ease-out;
+`;
 function WavelengthTextField(props) {
   const [hasError, setHasError] = _react.useState.call(void 0, false);
   const handleChange = _react.useCallback.call(void 0, 
@@ -5969,48 +6017,74 @@ function WavelengthTextField(props) {
       }
     },
     [props.regex]
-    // Ensures function doesn't change unless `regex` does
   );
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _TextField2.default,
-    {
-      type: props.type,
-      required: props.required,
-      label: props.label,
-      onChange: (e) => {
-        handleChange(e);
-        _optionalChain([props, 'access', _18 => _18.onChange, 'optionalCall', _19 => _19(e)]);
-      },
-      error: hasError,
-      helperText: hasError ? "Invalid Input" : "",
-      sx: {
-        "& .MuiInputBase-root": {
-          height: props.height || "51px",
-          width: props.width || "320px",
-          borderRadius: "8px"
+  if (props.variant === "outlined") {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _TextField2.default,
+      {
+        type: props.type,
+        required: props.required,
+        label: props.label,
+        onChange: (e) => {
+          handleChange(e);
+          _optionalChain([props, 'access', _18 => _18.onChange, 'optionalCall', _19 => _19(e)]);
         },
-        "&.MuiTextField-root": {
-          "& label": { color: !hasError ? props.labelColor || "rgba(89, 99, 129, 1)" : "red" },
-          "& .MuiOutlinedInput-root": {
-            "& fieldset": {
-              border: "1px solid",
-              borderColor: !hasError ? props.borderColor || `rgba(89, 99, 129, 1)` : "red"
-            },
-            "&.Mui-focused fieldset": {
-              borderColor: !hasError ? props.focusColor || `rgba(26, 128, 131, 0.1)` : "red"
+        error: hasError,
+        helperText: hasError ? props.errorMessage : "",
+        sx: {
+          "& .MuiInputBase-root": {
+            height: props.height || "51px",
+            width: props.width || "320px",
+            borderRadius: "8px"
+          },
+          "&.MuiTextField-root": {
+            "& label": { color: !hasError ? props.labelColor || "rgba(89, 99, 129, 1)" : "red" },
+            "& .MuiOutlinedInput-root": {
+              "& fieldset": {
+                border: "1px solid",
+                borderColor: !hasError ? props.borderColor || `rgba(89, 99, 129, 1)` : "red"
+              },
+              "&.Mui-focused fieldset": {
+                borderColor: !hasError ? props.focusColor || `rgba(26, 128, 131, 0.1)` : "red"
+              }
             }
           }
+        },
+        placeholder: props.placeholder,
+        InputLabelProps: {
+          shrink: props.shrink
+        },
+        InputProps: {
+          style: { color: props.textColor || "inherit" }
         }
-      },
-      placeholder: props.placeholder,
-      InputLabelProps: {
-        shrink: props.shrink
-      },
-      InputProps: {
-        style: { color: props.textColor || "inherit" }
       }
-    }
-  ) });
+    );
+  } else if (props.variant === "standard") {
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, InputWrapper, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        StandardTextField,
+        {
+          type: props.type,
+          id: "custom-input",
+          placeholder: props.placeholder,
+          required: props.required,
+          focusColor: props.focusColor,
+          borderColor: props.borderColor,
+          width: props.width,
+          height: props.height,
+          textColor: props.textColor,
+          error: hasError,
+          onChange: (e) => {
+            handleChange(e);
+            _optionalChain([props, 'access', _20 => _20.onChange, 'optionalCall', _21 => _21(e)]);
+          }
+        }
+      ),
+      props.label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledLabel, { htmlFor: "custom-input", color: props.labelColor, children: props.label }),
+      props.error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { fontSize: ".75rem", color: "red", paddingLeft: "12px", marginTop: "3px" }, children: props.errorMessage })
+    ] });
+  }
+  return null;
 }