@axos-web-dev/shared-components 0.0.74 → 0.0.76

package/dist/AnnualFeeCalculator/AnnualFeeCalculator.css.d.ts

@@ -0,0 +1,34 @@
+export declare const container: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        primary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            border: "1px solid #D4D4D4";
+        };
+        secondary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        tertiary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        quaternary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;
+export declare const calc_block: string;
+export declare const text_block: string;
+export declare const slider_block_wrapper: string;
+export declare const calc_container: string;
+export declare const fb50: string;
+export declare const stat: string;
+export declare const w100: string;
+export declare const balance_wrapper: string;
+export declare const stat_row: string;
+export declare const slider_wrapper: string;
+export declare const slider: string;
+export declare const pt0_1023: string;
+export declare const pb0_1023: string;

package/dist/AnnualFeeCalculator/AnnualFeeCalculator.css.js

@@ -0,0 +1,34 @@
+/* empty css                                */
+/* empty css                                   */
+/* empty css                                       */
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+var container = createRuntimeFn({ defaultClassName: "tosm7c0", variantClassNames: { variant: { primary: "tosm7c1", secondary: "tosm7c2", tertiary: "tosm7c3", quaternary: "tosm7c4" } }, defaultVariants: {}, compoundVariants: [] });
+var calc_block = "tosm7c5";
+var text_block = "tosm7c6";
+var slider_block_wrapper = "tosm7c7";
+var calc_container = "tosm7c8";
+var fb50 = "tosm7c9";
+var stat = "tosm7ca";
+var w100 = "tosm7cb";
+var balance_wrapper = "tosm7cc";
+var stat_row = "tosm7cd";
+var slider_wrapper = "tosm7ce";
+var slider = "tosm7cf";
+var pt0_1023 = "tosm7cg";
+var pb0_1023 = "tosm7ch";
+export {
+  balance_wrapper,
+  calc_block,
+  calc_container,
+  container,
+  fb50,
+  pb0_1023,
+  pt0_1023,
+  slider,
+  slider_block_wrapper,
+  slider_wrapper,
+  stat,
+  stat_row,
+  text_block,
+  w100
+};

package/dist/AnnualFeeCalculator/index.d.ts

@@ -0,0 +1,10 @@
+import { FC, ReactNode } from 'react';
+import { IconBillboardProps } from '../IconBillboard/IconBillboard.interface';
+
+export interface AnnualFeeCalculatorProps {
+    header?: ReactNode | string;
+    body?: ReactNode | string;
+    marketingTiles?: IconBillboardProps[];
+    variant?: string;
+}
+export declare const AnnualFeeCalculator: FC<AnnualFeeCalculatorProps>;

package/dist/AnnualFeeCalculator/index.js

