@axos-web-dev/shared-components 2.0.0-dev.18-apy.3 → 2.0.0-dev.18-apy.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/Calculators/ApyCalculator/ApyCalculator.css.d.ts +16 -1
  2. package/dist/Calculators/ApyCalculator/ApyCalculator.css.js +9 -9
  3. package/dist/Calculators/ApyCalculator/index.js +54 -43
  4. package/dist/assets/Calculators/ApyCalculator/ApyCalculator.css +24 -12
  5. package/package.json +1 -1
package/dist/Calculators/ApyCalculator/ApyCalculator.css.d.ts CHANGED
@@ -70,7 +70,22 @@ export declare const result_item_value: string;
70
70
  export declare const result_image: string;
71
71
  export declare const definitions_accordion: string;
72
72
  export declare const definitions_button: string;
73
- export declare const definitions_h2: string;
73
+ export declare const definitions_h2: import('@vanilla-extract/recipes').RuntimeFn<{
74
+ variant: {
75
+ primary: {
76
+ color: `var(--${string})`;
77
+ };
78
+ secondary: {
79
+ color: `var(--${string})`;
80
+ };
81
+ tertiary: {
82
+ color: `var(--${string})`;
83
+ };
84
+ quaternary: {
85
+ color: `var(--${string})`;
86
+ };
87
+ };
88
+ }>;
74
89
  export declare const definitions_panel: string;
75
90
  export declare const definitions_columns: string;
76
91
  export declare const definitions_column: string;
package/dist/Calculators/ApyCalculator/ApyCalculator.css.js CHANGED
@@ -43,15 +43,15 @@ var result_item_value = "_1vox1xj17";
43
43
  var result_image = "_1vox1xj18";
44
44
  var definitions_accordion = "_1vox1xj19";
45
45
  var definitions_button = "_1vox1xj1a";
