@axos-web-dev/shared-components 0.0.82 → 0.0.83

package/dist/Calculators/MarginTradingCalculator/index.js

@@ -0,0 +1,409 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { container, field_row, marketingTile, bodyContent, header_theme } from "../ApyCalculator/ApyCalculator.css.js";
+import { Button } from "../../Button/Button.js";
+import { button } from "../../Button/Button.css.js";
+import { useEffect } from "react";
+import "react-use";
+import { Chevron } from "../../Chevron/index.js";
+import { content, headerIconBillboard, buttons } from "../../IconBillboard/IconBillboard.css.js";
+import { getVariant } from "../../utils/getVariant.js";
+import { px40, fc1023, w100, bb_gray, fb50, r400_fs, fs36, green, h50, r603_fs24, mx1, table, r502_fs12, tc, bb0, btl, w25, btml, btr, bbl, bbml, bbr, savingsSummary, w50, g24, mtc } from "./MarginTradingCalculator.css.js";
+const MarginTradingCalculator = ({
+  marketingTiles,
+  variant
+}) => {
+  useEffect(() => {
+    const cashVal = document.querySelector("#accCashVal");
+    const secVal = document.querySelector("#accSecVal");
+    const borrowedAmt = document.querySelector("#borrowedAmt");
+    const purchasedAmt = document.querySelector("#purchasedAmt");
+    const duration = document.querySelector("#duration");
+    const calculateBtn = document.querySelector("#calculateBtn");
+    const axsCell = document.querySelector("#axStd");
+    const axeCell = document.querySelector("#axElt");
+    const tdCell = document.querySelector("#TDA");
+    const etCell = document.querySelector("#eTrd");
+    const errorMsg = document.querySelector("#errMsg");
+    const eliteSavings = document.querySelector("#eliteSavings");
+    const upTo = document.querySelector(".upto");
+    const over500 = document.querySelector(".over500");
+    const savingsSummary2 = document.querySelector(".savingsSummary");
+    if (calculateBtn) {
+      calculateBtn.addEventListener("click", () => {
+        calculateBuy();
+        calculateBorrow();
+        borrowedAmtChecker();
+      });
+    }
+    const usd = new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD"
+    });
+    const calculateBuy = () => {
+      if (cashVal && secVal && purchasedAmt && duration) {
+        if (Number(cashVal.value) > 0 || Number(secVal.value) > 0) {
+          purchasedAmt.innerHTML = usd.format(
+            Number(cashVal.value) * 2 + Number(secVal.value)
+          );
+          if (!duration.value)
+            duration.value = "30";
+          populateTable();
+        }
+      }
+    };
+    const calculateBorrow = () => {
+      if (cashVal && secVal && borrowedAmt && duration) {
+        if (Number(cashVal.value) > 0 || Number(secVal.value) > 0) {
+          borrowedAmt.innerHTML = usd.format(
+            Number(cashVal.value) + Number(secVal.value)
+          );
+          if (!duration.value)
+            duration.value = "30";
+          populateTable();
+        }
+      }
+    };
+    let savings;
+    const populateTable = () => {
+      const rateTiers = {
+        1: { axs: 13, axe: 12.5, td: 13.575, et: 14.2 },
+        2: { axs: 13, axe: 12.5, td: 13.575, et: 13.95 },
+        3: { axs: 12.5, axe: 12, td: 13.075, et: 13.7 },
+        4: { axs: 12.5, axe: 12, td: 12.125, et: 13.2 },
+        5: { axs: 12, axe: 11.5, td: 12.075, et: 12.7 },
+        6: { axs: 12, axe: 11.5, td: 12.75, et: 12.2 },
+        7: { axs: 11.5, axe: 11, td: "N/A", et: "N/A" },
+        8: { axs: 11, axe: 10.75, td: "N/A", et: "N/A" }
+      };
+      if (cashVal && secVal && axsCell && axeCell && tdCell && etCell && duration) {
+        const totalValue = Number(cashVal.value) + Number(secVal.value);
+        if (totalValue > 1999 && totalValue < 1e4) {
+          axsCell.innerHTML = (totalValue * rateTiers[1].axs / 100 / 360 * Number(duration.value)).toFixed(2);
+          axeCell.innerHTML = (totalValue * rateTiers[1].axe / 100 / 360 * Number(duration.value)).toFixed(2);
+          tdCell.innerHTML = (totalValue * rateTiers[1].td / 100 / 360 * Number(duration.value)).toFixed(2);
+          etCell.innerHTML = (totalValue * rateTiers[1].et / 100 / 360 * Number(duration.value)).toFixed(2);
+          savings = (rateTiers[1].td - rateTiers[1].axe) / ((rateTiers[1].td + rateTiers[1].axe) / 2) * 100;
+        } else if (totalValue > 9999 && totalValue < 25e3) {
+          axsCell.innerHTML = (totalValue * rateTiers[2].axs / 100 / 360 * Number(duration.value)).toFixed(2);
+          axeCell.innerHTML = (totalValue * rateTiers[2].axe / 100 / 360 * Number(duration.value)).toFixed(2);
+          tdCell.innerHTML = (totalValue * rateTiers[2].td / 100 / 360 * Number(duration.value)).toFixed(2);
+          etCell.innerHTML = (totalValue * rateTiers[2].et / 100 / 360 * Number(duration.value)).toFixed(2);
+          savings = (rateTiers[2].td - rateTiers[2].axe) / ((rateTiers[2].td + rateTiers[2].axe) / 2) * 100;
+        } else if (totalValue > 24999 && totalValue < 5e4) {
+          axsCell.innerHTML = (totalValue * rateTiers[3].axs / 100 / 360 * Number(duration.value)).toFixed(2);
+          axeCell.innerHTML = (totalValue * rateTiers[3].axe / 100 / 360 * Number(duration.value)).toFixed(2);
+          tdCell.innerHTML = (totalValue * rateTiers[3].td / 100 / 360 * Number(duration.value)).toFixed(2);
+          etCell.innerHTML = (totalValue * rateTiers[3].et / 100 / 360 * Number(duration.value)).toFixed(2);
+          savings = (rateTiers[3].td - rateTiers[3].axe) / ((rateTiers[3].td + rateTiers[3].axe) / 2) * 100;
+        } else if (totalValue > 49999 && totalValue < 1e5) {
+          axsCell.innerHTML = (totalValue * rateTiers[4].axs / 100 / 360 * Number(duration.value)).toFixed(2);
+          axeCell.innerHTML = (totalValue * rateTiers[4].axe / 100 / 360 * Number(duration.value)).toFixed(2);
+          tdCell.innerHTML = (totalValue * rateTiers[4].td / 100 / 360 * Number(duration.value)).toFixed(2);
+          etCell.innerHTML = (totalValue * rateTiers[4].et / 100 / 360 * Number(duration.value)).toFixed(2);
+          savings = (rateTiers[4].td - rateTiers[4].axe) / ((rateTiers[4].td + rateTiers[4].axe) / 2) * 100;
+        } else if (totalValue > 99999 && totalValue < 25e4) {
+          axsCell.innerHTML = (totalValue * rateTiers[5].axs / 100 / 360 * Number(duration.value)).toFixed(2);
+          axeCell.innerHTML = (totalValue * rateTiers[5].axe / 100 / 360 * Number(duration.value)).toFixed(2);
+          tdCell.innerHTML = (totalValue * rateTiers[5].td / 100 / 360 * Number(duration.value)).toFixed(2);
+          etCell.innerHTML = (totalValue * rateTiers[5].et / 100 / 360 * Number(duration.value)).toFixed(2);
+          savings = (rateTiers[5].td - rateTiers[5].axe) / ((rateTiers[5].td + rateTiers[5].axe) / 2) * 100;
+        } else if (totalValue > 249999 && totalValue < 5e5) {
+          axsCell.innerHTML = (totalValue * rateTiers[6].axs / 100 / 360 * Number(duration.value)).toFixed(2);
+          axeCell.innerHTML = (totalValue * rateTiers[6].axe / 100 / 360 * Number(duration.value)).toFixed(2);
+          tdCell.innerHTML = (totalValue * rateTiers[6].td / 100 / 360 * Number(duration.value)).toFixed(2);
+          etCell.innerHTML = (totalValue * rateTiers[6].et / 100 / 360 * Number(duration.value)).toFixed(2);
+          savings = (rateTiers[6].td - rateTiers[6].axe) / ((rateTiers[6].td + rateTiers[6].axe) / 2) * 100;
+        } else if (totalValue > 499999 && totalValue < 1e6) {
+          axsCell.innerHTML = (totalValue * rateTiers[7].axs / 100 / 360 * Number(duration.value)).toFixed(2);
+          axeCell.innerHTML = (totalValue * rateTiers[7].axe / 100 / 360 * Number(duration.value)).toFixed(2);
+          tdCell.innerHTML = "N/A";
+          etCell.innerHTML = "N/A";
+        } else if (totalValue > 999999) {
+          axsCell.innerHTML = (totalValue * rateTiers[8].axs / 100 / 360 * Number(duration.value)).toFixed(2);
+          axeCell.innerHTML = (totalValue * rateTiers[8].axe / 100 / 360 * Number(duration.value)).toFixed(2);
+          tdCell.innerHTML = "N/A";
+          etCell.innerHTML = "N/A";
+        }
+      }
+      calculateEliteSavings();
+    };
+    duration?.addEventListener("input", () => {
+      if (duration && Number(duration.value) < 1) {
+        duration.value = "";
+        clearTbl();
+      } else {
+        if (calculateBtn)
+          calculateBtn.click();
+      }
+    });
+    const borrowedAmtChecker = () => {
+      if (borrowedAmt && cashVal && secVal) {
+        if (errorMsg && Number(cashVal.value) + Number(secVal.value) / 2 < 2e3) {
+          errorMsg.innerHTML = "* Borrowed amount must be at least $2000";
+          clearTbl();
+        } else if (errorMsg) {
+          errorMsg.innerHTML = "";
+        }
+      }
+    };
+    const clearTbl = () => {
+      if (axsCell && axeCell && tdCell && etCell && upTo && savingsSummary2 && over500) {
+        axsCell.innerHTML = "";
+        axeCell.innerHTML = "";
+        tdCell.innerHTML = "";
+        etCell.innerHTML = "";
+        upTo.classList.add("hide");
+        savingsSummary2.classList.add("gradient_text", "green");
+        over500.classList.add("hide");
+      }
+    };
+    const calculateEliteSavings = () => {
+      if (etCell && eliteSavings && axsCell && axeCell && tdCell && etCell && duration) {
+        eliteSavings.innerHTML = `${Number(savings).toFixed(2)}%`;
+        if (etCell.innerHTML !== "N/A") {
+          upTo?.classList.remove("hide");
+          savingsSummary2?.classList.remove("gradient_text", "green");
+          over500?.classList.add("hide");
+        } else {
+          upTo?.classList.add("hide");
+          savingsSummary2?.classList.add("gradient_text", "green");
+          over500?.classList.remove("hide");
+        }
+      }
+      if (cashVal && secVal && Number(cashVal.value) + Number(secVal.value) / 2 < 2e3)
+        clearTbl();
+    };
+    if (cashVal) {
+      cashVal.addEventListener("input", () => {
+        const inputElement = cashVal;
+        const max = parseInt(inputElement.max || "0");
+        if (parseInt(inputElement.value) > max) {
+          inputElement.value = max.toString();
+        }
+      });
+    }
+    if (secVal) {
+      secVal.addEventListener("input", () => {
+        const inputElement = secVal;
+        const max = parseInt(inputElement.max || "0");
+        if (parseInt(inputElement.value) > max) {
+          inputElement.value = max.toString();
+        }
+      });
+    }
+    if (duration) {
+      duration.addEventListener("input", () => {
+        const inputElement = duration;
+        const max = parseInt(inputElement.max || "0");
+        if (parseInt(inputElement.value) > max) {
+          inputElement.value = max.toString();
+        }
+      });
+    }
+  }, []);
+  const calculator_variant = getVariant(variant);
+  console.log("marketingtiles: ", marketingTiles);
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      className: `section_spacer ${px40} ${container({ variant: getVariant(variant) })}`,
+      children: /* @__PURE__ */ jsx("div", { className: `containment`, children: /* @__PURE__ */ jsxs("div", { className: `flex ${fc1023}`, children: [
+        /* @__PURE__ */ jsxs("div", { className: w100, children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h2", { className: "header_2 gradient_text", children: "How much can I buy or borrow using margin?" }),
+            /* @__PURE__ */ jsxs("div", { className: `${field_row} flex_col`, children: [
+              /* @__PURE__ */ jsx("label", { className: "input_label", htmlFor: "accCashVal", children: "Account Cash Value" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  className: "bordered",
+                  type: "number",
+                  id: "accCashVal",
+                  max: 999999999e-2
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: `${field_row} flex_col`, children: [
+              /* @__PURE__ */ jsxs("label", { className: "input_label", htmlFor: "accSecVal", children: [
+                "Account Securities Value",
+                /* @__PURE__ */ jsx("sup", { children: "2" })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  className: "bordered",
+                  type: "number",
+                  id: "accSecVal",
+                  max: 999999999e-2
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: `center middle push_up_32`, children: /* @__PURE__ */ jsx(
+              "input",
+              {
+                className: `${button({ color: "primary", size: "medium", rounded: "medium" })} center`,
+                type: "button",
+                value: "Calculate",
+                id: "calculateBtn"
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: `flex push_up_32 ${bb_gray}`, children: [
+              /* @__PURE__ */ jsxs("h3", { className: `flex_col ${fb50} ${r400_fs}`, children: [
+                "Purchased Amount:",
+                " ",
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    id: "purchasedAmt",
+                    className: `gradient_text ${fs36} ${green} ${h50} ${r603_fs24}`
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("h3", { className: `flex_col ${fb50} ${r400_fs}`, children: [
+                "Borrowed Amount:",
+                " ",
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    id: "borrowedAmt",
+                    className: `gradient_text ${fs36} ${green} ${h50} ${r603_fs24}`
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("h2", { className: "header_2 push_up_32 gradient_text", children: "How much will it cost me?" }),
+            /* @__PURE__ */ jsxs("div", { className: `${field_row} flex_col`, children: [
+              /* @__PURE__ */ jsx("label", { className: "input_label", htmlFor: "duration", children: "Duration (days)" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  className: "bordered",
+                  type: "number",
+                  id: "duration",
+                  min: 0,
+                  max: 9999
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("p", { className: mx1, children: [
+            "See how Axos Invest rates compare to a few of our competitors.",
+            /* @__PURE__ */ jsx("sup", { children: "3" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { id: "errMsg" }),
+            /* @__PURE__ */ jsxs("table", { className: `${table} ${r502_fs12}`, children: [
+              /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                /* @__PURE__ */ jsx("th", { className: `ax-th ${tc} ${bb0} ${btl} ${w25}`, children: "Axos Standard" }),
+                /* @__PURE__ */ jsx("th", { className: `ax-th ${tc} ${bb0} ${btml} ${w25}`, children: "Axos Elite" }),
+                /* @__PURE__ */ jsx("th", { className: `${tc} ${bb0} ${w25}`, children: "TD Ameritrade" }),
+                /* @__PURE__ */ jsx("th", { className: `${tc} ${bb0} ${btr} ${w25}`, children: "E*TRADE" })
+              ] }) }),
+              /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                /* @__PURE__ */ jsx("td", { className: `${tc} ${bbl}`, "data-label": "Axos Standard", children: /* @__PURE__ */ jsx("span", { id: "axStd" }) }),
+                /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    className: `gradient_text ${tc} ${bbml}`,
+                    id: "eltTd",
+                    "data-label": "Axos Elite",
+                    children: /* @__PURE__ */ jsx("span", { className: "ax-td", id: "axElt" })
+                  }
+                ),
+                /* @__PURE__ */ jsx("td", { className: `${tc}`, "data-label": "TD Ameritrade", children: /* @__PURE__ */ jsx("span", { id: "TDA" }) }),
+                /* @__PURE__ */ jsx("td", { className: `${tc} ${bbr}`, "data-label": "E*TRADE", children: /* @__PURE__ */ jsx("span", { id: "eTrd" }) })
+              ] }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "text_center push_up_32", children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: `savingsSummary gradient_text ${savingsSummary}`,
+                  children: [
+                    "Save",
+                    " ",
+                    /* @__PURE__ */ jsxs("span", { className: "upto hide", children: [
+                      "up to",
+                      " ",
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          id: "eliteSavings",
+                          className: `gradient_text ${green} ${fs36}`
+                        }
+                      )
+                    ] }),
+                    " ",
+                    "by using",
+                    " ",
+                    /* @__PURE__ */ jsx("span", { className: "savingsSummaryElite", children: "Axos Elite" }),
+                    "!"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "over500 hide push_up", children: [
+                "Balance over $500k? Talk to us about our tiered rates and how we compare. ",
+                /* @__PURE__ */ jsx("br", {}),
+                /* @__PURE__ */ jsx("a", { href: "tel:1-888-585-4965", className: "supNum", children: "1-888-585-4965" }),
+                " ",
+                /* @__PURE__ */ jsx("a", { href: "mailto:support@axosinvest.com", children: "support@axosinvest.com" })
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: `flex_col ml_24 ${w50} ${g24} ${mtc}`, children: marketingTiles && marketingTiles?.map(
+          ({ id, headline, bodyCopy, callToActionRow }) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `${container({ variant: getVariant(variant) })} ${marketingTile} rounded bordered flex_col`,
+              children: [
+                /* @__PURE__ */ jsx("div", { className: `${content} ${bodyContent}`, children: /* @__PURE__ */ jsxs("div", { className: headerIconBillboard, children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: `header_3 ${header_theme({ variant: calculator_variant })}`,
+                      children: headline
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { children: bodyCopy })
+                ] }) }),
+                callToActionRow && /* @__PURE__ */ jsx("div", { className: `${buttons} middle`, children: callToActionRow.map(
+                  ({
+                    id: id2,
+                    variant: variant2,
+                    displayText,
+                    targetUrl,
+                    type
+                  }) => type === "Button" ? /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      targetUrl,
+                      color: getVariant(variant2),
+                      size: "medium",
+                      rounded: "medium",
+                      children: displayText
+                    },
+                    id2
+                  ) : /* @__PURE__ */ jsx(
+                    Chevron,
+                    {
+                      targetUrl,
+                      variant: getVariant(variant2),
+                      children: displayText
+                    },
+                    id2
+                  )
+                ) })
+              ]
+            },
+            id
+          )
+        ) })
+      ] }) })
+    }
+  );
+};
+export {
+  MarginTradingCalculator
+};

package/dist/Calculators/MaxLoanCalculator/index.d.ts

@@ -0,0 +1,8 @@
+import { default as React, FC } from 'react';
+
+export interface MonthlyPaymentCalculatorProps {
+    header?: React.ReactNode | string;
+    body?: React.ReactNode | string;
+    variant?: string;
+}
+export declare const MaxLoanCalculator: FC<MonthlyPaymentCalculatorProps>;

package/dist/Calculators/MaxLoanCalculator/index.js

@@ -0,0 +1,216 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { button } from "../../Button/Button.css.js";
+import { getVariant } from "../../utils/getVariant.js";
+import { title } from "../../IconBillboard/IconBillboard.css.js";
+import { calc_container, container, h2i, inputs_container, input_container, input_box, error_message, calculation_header, payment_results } from "../MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
+const MaxLoanCalculator = ({
+  variant,
+  header
+}) => {
+  const [monthlyPaymentDisplay, setMonthlyPaymentDisplay] = useState("");
+  const [monthlyPayment, setMonthlyPayment] = useState(
+    void 0
+  );
+  const [loanDuration, setLoanDuration] = useState(60);
+  const [interestRateDisplay, setInterestRateDisplay] = useState("");
+  const [interestRate, setInterestRate] = useState("");
+  const [loanAmount, setLoanAmount] = useState(0);
+  const [monthlyPaymentError, setMonthlyPaymentError] = useState(
+    null
+  );
+  const [interestRateError, setInterestRateError] = useState(
+    null
+  );
+  const formatToCurrency = (value) => {
+    const numericValue = parseFloat(value.replace(/[^0-9.]/g, ""));
+    if (isNaN(numericValue)) {
+      return "";
+    }
+    return numericValue.toLocaleString("en-US", {
+      style: "currency",
+      currency: "USD",
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0
+    });
+  };
+  const validateInputs = () => {
+    let isValid = true;
+    if (!monthlyPayment || isNaN(monthlyPayment) || monthlyPayment <= 0) {
+      setMonthlyPaymentError("Please enter a valid Monthly Payment amount.");
+      isValid = false;
+    } else {
+      setMonthlyPaymentError(null);
+    }
+    if (!interestRate || isNaN(parseFloat(interestRate))) {
+      setInterestRateError("Please enter an Interest Rate.");
+      isValid = false;
+    } else {
+      setInterestRateError(null);
+    }
+    return isValid;
+  };
+  const handleMonthlyPaymentChange = (event) => {
+    const value = event.target.value;
+    const formattedValue = formatToCurrency(value);
+    setMonthlyPaymentDisplay(formattedValue);
+    const numericValue = parseFloat(value.replace(/[^0-9.]/g, ""));
+    setMonthlyPayment(isNaN(numericValue) ? void 0 : numericValue);
+  };
+  const handleLoanDurationChange = (event) => {
+    setLoanDuration(Number(event.target.value));
+  };
+  const formatToPercentage = (value) => {
+    const numericValue = value.replace(/[^0-9.]/g, "");
+    if (numericValue === "") {
+      return "";
+    } else if (numericValue.endsWith("%")) {
+      return numericValue;
+    } else {
+      return numericValue.substring(0, numericValue.length - 2) + numericValue.substring(numericValue.length - 2) + "%";
+    }
+  };
+  const handleInterestRateChange = (event) => {
+    let value = event.target.value;
+    if (value.length < interestRateDisplay.length) {
+      if (interestRateDisplay.length > 1 && interestRateDisplay.endsWith("%")) {
+        value = interestRateDisplay.substring(0, interestRateDisplay.length - 2) + "%";
+      } else if (interestRateDisplay.length === 1) {
+        value = "";
+      } else {
+        value = interestRateDisplay.substring(
+          0,
+          interestRateDisplay.length - 1
+        );
+      }
+    } else {
+      value = formatToPercentage(value);
+    }
+    setInterestRateDisplay(value);
+    setInterestRate(value.replace(/[^0-9.]/g, ""));
+  };
+  const calculateLoanAmount = () => {
+    const numericInterestRate = parseFloat(interestRate);
+    const monthlyInterestRate = numericInterestRate / 100 / 12;
+    const months = loanDuration;
+    if (!isNaN(monthlyPayment || 0) && !isNaN(numericInterestRate) && months > 0) {
+      const loanAmount2 = (monthlyPayment || 0) * ((1 - Math.pow(1 + monthlyInterestRate, -months)) / monthlyInterestRate);
+      setLoanAmount(loanAmount2);
+    } else {
+      setLoanAmount(0);
+    }
+  };
+  const handleCalculate = () => {
+    if (validateInputs()) {
+      calculateLoanAmount();
+    } else {
+      setLoanAmount(0);
+    }
+  };
+  return /* @__PURE__ */ jsx("section", { className: `section_spacer`, children: /* @__PURE__ */ jsx("div", { className: "containment", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `rounded ${calc_container} ${container({ variant: getVariant(variant) })}`,
+      children: [
+        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+          "h2",
+          {
+            className: `text_center ${title({ variant: getVariant(variant) })} ${h2i}`,
+            children: header
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `flex center text_center push_up_32 bottom ${inputs_container}`,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: `flex flex_col ${input_container}`, children: [
+                /* @__PURE__ */ jsx("label", { htmlFor: "monthlyPayment", id: "amount1", children: "Monthly Payment" }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    className: `text_center bordered ${input_box}`,
+                    id: "monthlyPayment",
+                    maxLength: 10,
+                    name: "monthlyPayment",
+                    type: "text",
+                    placeholder: "$0",
+                    value: monthlyPaymentDisplay,
+                    onChange: handleMonthlyPaymentChange
+                  }
+                ),
+                monthlyPaymentError && /* @__PURE__ */ jsx("span", { className: error_message, children: monthlyPaymentError })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: `flex flex_col ${input_container}`, children: [
+                /* @__PURE__ */ jsx("label", { htmlFor: "loanDuration", children: "Loan Duration (Months)" }),
+                /* @__PURE__ */ jsxs(
+                  "select",
+                  {
+                    className: `text_center bordered ${input_box}`,
+                    id: "loanDuration",
+                    name: "loanDuration",
+                    value: loanDuration,
+                    onChange: handleLoanDurationChange,
+                    children: [
+                      /* @__PURE__ */ jsx("option", { value: "12", children: "12" }),
+                      /* @__PURE__ */ jsx("option", { value: "24", children: "24" }),
+                      /* @__PURE__ */ jsx("option", { value: "36", children: "36" }),
+                      /* @__PURE__ */ jsx("option", { value: "48", children: "48" }),
+                      /* @__PURE__ */ jsx("option", { value: "60", children: "60" }),
+                      /* @__PURE__ */ jsx("option", { value: "72", children: "72" }),
+                      /* @__PURE__ */ jsx("option", { value: "84", children: "84" }),
+                      /* @__PURE__ */ jsx("option", { value: "96", children: "96" })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: `flex flex_col ${input_container}`, children: [
+                /* @__PURE__ */ jsx("label", { htmlFor: "interestRate", children: "Interest Rate" }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    className: `text_center bordered ${input_box}`,
+                    id: "interestRate",
+                    maxLength: 6,
+                    name: "interestRate",
+                    type: "text",
+                    placeholder: "0.00%",
+                    value: interestRateDisplay,
+                    onChange: handleInterestRateChange
+                  }
+                ),
+                interestRateError && /* @__PURE__ */ jsx("span", { className: error_message, children: interestRateError })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: `flex center middle push_up_32`, children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: `${button({
+                color: "primary",
+                size: "medium",
+                rounded: "medium"
+              })} center`,
+              type: "button",
+              value: "Calculate",
+              onClick: handleCalculate
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "text_center flex flex_col center middle push_up_32", children: [
+            /* @__PURE__ */ jsx("span", { className: calculation_header, children: "Maximum Loan Amount You Can Borrow:" }),
+            /* @__PURE__ */ jsxs("span", { id: "estimatedLoanAmount", className: payment_results, children: [
+              "$",
+              loanAmount.toFixed(2)
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  ) }) });
+};
+export {
+  MaxLoanCalculator
+};

package/dist/{MonthlyPaymentCalculator → Calculators/MonthlyPaymentCalculator}/MonthlyPaymentCalculator.css.d.ts

@@ -25,3 +25,4 @@ export declare const calc_container: string;
 export declare const inputs_container: string;
 export declare const calculation_header: string;
 export declare const error_message: string;
+export declare const h2i: string;

package/dist/Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js

@@ -0,0 +1,24 @@
+/* empty css                                   */
+/* empty css                                      */
+/* empty css                                            */
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+var container = createRuntimeFn({ defaultClassName: "_10pitvc0", variantClassNames: { variant: { primary: "_10pitvc1", secondary: "_10pitvc2", tertiary: "_10pitvc3", quaternary: "_10pitvc4" } }, defaultVariants: {}, compoundVariants: [] });
+var input_container = "_10pitvc5";
+var input_box = "_10pitvc6";
+var payment_results = "_10pitvc7";
+var calc_container = "_10pitvc8";
+var inputs_container = "_10pitvc9";
+var calculation_header = "_10pitvca";
+var error_message = "_10pitvcb";
+var h2i = "_10pitvcc";
+export {
+  calc_container,
+  calculation_header,
+  container,
+  error_message,
+  h2i,
+  input_box,
+  input_container,
+  inputs_container,
+  payment_results
+};