@wavelengthusaf/components 2.7.0 → 2.7.1

package/dist/cjs/index.d.cts

@@ -497,7 +497,10 @@ interface TextFieldProps {
     regex?: RegExp;
     placeholder?: string;
     type?: string;
+    variant?: "outlined" | "standard";
+    error?: boolean;
+    errorMessage?: string;
 }
-declare function WavelengthTextField(props: TextFieldProps): react_jsx_runtime.JSX.Element;
+declare function WavelengthTextField(props: TextFieldProps): react_jsx_runtime.JSX.Element | null;
 
 export { AppLogo, ButtonIcon, ButtonMenu, DefaultCarousel, DefaultIcon, DefaultPagination, ManyPlanesComponent, NotAvailablePage, type SearchProps, type SearchResult, SearchTextField, SliderCardCarousel, type StyledButtonPropsTwo, TestSnackbar, type ThemeProperties, WavelengthAppTheme, WavelengthAutocomplete, WavelengthBanner, WavelengthBox, WavelengthButton, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFooter, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthTextField, WavelengthTitleBar, add, ascendingRange, concat, findBestStringMatch, type menuItemProps, range, useOutsideClick, useThemeContext };

package/dist/components/TextField/WavelengthTextField.d.ts

@@ -13,7 +13,10 @@ interface TextFieldProps {
     regex?: RegExp;
     placeholder?: string;
     type?: string;
+    variant?: "outlined" | "standard";
+    error?: boolean;
+    errorMessage?: string;
 }
-export declare function WavelengthTextField(props: TextFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function WavelengthTextField(props: TextFieldProps): import("react/jsx-runtime").JSX.Element | null;
 export default WavelengthTextField;
 //# sourceMappingURL=WavelengthTextField.d.ts.map

package/dist/components/TextField/WavelengthTextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WavelengthTextField.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/WavelengthTextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAGrD,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,GAAG,SAAS,CAAC;IACxF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,cAAc,2CAoDxD;AAED,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"WavelengthTextField.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/WavelengthTextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAyDrD,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,GAAG,SAAS,CAAC;IACxF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAClC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,cAAc,kDAoFxD;AAED,eAAe,mBAAmB,CAAC"}

package/dist/esm/index.d.ts

@@ -497,7 +497,10 @@ interface TextFieldProps {
     regex?: RegExp;
     placeholder?: string;
     type?: string;
+    variant?: "outlined" | "standard";
+    error?: boolean;
+    errorMessage?: string;
 }
-declare function WavelengthTextField(props: TextFieldProps): react_jsx_runtime.JSX.Element;
+declare function WavelengthTextField(props: TextFieldProps): react_jsx_runtime.JSX.Element | null;
 
 export { AppLogo, ButtonIcon, ButtonMenu, DefaultCarousel, DefaultIcon, DefaultPagination, ManyPlanesComponent, NotAvailablePage, type SearchProps, type SearchResult, SearchTextField, SliderCardCarousel, type StyledButtonPropsTwo, TestSnackbar, type ThemeProperties, WavelengthAppTheme, WavelengthAutocomplete, WavelengthBanner, WavelengthBox, WavelengthButton, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFooter, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthTextField, WavelengthTitleBar, add, ascendingRange, concat, findBestStringMatch, type menuItemProps, range, useOutsideClick, useThemeContext };

package/dist/esm/index.js

@@ -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;
@@ -5958,7 +5958,55 @@ function DefaultPagination({ totalPages, currentPageNumber, siblingCount = 1, bo
 // src/components/TextField/WavelengthTextField.tsx
 import { useCallback, useState as useState9 } from "react";
 import TextField4 from "@mui/material/TextField";
-import { Fragment as Fragment14, jsx as jsx37 } from "react/jsx-runtime";
+import styled10 from "styled-components";
+import { jsx as jsx37, jsxs as jsxs29 } from "react/jsx-runtime";
+var InputWrapper = styled10.div`
+  position: relative;
+  width: 100%;
+`;
+var StandardTextField = styled10.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 = styled10.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] = useState9(false);
   const handleChange = useCallback(
@@ -5969,48 +6017,74 @@ function WavelengthTextField(props) {
       }
     },
     [props.regex]
-    // Ensures function doesn't change unless `regex` does
   );
-  return /* @__PURE__ */ jsx37(Fragment14, { children: /* @__PURE__ */ jsx37(
-    TextField4,
-    {
-      type: props.type,
-      required: props.required,
-      label: props.label,
-      onChange: (e) => {
-        handleChange(e);
-        props.onChange?.(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__ */ jsx37(
+      TextField4,
+      {
+        type: props.type,
+        required: props.required,
+        label: props.label,
+        onChange: (e) => {
+          handleChange(e);
+          props.onChange?.(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__ */ jsxs29(InputWrapper, { children: [
+      /* @__PURE__ */ jsx37(
+        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);
+            props.onChange?.(e);
+          }
+        }
+      ),
+      props.label && /* @__PURE__ */ jsx37(StyledLabel, { htmlFor: "custom-input", color: props.labelColor, children: props.label }),
+      props.error && /* @__PURE__ */ jsx37("div", { style: { fontSize: ".75rem", color: "red", paddingLeft: "12px", marginTop: "3px" }, children: props.errorMessage })
+    ] });
+  }
+  return null;
 }
 export {
   AppLogo,