@@ -0,0 +1,143 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import { container, calc_container, calc_block, pb0_1023, slider_block_wrapper, w100, stat_row, balance_wrapper, fb50, stat, slider_wrapper, slider, pt0_1023, text_block } from "./AnnualFeeCalculator.css.js";
+import { Button } from "../Button/Button.js";
+import { Chevron } from "../Chevron/index.js";
+import { getVariant } from "../utils/getVariant.js";
+import { title } from "../IconBillboard/IconBillboard.css.js";
+const AnnualFeeCalculator = ({
+  marketingTiles,
+  variant
+}) => {
+  const sliderRef = useRef(null);
+  const balanceRef = useRef(null);
+  const feeRef = useRef(null);
+  const [sliderValue, setSliderValue] = useState(1e5);
+  useEffect(() => {
+    function calculateFee(value) {
+      return (value * 24e-4 / 12).toFixed(2);
+    }
+    function handleSliderInput() {
+      const slider2 = sliderRef.current;
+      const balance = balanceRef.current;
+      const fee = feeRef.current;
+      if (slider2 && balance && fee) {
+        const minValue = parseFloat(slider2.min);
+        const maxValue = parseFloat(slider2.max);
+        const value = parseFloat(slider2.value);
+        balance.textContent = value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+        fee.textContent = calculateFee(value);
+        const gradientValue = (value - minValue) / (maxValue - minValue) * 100;
+        slider2.style.background = `linear-gradient(to right, #1E3860 0%, #38D7A4 ${gradientValue}%, #d4d4d4 ${gradientValue}%, #d4d4d4 100%)`;
+      }
+    }
+    if (sliderRef.current && balanceRef.current && feeRef.current) {
+      const slider2 = sliderRef.current;
+      const balance = balanceRef.current;
+      const fee = feeRef.current;
+      slider2.addEventListener("input", handleSliderInput);
+      const value = parseFloat(slider2.value);
+      const minValue = parseFloat(slider2.min);
+      const maxValue = parseFloat(slider2.max);
+      balance.textContent = value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+      fee.textContent = calculateFee(value);
+      const gradientValue = (value - minValue) / (maxValue - minValue) * 100;
+      slider2.style.background = `linear-gradient(to right, #1E3860 0%, #38D7A4 ${gradientValue}%, #d4d4d4 ${gradientValue}%, #d4d4d4 100%)`;
+      return () => {
+        slider2.removeEventListener("input", handleSliderInput);
+      };
+    }
+  }, []);
+  const handleSliderChange = (event) => {
+    setSliderValue(parseFloat(event.target.value));
+  };
+  return /* @__PURE__ */ jsx("section", { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `rounded containment ${container({ variant: getVariant(variant) })}`,
+      children: /* @__PURE__ */ jsxs("div", { className: `flex ${calc_container}`, children: [
+        /* @__PURE__ */ jsx("div", { className: `${calc_block} ${pb0_1023}`, children: /* @__PURE__ */ jsxs("div", { className: slider_block_wrapper, children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `text_center ${title({ variant: getVariant(variant) })}`,
+              children: "Annual Fee Calculator"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: `flex push_up_32 ${w100} ${stat_row}`, children: [
+            /* @__PURE__ */ jsxs("div", { className: `${balance_wrapper} text_center ${fb50}`, children: [
+              /* @__PURE__ */ jsxs("p", { className: stat, children: [
+                "$",
+                /* @__PURE__ */ jsx("span", { ref: balanceRef, id: "balance", children: "100,000" })
+              ] }),
+              /* @__PURE__ */ jsx("p", { className: "stat-subhead mb-0", children: "Account Balance" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: `fee-wrapper text_center ${fb50}`, children: [
+              /* @__PURE__ */ jsxs("p", { className: stat, children: [
+                "$",
+                /* @__PURE__ */ jsx("span", { ref: feeRef, id: "fee", children: "20.00" })
+              ] }),
+              /* @__PURE__ */ jsxs("p", { className: "stat-subhead mb-0", children: [
+                "Estimated Total ",
+                /* @__PURE__ */ jsx("br", {}),
+                "Monthly Cost"
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: `${slider_wrapper} push_up_32`, children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "range",
+              min: "500",
+              max: "500000",
+              value: sliderValue,
+              step: "500",
+              ref: sliderRef,
+              onChange: handleSliderChange,
+              className: slider
+            }
+          ) })
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: `${calc_block} ${pt0_1023} ${text_block}`, children: marketingTiles && marketingTiles?.map(
+          ({ id, headline, bodyCopy, callToActionRow }) => /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { className: title({ variant: getVariant(variant) }), children: headline }),
+              /* @__PURE__ */ jsx("div", { className: "push_up", children: bodyCopy })
+            ] }),
+            callToActionRow && /* @__PURE__ */ jsx("div", { className: "push_up", 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 {
+  AnnualFeeCalculator
+};

package/dist/ApyCalculator/ApyCalculator.css.d.ts

@@ -1,3 +1,23 @@
+export declare const container: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        primary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        secondary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        tertiary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        quaternary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;
 export declare const apy_calculator: string;
 export declare const calculator_section: string;
 export declare const section_header: string;
@@ -14,6 +34,51 @@ export declare const submit_section: string;
 export declare const span_12: string;
 export declare const form_disclosure: string;
 export declare const marketing: string;
-export declare const marketing_tile: string;
-export declare const cta_section: string;
-export declare const marketing_table: string;
+export declare const marketingTile: string;
+export declare const bodyContent: string;
+export declare const header_theme: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        primary: {
+            selectors: {
+                [x: string]: {
+                    WebkitBackgroundClip: "text";
+                    backgroundImage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    WebkitTextFillColor: "transparent";
+                    textShadow: "0px 0px #00000000";
+                    color?: undefined;
+                } | {
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    WebkitBackgroundClip?: undefined;
+                    backgroundImage?: undefined;
+                    WebkitTextFillColor?: undefined;
+                    textShadow?: undefined;
+                };
+            };
+        };
+        secondary: {
+            selectors: {
+                [x: string]: {
+                    WebkitBackgroundClip: "text";
+                    backgroundImage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    WebkitTextFillColor: "transparent";
+                    textShadow: "0px 0px #00000000";
+                    color?: undefined;
+                } | {
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    WebkitBackgroundClip?: undefined;
+                    backgroundImage?: undefined;
+                    WebkitTextFillColor?: undefined;
+                    textShadow?: undefined;
+                };
+            };
+        };
+        tertiary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        quaternary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;
+export declare const mt_8: string;
+export declare const pis_0: string;

package/dist/ApyCalculator/ApyCalculator.css.js

@@ -1,40 +1,47 @@
 /* empty css                                */
 /* empty css                                   */
 /* empty css                                 */
-var apy_calculator = "_74vxga0";
-var calculator_section = "_74vxga1";
-var section_header = "_74vxga2";
-var apy_calculator_form = "_74vxga3";
-var errorTag = "_74vxga4";
-var fieldset = "_74vxga5";
-var field_row = "_74vxga6";
-var relative = "_74vxga7";
-var label_symbol = "_74vxga8";
-var cash = "_74vxga9";
-var percent = "_74vxgaa";
-var prefix_pad = "_74vxgab";
-var submit_section = "_74vxgac";
-var span_12 = "_74vxgad";
-var form_disclosure = "_74vxgae";
-var marketing = "_74vxgaf";
-var marketing_tile = "_74vxgag";
-var cta_section = "_74vxgah";
-var marketing_table = "_74vxgai";
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+var container = createRuntimeFn({ defaultClassName: "_74vxga0", variantClassNames: { variant: { primary: "_74vxga1", secondary: "_74vxga2", tertiary: "_74vxga3", quaternary: "_74vxga4" } }, defaultVariants: {}, compoundVariants: [] });
+var apy_calculator = "_74vxga5";
+var calculator_section = "_74vxga6";
+var section_header = "_74vxga7";
+var apy_calculator_form = "_74vxga8";
+var errorTag = "_74vxga9";
+var fieldset = "_74vxgaa";
+var field_row = "_74vxgab";
+var relative = "_74vxgac";
+var label_symbol = "_74vxgad";
+var cash = "_74vxgae";
+var percent = "_74vxgaf";
+var prefix_pad = "_74vxgag";
+var submit_section = "_74vxgah";
+var span_12 = "_74vxgai";
+var form_disclosure = "_74vxgaj";
+var marketing = "_74vxgak";
+var marketingTile = "_74vxgal";
+var bodyContent = "_74vxgam";
+var header_theme = createRuntimeFn({ defaultClassName: "_74vxgan", variantClassNames: { variant: { primary: "_74vxgao", secondary: "_74vxgap", tertiary: "_74vxgaq", quaternary: "_74vxgar" } }, defaultVariants: {}, compoundVariants: [] });
+var mt_8 = "_74vxgas";
+var pis_0 = "_74vxgat";
 export {
   apy_calculator,
   apy_calculator_form,
+  bodyContent,
   calculator_section,
   cash,
-  cta_section,
+  container,
   errorTag,
   field_row,
   fieldset,
   form_disclosure,
+  header_theme,
   label_symbol,
   marketing,
-  marketing_table,
-  marketing_tile,
+  marketingTile,
+  mt_8,
   percent,
+  pis_0,
   prefix_pad,
   relative,
   section_header,

package/dist/ApyCalculator/index.d.ts

@@ -1,6 +1,12 @@
 import { FC, ReactNode } from 'react';
+import { IconBillboardProps } from '../IconBillboard/IconBillboard.interface';
+import { QuaternaryTypes } from '../utils';
 
 export interface ApyCalculatorProps {
-    header: ReactNode | string;
+    header?: ReactNode | string;
+    body?: ReactNode | string;
+    marketingTiles?: IconBillboardProps[];
+    variant: QuaternaryTypes;
+    disclosure?: ReactNode | string;
 }
 export declare const ApyCalculator: FC<ApyCalculatorProps>;