46
- var definitions_h2 = "_1vox1xj1b";
47
- var definitions_panel = "_1vox1xj1c";
48
- var definitions_columns = "_1vox1xj1d";
49
- var definitions_column = "_1vox1xj1e";
50
- var definitions_item = "_1vox1xj1f";
51
- var definitions_term = "_1vox1xj1g";
52
- var definitions_text = "_1vox1xj1h";
53
- var marketingTile = "_1vox1xj1i";
54
- var bodyContent = "_1vox1xj1j";
46
+ var definitions_h2 = createRuntimeFn({ defaultClassName: "_1vox1xj1b", variantClassNames: { variant: { primary: "_1vox1xj1c", secondary: "_1vox1xj1d", tertiary: "_1vox1xj1e", quaternary: "_1vox1xj1f" } }, defaultVariants: {}, compoundVariants: [] });
47
+ var definitions_panel = "_1vox1xj1g";
48
+ var definitions_columns = "_1vox1xj1h";
49
+ var definitions_column = "_1vox1xj1i";
50
+ var definitions_item = "_1vox1xj1j";
51
+ var definitions_term = "_1vox1xj1k";
52
+ var definitions_text = "_1vox1xj1l";
53
+ var marketingTile = "_1vox1xj1m";
54
+ var bodyContent = "_1vox1xj1n";
55
55
  export {
56
56
  apy_calculator,
57
57
  apy_calculator_form,
package/dist/Calculators/ApyCalculator/index.js CHANGED
@@ -6,7 +6,7 @@ import Image from "next/image.js";
6
6
  import { Field, Label, Input, Description, Listbox, ListboxButton, ListboxOptions, ListboxOption, Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/react";
7
7
  import { AnimatePresence, motion } from "framer-motion";
8
8
  import { useState, useCallback, useEffect, useRef } from "react";
9
- import { apy_calculator, section_header, header_theme, mt_8, calculator_section, apy_calculator_form, fieldset, field_row, relative, field_label, field_row_input, field_row_input_error, field_error, label_symbol, percent, listbox_button, chevron_icon, listbox_options, listbox_option, optional_badge, form_disclosure, results_wrapper, result_card, result_section, result_image, result_value, scrambling, result_value_label, result_item, result_item_label, result_item_value, definitions_accordion, definitions_button, definitions_h2, definitions_panel, definitions_columns, definitions_column, definitions_item, definitions_term, definitions_text, container } from "./ApyCalculator.css.js";
9
+ import { apy_calculator, section_header, header_theme, mt_8, calculator_section, apy_calculator_form, fieldset, field_row, relative, field_label, field_row_input, field_row_input_error, field_error, label_symbol, percent, listbox_button, chevron_icon, listbox_options, listbox_option, optional_badge, form_disclosure, results_wrapper, result_card, result_section, result_image, result_value, scrambling, result_value_label, result_item, result_item_label, result_item_value, definitions_accordion, definitions_button, definitions_h2, definitions_columns, definitions_panel, definitions_column, definitions_item, definitions_term, definitions_text, container } from "./ApyCalculator.css.js";
10
10
  const COMPOUNDING_OPTIONS = [
11
11
  { value: 360, label: "Daily" },
12
12
  { value: 12, label: "Monthly" },
@@ -173,7 +173,7 @@ const ApyCalculator = ({
173
173
  const raw = e.target.value;
174
174
  const num = parseFloat(raw.replace(/[^0-9.]/g, ""));
175
175
  setAPY(num);
176
- setAPYDisplay(raw);
176
+ setAPYDisplay(raw.replace(/[^0-9.]/g, ""));
177
177
  };
178
178
  const [endingBalanceRaw, setEndingBalanceRaw] = useState(0);
179
179
  const [totalDepositsRaw, setTotalDepositsRaw] = useState(0);
@@ -303,9 +303,9 @@ const ApyCalculator = ({
303
303
  type: "text",
304
304
  inputMode: "numeric",
305
305
  name: "apy",
306
- min: 0,
307
306
  value: APYDisplay,
308
307
  onChange: handleAPYChange,
308
+ onWheel: (e) => e.currentTarget.blur(),
309
309
  "aria-invalid": !!fieldErrors.APY,
310
310
  "aria-describedby": fieldErrors.APY ? "apy-error" : void 0
311
311
  }
@@ -504,7 +504,13 @@ const ApyCalculator = ({
504
504
  style: { paddingBlock: "0px" },
505
505
  children: /* @__PURE__ */ jsx(Disclosure, { children: ({ open }) => /* @__PURE__ */ jsxs(Fragment, { children: [
506
506
  /* @__PURE__ */ jsxs(DisclosureButton, { className: definitions_button, children: [
507
- /* @__PURE__ */ jsx("h2", { className: definitions_h2, children: "Calculator definitions" }),
507
+ /* @__PURE__ */ jsx(
508
+ "h2",
509
+ {
510
+ className: definitions_h2({ variant: getVariant(variant) }),
511
+ children: "Calculator definitions"
512
+ }
513
+ ),
508
514
  /* @__PURE__ */ jsx(
509
515
  "svg",
510
516
  {
@@ -529,49 +535,54 @@ const ApyCalculator = ({
529
535
  {
530
536
  static: true,
531
537
  as: motion.div,
532
- className: definitions_panel,
533
538
  initial: { opacity: 0, height: 0, y: -6 },
534
539
  animate: { opacity: 1, height: "auto", y: 0 },
535
540
  exit: { opacity: 0, height: 0, y: -4 },
536
541
  style: { overflow: "hidden" },
537
- children: /* @__PURE__ */ jsxs("div", { className: definitions_columns, children: [
538
- /* @__PURE__ */ jsx("div", { className: definitions_column, children: leftDefinitions.map((definition, index) => /* @__PURE__ */ jsxs(
539
- motion.div,
540
- {
541
- className: definitions_item,
542
- initial: { opacity: 0, y: 8 },
543
- animate: { opacity: 1, y: 0 },
544
- exit: { opacity: 0, y: 6 },
545
- transition: {
546
- ...DEFINITIONS_ITEM_TRANSITION,
547
- delay: index * 0.045
548
- },
549
- children: [
550
- /* @__PURE__ */ jsx("h3", { className: definitions_term, children: definition.term }),
551
- /* @__PURE__ */ jsx("p", { className: definitions_text, children: definition.description })
552
- ]
553
- },
554
- definition.term
555
- )) }),
556
- /* @__PURE__ */ jsx("div", { className: definitions_column, children: rightDefinitions.map((definition, index) => /* @__PURE__ */ jsxs(
557
- motion.div,
558
- {
559
- className: definitions_item,
560
- initial: { opacity: 0, y: 8 },
561
- animate: { opacity: 1, y: 0 },
562
- exit: { opacity: 0, y: 6 },
563
- transition: {
564
- ...DEFINITIONS_ITEM_TRANSITION,
565
- delay: (leftDefinitions.length + index) * 0.045
566
- },
567
- children: [
568
- /* @__PURE__ */ jsx("h3", { className: definitions_term, children: definition.term }),
569
- /* @__PURE__ */ jsx("p", { className: definitions_text, children: definition.description })
570
- ]
571
- },
572
- definition.term
573
- )) })
574
- ] })
542
+ children: /* @__PURE__ */ jsxs(
543
+ "div",
544
+ {
545
+ className: `${definitions_columns} ${definitions_panel}`,
546
+ children: [
547
+ /* @__PURE__ */ jsx("div", { className: definitions_column, children: leftDefinitions.map((definition, index) => /* @__PURE__ */ jsxs(
548
+ motion.div,
549
+ {
550
+ className: definitions_item,
551
+ initial: { opacity: 0, y: 8 },
552
+ animate: { opacity: 1, y: 0 },
553
+ exit: { opacity: 0, y: 6 },
554
+ transition: {
555
+ ...DEFINITIONS_ITEM_TRANSITION,
556
+ delay: index * 0.045
557
+ },
558
+ children: [
559
+ /* @__PURE__ */ jsx("h3", { className: definitions_term, children: definition.term }),
560
+ /* @__PURE__ */ jsx("p", { className: definitions_text, children: definition.description })
561
+ ]
562
+ },
563
+ definition.term
564
+ )) }),
565
+ /* @__PURE__ */ jsx("div", { className: definitions_column, children: rightDefinitions.map((definition, index) => /* @__PURE__ */ jsxs(
566
+ motion.div,
567
+ {
568
+ className: definitions_item,
569
+ initial: { opacity: 0, y: 8 },
570
+ animate: { opacity: 1, y: 0 },
571
+ exit: { opacity: 0, y: 6 },
572
+ transition: {
573
+ ...DEFINITIONS_ITEM_TRANSITION,
574
+ delay: (leftDefinitions.length + index) * 0.045
575
+ },
576
+ children: [
577
+ /* @__PURE__ */ jsx("h3", { className: definitions_term, children: definition.term }),
578
+ /* @__PURE__ */ jsx("p", { className: definitions_text, children: definition.description })
579
+ ]
580
+ },
581
+ definition.term
582
+ )) })
583
+ ]
584
+ }
585
+ )
575
586
  }
576
587
  ) })
577
588
  ] }) })
package/dist/assets/Calculators/ApyCalculator/ApyCalculator.css CHANGED
@@ -297,38 +297,50 @@
297
297
  line-height: 1.15;
298
298
  }
299
299
  ._1vox1xj1c {
300
+ color: var(--_1073cm85);
301
+ }
302
+ ._1vox1xj1d {
303
+ color: var(--_1073cm8c);
304
+ }
305
+ ._1vox1xj1e {
306
+ color: var(--_1073cm8j);
307
+ }
308
+ ._1vox1xj1f {
309
+ color: var(--_1073cm8q);
310
+ }
311
+ ._1vox1xj1g {
300
312
  border-top: 1px solid var(--_1073cm85);
301
313
  margin-top: 24px;
302
314
  padding-top: 24px;
303
315
  }
304
- ._1vox1xj1d {
316
+ ._1vox1xj1h {
305
317
  display: grid;
306
318
  gap: 24px;
307
319
  grid-template-columns: repeat(2, minmax(0, 1fr));
308
320
  }
309
- ._1vox1xj1e {
321
+ ._1vox1xj1i {
310
322
  display: grid;
311
323
  gap: 24px;
312
324
  }
313
- ._1vox1xj1f {
325
+ ._1vox1xj1j {
314
326
  display: grid;
315
327
  gap: 3px;
316
328
  }
317
- ._1vox1xj1g {
318
- color: var(--_1073cm83);
329
+ ._1vox1xj1k {
330
+ color: inherit;
319
331
  font-family: var(--main-font-family);
320
332
  font-size: 16px;
321
333
  line-height: 1.15;
322
334
  }
323
- ._1vox1xj1h {
324
- color: var(--_1073cm83);
335
+ ._1vox1xj1l {
336
+ color: inherit;
325
337
  line-height: 1.5;
326
338
  }
327
- ._1vox1xj1i {
339
+ ._1vox1xj1m {
328
340
  padding: 2rem;
329
341
  width: 100%;
330
342
  }
331
- ._1vox1xj1j {
343
+ ._1vox1xj1n {
332
344
  margin-bottom: 1rem;
333
345
  }
334
346
  @media screen and (min-width:604px) {
@@ -352,15 +364,15 @@
352
364
  ._1vox1xjx {
353
365
  max-width: none;
354
366
  }
355
- ._1vox1xj1c {
367
+ ._1vox1xj1g {
356
368
  margin-top: 16px;
357
369
  padding-top: 16px;
358
370
  }
359
- ._1vox1xj1d {
371
+ ._1vox1xj1h {
360
372
  grid-template-columns: 1fr;
361
373
  gap: 16px;
362
374
  }
363
- ._1vox1xj1e {
375
+ ._1vox1xj1i {
364
376
  gap: 16px;
365
377
  }
366
378
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@axos-web-dev/shared-components",
3
3
  "description": "Axos shared components library for web.",
4
- "version": "2.0.0-dev.18-apy.3",
4
+ "version": "2.0.0-dev.18-apy.5",
5
5
  "type": "module",
6
6
  "main": "index.js",
7
7
  "module": "dist/main.js",