@transferwise/components 0.0.0-experimental-d3453cf → 0.0.0-experimental-3f5dc0d

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 (104) hide show
  1. package/build/expressiveMoneyInput/AmountInput.js +281 -0
  2. package/build/expressiveMoneyInput/AmountInput.js.map +1 -0
  3. package/build/expressiveMoneyInput/AmountInput.mjs +279 -0
  4. package/build/expressiveMoneyInput/AmountInput.mjs.map +1 -0
  5. package/build/expressiveMoneyInput/AnimatedNumber.js +50 -0
  6. package/build/expressiveMoneyInput/AnimatedNumber.js.map +1 -0
  7. package/build/expressiveMoneyInput/AnimatedNumber.mjs +48 -0
  8. package/build/expressiveMoneyInput/AnimatedNumber.mjs.map +1 -0
  9. package/build/expressiveMoneyInput/Chevron.js +33 -0
  10. package/build/expressiveMoneyInput/Chevron.js.map +1 -0
  11. package/build/expressiveMoneyInput/Chevron.mjs +31 -0
  12. package/build/expressiveMoneyInput/Chevron.mjs.map +1 -0
  13. package/build/expressiveMoneyInput/CurrencySelector.js +160 -0
  14. package/build/expressiveMoneyInput/CurrencySelector.js.map +1 -0
  15. package/build/expressiveMoneyInput/CurrencySelector.mjs +157 -0
  16. package/build/expressiveMoneyInput/CurrencySelector.mjs.map +1 -0
  17. package/build/expressiveMoneyInput/ExpressiveMoneyInput.js +113 -0
  18. package/build/expressiveMoneyInput/ExpressiveMoneyInput.js.map +1 -0
  19. package/build/expressiveMoneyInput/ExpressiveMoneyInput.messages.js +17 -0
  20. package/build/expressiveMoneyInput/ExpressiveMoneyInput.messages.js.map +1 -0
  21. package/build/expressiveMoneyInput/ExpressiveMoneyInput.messages.mjs +13 -0
  22. package/build/expressiveMoneyInput/ExpressiveMoneyInput.messages.mjs.map +1 -0
  23. package/build/expressiveMoneyInput/ExpressiveMoneyInput.mjs +109 -0
  24. package/build/expressiveMoneyInput/ExpressiveMoneyInput.mjs.map +1 -0
  25. package/build/expressiveMoneyInput/useFocus.js +37 -0
  26. package/build/expressiveMoneyInput/useFocus.js.map +1 -0
  27. package/build/expressiveMoneyInput/useFocus.mjs +35 -0
  28. package/build/expressiveMoneyInput/useFocus.mjs.map +1 -0
  29. package/build/expressiveMoneyInput/useInputStyle.js +71 -0
  30. package/build/expressiveMoneyInput/useInputStyle.js.map +1 -0
  31. package/build/expressiveMoneyInput/useInputStyle.mjs +69 -0
  32. package/build/expressiveMoneyInput/useInputStyle.mjs.map +1 -0
  33. package/build/expressiveMoneyInput/utils.js +87 -0
  34. package/build/expressiveMoneyInput/utils.js.map +1 -0
  35. package/build/expressiveMoneyInput/utils.mjs +78 -0
  36. package/build/expressiveMoneyInput/utils.mjs.map +1 -0
  37. package/build/i18n/en.json +2 -0
  38. package/build/i18n/en.json.js +2 -0
  39. package/build/i18n/en.json.js.map +1 -1
  40. package/build/i18n/en.json.mjs +2 -0
  41. package/build/i18n/en.json.mjs.map +1 -1
  42. package/build/index.js +2 -0
  43. package/build/index.js.map +1 -1
  44. package/build/index.mjs +1 -0
  45. package/build/index.mjs.map +1 -1
  46. package/build/main.css +58 -0
  47. package/build/styles/expressiveMoneyInput/AmountInput.css +32 -0
  48. package/build/styles/expressiveMoneyInput/Chevron.css +12 -0
  49. package/build/styles/expressiveMoneyInput/CurrencySelector.css +6 -0
  50. package/build/styles/expressiveMoneyInput/ExpressiveMoneyInput.css +58 -0
  51. package/build/styles/main.css +58 -0
  52. package/build/types/expressiveMoneyInput/AmountInput.d.ts +13 -0
  53. package/build/types/expressiveMoneyInput/AmountInput.d.ts.map +1 -0
  54. package/build/types/expressiveMoneyInput/AnimatedNumber.d.ts +9 -0
  55. package/build/types/expressiveMoneyInput/AnimatedNumber.d.ts.map +1 -0
  56. package/build/types/expressiveMoneyInput/Chevron.d.ts +6 -0
  57. package/build/types/expressiveMoneyInput/Chevron.d.ts.map +1 -0
  58. package/build/types/expressiveMoneyInput/CurrencySelector.d.ts +30 -0
  59. package/build/types/expressiveMoneyInput/CurrencySelector.d.ts.map +1 -0
  60. package/build/types/expressiveMoneyInput/ExpressiveMoneyInput.d.ts +30 -0
  61. package/build/types/expressiveMoneyInput/ExpressiveMoneyInput.d.ts.map +1 -0
  62. package/build/types/expressiveMoneyInput/ExpressiveMoneyInput.messages.d.ts +12 -0
  63. package/build/types/expressiveMoneyInput/ExpressiveMoneyInput.messages.d.ts.map +1 -0
  64. package/build/types/expressiveMoneyInput/index.d.ts +3 -0
  65. package/build/types/expressiveMoneyInput/index.d.ts.map +1 -0
  66. package/build/types/expressiveMoneyInput/useFocus.d.ts +7 -0
  67. package/build/types/expressiveMoneyInput/useFocus.d.ts.map +1 -0
  68. package/build/types/expressiveMoneyInput/useInputStyle.d.ts +10 -0
  69. package/build/types/expressiveMoneyInput/useInputStyle.d.ts.map +1 -0
  70. package/build/types/expressiveMoneyInput/useSelectionRange.d.ts +10 -0
  71. package/build/types/expressiveMoneyInput/useSelectionRange.d.ts.map +1 -0
  72. package/build/types/expressiveMoneyInput/utils.d.ts +22 -0
  73. package/build/types/expressiveMoneyInput/utils.d.ts.map +1 -0
  74. package/build/types/index.d.ts +2 -0
  75. package/build/types/index.d.ts.map +1 -1
  76. package/build/types/test-utils/index.d.ts +4 -0
  77. package/build/types/test-utils/index.d.ts.map +1 -1
  78. package/package.json +9 -2
  79. package/src/expressiveMoneyInput/AmountInput.css +32 -0
  80. package/src/expressiveMoneyInput/AmountInput.less +43 -0
  81. package/src/expressiveMoneyInput/AmountInput.tsx +353 -0
  82. package/src/expressiveMoneyInput/AnimatedNumber.tsx +40 -0
  83. package/src/expressiveMoneyInput/Chevron.css +12 -0
  84. package/src/expressiveMoneyInput/Chevron.less +13 -0
  85. package/src/expressiveMoneyInput/Chevron.tsx +35 -0
  86. package/src/expressiveMoneyInput/CurrencySelector.css +6 -0
  87. package/src/expressiveMoneyInput/CurrencySelector.less +7 -0
  88. package/src/expressiveMoneyInput/CurrencySelector.tsx +218 -0
  89. package/src/expressiveMoneyInput/ExpressiveMoneyInput.css +58 -0
  90. package/src/expressiveMoneyInput/ExpressiveMoneyInput.less +13 -0
  91. package/src/expressiveMoneyInput/ExpressiveMoneyInput.messages.ts +13 -0
  92. package/src/expressiveMoneyInput/ExpressiveMoneyInput.story.tsx +188 -0
  93. package/src/expressiveMoneyInput/ExpressiveMoneyInput.tsx +124 -0
  94. package/src/expressiveMoneyInput/index.ts +2 -0
  95. package/src/expressiveMoneyInput/useFocus.ts +35 -0
  96. package/src/expressiveMoneyInput/useInputStyle.ts +85 -0
  97. package/src/expressiveMoneyInput/useSelectionRange.ts +23 -0
  98. package/src/expressiveMoneyInput/utils.spec.ts +114 -0
  99. package/src/expressiveMoneyInput/utils.ts +116 -0
  100. package/src/i18n/en.json +2 -0
  101. package/src/index.ts +2 -0
  102. package/src/main.css +58 -0
  103. package/src/main.less +1 -0
  104. package/src/ssr.spec.tsx +1 -0
@@ -0,0 +1 @@
1
+ {"version":3,"file":"utils.js","sources":["../../src/expressiveMoneyInput/utils.ts"],"sourcesContent":["import { formatAmount } from '@transferwise/formatting';\nimport type { KeyboardEvent } from 'react';\n\nexport const getDecimalSeparator = (currency: string, locale: string): string | null => {\n return formatAmount(1.1, currency, locale).replace(/\\p{Number}/gu, '');\n};\n\nexport const getGroupSeparator = (currency: string, locale: string): string | null => {\n return formatAmount(10000000, currency, locale).replace(/\\p{Number}/gu, '')[0];\n};\n\nexport const getDecimalCount = (currency: string, locale: string): number => {\n const decimalSeparator = getDecimalSeparator(currency, locale);\n if (!decimalSeparator) {\n return 0;\n }\n const parts = formatAmount(1.1, currency, locale).split(decimalSeparator);\n return parts.length === 2 ? parts[1].length : 0;\n};\n\nexport const getEnteredDecimalsCount = (value: string, decimalSeparator: string) => {\n return value.split(decimalSeparator)[1]?.length ?? 0;\n};\n\nexport const getUnformattedNumber = ({\n value: formattedValue,\n currency,\n locale,\n}: {\n value: string;\n currency: string;\n locale: string;\n}): number | null => {\n const groupSeparator = getGroupSeparator(currency, locale);\n const decimalSeparator = getDecimalSeparator(currency, locale);\n if (!formattedValue) {\n return null;\n }\n\n // parseFloat can't handle thousands separators\n const withoutGroupSeparator = groupSeparator\n ? formattedValue.replace(/ /gu, '').replace(new RegExp(`\\\\${groupSeparator}`, 'g'), '')\n : formattedValue;\n\n // parseFloat can only handle . as decimal separator\n const withNormalisedDecimalSeparator = decimalSeparator\n ? withoutGroupSeparator.replace(decimalSeparator, '.')\n : withoutGroupSeparator;\n\n const parsedValue = Number.parseFloat(withNormalisedDecimalSeparator);\n return parsedValue;\n};\n\nexport const getFormattedString = ({\n value: unformattedValue,\n currency,\n locale,\n alwaysShowDecimals = false,\n}: {\n value: number;\n currency: string;\n locale: string;\n alwaysShowDecimals?: boolean;\n}): string => {\n const decimalSeparator = getDecimalSeparator(currency, locale);\n // formatAmount rounds extra decimals, so 1.999 will become 2. Instead we will manually strip extra decimals so that it becomes 1.99 after formatting\n const decimalCount = getDecimalCount(currency, locale);\n const unformattedString = unformattedValue.toString();\n\n const [integerPart, decimalPart] = decimalSeparator\n ? unformattedString.split(decimalSeparator)\n : [unformattedString, undefined];\n\n const formattedDecimalPart = decimalPart ? decimalPart.slice(0, decimalCount) : '';\n\n const sanitisedUnformattedValue = Number.parseFloat(`${integerPart}.${formattedDecimalPart}`);\n\n return formatAmount(sanitisedUnformattedValue, currency, locale, {\n alwaysShowDecimals,\n });\n};\n\nexport const isInputPossiblyOverflowing = ({\n ref,\n value,\n}: {\n ref: React.RefObject<HTMLInputElement>;\n value: string;\n}) => {\n const textLength = value.length;\n const inputWidth = ref.current?.clientWidth;\n if (!inputWidth || !textLength) {\n return;\n }\n\n const maxCharactersWithoutOverflow = Math.floor(inputWidth / 19);\n return textLength > maxCharactersWithoutOverflow;\n};\n\nconst allowedInputKeys = new Set([\n 'Backspace',\n 'Delete',\n ',',\n '.',\n 'ArrowLeft',\n 'ArrowRight',\n 'Enter',\n 'Tab',\n]);\n\nexport const isAllowedInputKey = (e: KeyboardEvent<HTMLInputElement>) => {\n const { metaKey, key, ctrlKey } = e;\n const isNumberKey = !Number.isNaN(Number.parseInt(key, 10));\n\n return isNumberKey || metaKey || ctrlKey || allowedInputKeys.has(key);\n};\n"],"names":["getDecimalSeparator","currency","locale","formatAmount","replace","getGroupSeparator","getDecimalCount","decimalSeparator","parts","split","length","getEnteredDecimalsCount","value","getUnformattedNumber","formattedValue","groupSeparator","withoutGroupSeparator","RegExp","withNormalisedDecimalSeparator","parsedValue","Number","parseFloat","getFormattedString","unformattedValue","alwaysShowDecimals","decimalCount","unformattedString","toString","integerPart","decimalPart","undefined","formattedDecimalPart","slice","sanitisedUnformattedValue","isInputPossiblyOverflowing","ref","textLength","inputWidth","current","clientWidth","maxCharactersWithoutOverflow","Math","floor","allowedInputKeys","Set","isAllowedInputKey","e","metaKey","key","ctrlKey","isNumberKey","isNaN","parseInt","has"],"mappings":"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"}
@@ -0,0 +1,78 @@
1
+ import { formatAmount } from '@transferwise/formatting';
2
+
3
+ const getDecimalSeparator = (currency, locale) => {
4
+ return formatAmount(1.1, currency, locale).replace(/\p{Number}/gu, '');
5
+ };
6
+ const getGroupSeparator = (currency, locale) => {
7
+ return formatAmount(10000000, currency, locale).replace(/\p{Number}/gu, '')[0];
8
+ };
9
+ const getDecimalCount = (currency, locale) => {
10
+ const decimalSeparator = getDecimalSeparator(currency, locale);
11
+ if (!decimalSeparator) {
12
+ return 0;
13
+ }
14
+ const parts = formatAmount(1.1, currency, locale).split(decimalSeparator);
15
+ return parts.length === 2 ? parts[1].length : 0;
16
+ };
17
+ const getEnteredDecimalsCount = (value, decimalSeparator) => {
18
+ return value.split(decimalSeparator)[1]?.length ?? 0;
19
+ };
20
+ const getUnformattedNumber = ({
21
+ value: formattedValue,
22
+ currency,
23
+ locale
24
+ }) => {
25
+ const groupSeparator = getGroupSeparator(currency, locale);
26
+ const decimalSeparator = getDecimalSeparator(currency, locale);
27
+ if (!formattedValue) {
28
+ return null;
29
+ }
30
+ // parseFloat can't handle thousands separators
31
+ const withoutGroupSeparator = groupSeparator ? formattedValue.replace(/ /gu, '').replace(new RegExp(`\\${groupSeparator}`, 'g'), '') : formattedValue;
32
+ // parseFloat can only handle . as decimal separator
33
+ const withNormalisedDecimalSeparator = decimalSeparator ? withoutGroupSeparator.replace(decimalSeparator, '.') : withoutGroupSeparator;
34
+ const parsedValue = Number.parseFloat(withNormalisedDecimalSeparator);
35
+ return parsedValue;
36
+ };
37
+ const getFormattedString = ({
38
+ value: unformattedValue,
39
+ currency,
40
+ locale,
41
+ alwaysShowDecimals = false
42
+ }) => {
43
+ const decimalSeparator = getDecimalSeparator(currency, locale);
44
+ // formatAmount rounds extra decimals, so 1.999 will become 2. Instead we will manually strip extra decimals so that it becomes 1.99 after formatting
45
+ const decimalCount = getDecimalCount(currency, locale);
46
+ const unformattedString = unformattedValue.toString();
47
+ const [integerPart, decimalPart] = decimalSeparator ? unformattedString.split(decimalSeparator) : [unformattedString, undefined];
48
+ const formattedDecimalPart = decimalPart ? decimalPart.slice(0, decimalCount) : '';
49
+ const sanitisedUnformattedValue = Number.parseFloat(`${integerPart}.${formattedDecimalPart}`);
50
+ return formatAmount(sanitisedUnformattedValue, currency, locale, {
51
+ alwaysShowDecimals
52
+ });
53
+ };
54
+ const isInputPossiblyOverflowing = ({
55
+ ref,
56
+ value
57
+ }) => {
58
+ const textLength = value.length;
59
+ const inputWidth = ref.current?.clientWidth;
60
+ if (!inputWidth || !textLength) {
61
+ return;
62
+ }
63
+ const maxCharactersWithoutOverflow = Math.floor(inputWidth / 19);
64
+ return textLength > maxCharactersWithoutOverflow;
65
+ };
66
+ const allowedInputKeys = new Set(['Backspace', 'Delete', ',', '.', 'ArrowLeft', 'ArrowRight', 'Enter', 'Tab']);
67
+ const isAllowedInputKey = e => {
68
+ const {
69
+ metaKey,
70
+ key,
71
+ ctrlKey
72
+ } = e;
73
+ const isNumberKey = !Number.isNaN(Number.parseInt(key, 10));
74
+ return isNumberKey || metaKey || ctrlKey || allowedInputKeys.has(key);
75
+ };
76
+
77
+ export { getDecimalCount, getDecimalSeparator, getEnteredDecimalsCount, getFormattedString, getGroupSeparator, getUnformattedNumber, isAllowedInputKey, isInputPossiblyOverflowing };
78
+ //# sourceMappingURL=utils.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"utils.mjs","sources":["../../src/expressiveMoneyInput/utils.ts"],"sourcesContent":["import { formatAmount } from '@transferwise/formatting';\nimport type { KeyboardEvent } from 'react';\n\nexport const getDecimalSeparator = (currency: string, locale: string): string | null => {\n return formatAmount(1.1, currency, locale).replace(/\\p{Number}/gu, '');\n};\n\nexport const getGroupSeparator = (currency: string, locale: string): string | null => {\n return formatAmount(10000000, currency, locale).replace(/\\p{Number}/gu, '')[0];\n};\n\nexport const getDecimalCount = (currency: string, locale: string): number => {\n const decimalSeparator = getDecimalSeparator(currency, locale);\n if (!decimalSeparator) {\n return 0;\n }\n const parts = formatAmount(1.1, currency, locale).split(decimalSeparator);\n return parts.length === 2 ? parts[1].length : 0;\n};\n\nexport const getEnteredDecimalsCount = (value: string, decimalSeparator: string) => {\n return value.split(decimalSeparator)[1]?.length ?? 0;\n};\n\nexport const getUnformattedNumber = ({\n value: formattedValue,\n currency,\n locale,\n}: {\n value: string;\n currency: string;\n locale: string;\n}): number | null => {\n const groupSeparator = getGroupSeparator(currency, locale);\n const decimalSeparator = getDecimalSeparator(currency, locale);\n if (!formattedValue) {\n return null;\n }\n\n // parseFloat can't handle thousands separators\n const withoutGroupSeparator = groupSeparator\n ? formattedValue.replace(/ /gu, '').replace(new RegExp(`\\\\${groupSeparator}`, 'g'), '')\n : formattedValue;\n\n // parseFloat can only handle . as decimal separator\n const withNormalisedDecimalSeparator = decimalSeparator\n ? withoutGroupSeparator.replace(decimalSeparator, '.')\n : withoutGroupSeparator;\n\n const parsedValue = Number.parseFloat(withNormalisedDecimalSeparator);\n return parsedValue;\n};\n\nexport const getFormattedString = ({\n value: unformattedValue,\n currency,\n locale,\n alwaysShowDecimals = false,\n}: {\n value: number;\n currency: string;\n locale: string;\n alwaysShowDecimals?: boolean;\n}): string => {\n const decimalSeparator = getDecimalSeparator(currency, locale);\n // formatAmount rounds extra decimals, so 1.999 will become 2. Instead we will manually strip extra decimals so that it becomes 1.99 after formatting\n const decimalCount = getDecimalCount(currency, locale);\n const unformattedString = unformattedValue.toString();\n\n const [integerPart, decimalPart] = decimalSeparator\n ? unformattedString.split(decimalSeparator)\n : [unformattedString, undefined];\n\n const formattedDecimalPart = decimalPart ? decimalPart.slice(0, decimalCount) : '';\n\n const sanitisedUnformattedValue = Number.parseFloat(`${integerPart}.${formattedDecimalPart}`);\n\n return formatAmount(sanitisedUnformattedValue, currency, locale, {\n alwaysShowDecimals,\n });\n};\n\nexport const isInputPossiblyOverflowing = ({\n ref,\n value,\n}: {\n ref: React.RefObject<HTMLInputElement>;\n value: string;\n}) => {\n const textLength = value.length;\n const inputWidth = ref.current?.clientWidth;\n if (!inputWidth || !textLength) {\n return;\n }\n\n const maxCharactersWithoutOverflow = Math.floor(inputWidth / 19);\n return textLength > maxCharactersWithoutOverflow;\n};\n\nconst allowedInputKeys = new Set([\n 'Backspace',\n 'Delete',\n ',',\n '.',\n 'ArrowLeft',\n 'ArrowRight',\n 'Enter',\n 'Tab',\n]);\n\nexport const isAllowedInputKey = (e: KeyboardEvent<HTMLInputElement>) => {\n const { metaKey, key, ctrlKey } = e;\n const isNumberKey = !Number.isNaN(Number.parseInt(key, 10));\n\n return isNumberKey || metaKey || ctrlKey || allowedInputKeys.has(key);\n};\n"],"names":["getDecimalSeparator","currency","locale","formatAmount","replace","getGroupSeparator","getDecimalCount","decimalSeparator","parts","split","length","getEnteredDecimalsCount","value","getUnformattedNumber","formattedValue","groupSeparator","withoutGroupSeparator","RegExp","withNormalisedDecimalSeparator","parsedValue","Number","parseFloat","getFormattedString","unformattedValue","alwaysShowDecimals","decimalCount","unformattedString","toString","integerPart","decimalPart","undefined","formattedDecimalPart","slice","sanitisedUnformattedValue","isInputPossiblyOverflowing","ref","textLength","inputWidth","current","clientWidth","maxCharactersWithoutOverflow","Math","floor","allowedInputKeys","Set","isAllowedInputKey","e","metaKey","key","ctrlKey","isNumberKey","isNaN","parseInt","has"],"mappings":"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"}
@@ -16,6 +16,8 @@
16
16
  "neptune.DateLookup.selected": "selected",
17
17
  "neptune.DateLookup.twentyYears": "20 years",
18
18
  "neptune.DateLookup.year": "year",
19
+ "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Type a currency / country",
20
+ "neptune.ExpressiveMoneyInput.currency.select.currency": "Select currency",
19
21
  "neptune.FlowNavigation.back": "back to previous step",
20
22
  "neptune.Info.ariaLabel": "More information",
21
23
  "neptune.Label.optional": "(Optional)",
@@ -20,6 +20,8 @@ var en = {
20
20
  "neptune.DateLookup.selected": "selected",
21
21
  "neptune.DateLookup.twentyYears": "20 years",
22
22
  "neptune.DateLookup.year": "year",
23
+ "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Type a currency / country",
24
+ "neptune.ExpressiveMoneyInput.currency.select.currency": "Select currency",
23
25
  "neptune.FlowNavigation.back": "back to previous step",
24
26
  "neptune.Info.ariaLabel": "More information",
25
27
  "neptune.Label.optional": "(Optional)",
@@ -1 +1 @@
1
- {"version":3,"file":"en.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"en.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -16,6 +16,8 @@ var en = {
16
16
  "neptune.DateLookup.selected": "selected",
17
17
  "neptune.DateLookup.twentyYears": "20 years",
18
18
  "neptune.DateLookup.year": "year",
19
+ "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Type a currency / country",
20
+ "neptune.ExpressiveMoneyInput.currency.select.currency": "Select currency",
19
21
  "neptune.FlowNavigation.back": "back to previous step",
20
22
  "neptune.Info.ariaLabel": "More information",
21
23
  "neptune.Label.optional": "(Optional)",
@@ -1 +1 @@
1
- {"version":3,"file":"en.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"en.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/index.js CHANGED
@@ -67,6 +67,7 @@ var Markdown = require('./markdown/Markdown.js');
67
67
  var Modal = require('./modal/Modal.js');
68
68
  var Money = require('./money/Money.js');
69
69
  var MoneyInput = require('./moneyInput/MoneyInput.js');
70
+ var ExpressiveMoneyInput = require('./expressiveMoneyInput/ExpressiveMoneyInput.js');
70
71
  var NavigationOption = require('./navigationOption/NavigationOption.js');
71
72
  var NavigationOptionsList = require('./navigationOptionsList/NavigationOptionsList.js');
72
73
  var Nudge = require('./nudge/Nudge.js');
@@ -229,6 +230,7 @@ exports.Markdown = Markdown.default;
229
230
  exports.Modal = Modal.default;
230
231
  exports.Money = Money.default;
231
232
  exports.MoneyInput = MoneyInput.default;
233
+ exports.ExpressiveMoneyInput = ExpressiveMoneyInput.default;
232
234
  exports.NavigationOption = NavigationOption.default;
233
235
  exports.NavigationOptionsList = NavigationOptionsList.default;
234
236
  exports.Nudge = Nudge.default;
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/index.mjs CHANGED
@@ -65,6 +65,7 @@ export { default as Markdown } from './markdown/Markdown.mjs';
65
65
  export { default as Modal } from './modal/Modal.mjs';
66
66
  export { default as Money } from './money/Money.mjs';
67
67
  export { default as MoneyInput } from './moneyInput/MoneyInput.mjs';
68
+ export { default as ExpressiveMoneyInput } from './expressiveMoneyInput/ExpressiveMoneyInput.mjs';
68
69
  export { default as NavigationOption } from './navigationOption/NavigationOption.mjs';
69
70
  export { default as NavigationOptionsList } from './navigationOptionsList/NavigationOptionsList.mjs';
70
71
  export { default as Nudge } from './nudge/Nudge.mjs';
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/main.css CHANGED
@@ -4447,6 +4447,64 @@ button.np-link {
4447
4447
  box-shadow: inset 0 0 0 1px #c9cbce !important;
4448
4448
  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary) !important;
4449
4449
  }
4450
+ .wds-amount-input-container {
4451
+ width: 100%;
4452
+ }
4453
+ .wds-amount-input-input-container {
4454
+ display: flex;
4455
+ justify-content: right;
4456
+ width: 100%;
4457
+ transition: font-size 0.4s cubic-bezier(0.3, 0, 0.1, 1), height 0.4s cubic-bezier(0.3, 0, 0.1, 1), margin-top 0.4s cubic-bezier(0.3, 0, 0.1, 1), color 0.4s ease;
4458
+ color: var(--color-interactive-primary);
4459
+ overflow: hidden;
4460
+ margin-bottom: 0 !important;
4461
+ }
4462
+ @media (prefers-reduced-motion: reduce) {
4463
+ .wds-amount-input-input-container {
4464
+ transition: none;
4465
+ }
4466
+ }
4467
+ .wds-amount-input-input {
4468
+ border: none;
4469
+ outline: none;
4470
+ flex-grow: 1;
4471
+ text-align: right;
4472
+ background-color: transparent;
4473
+ }
4474
+ .wds-amount-input-input:focus-visible {
4475
+ outline: none;
4476
+ }
4477
+ .wds-amount-input-placeholder {
4478
+ flex-grow: 0;
4479
+ display: flex;
4480
+ align-items: center;
4481
+ }
4482
+ .wds-currency-selector:disabled {
4483
+ opacity: 1 !important;
4484
+ cursor: auto !important;
4485
+ cursor: initial !important;
4486
+ mix-blend-mode: initial !important;
4487
+ }
4488
+ .wds-chevron-container {
4489
+ width: 32px;
4490
+ width: var(--size-32);
4491
+ overflow: hidden;
4492
+ color: var(--color-interactive-primary);
4493
+ margin-left: 8px;
4494
+ margin-left: var(--size-8);
4495
+ transition: width 0.3s ease;
4496
+ }
4497
+ .wds-chevron-hidden {
4498
+ width: 0;
4499
+ }
4500
+ .wds-expressive-money-input-currency-selector {
4501
+ flex-shrink: 0;
4502
+ margin-right: 24px;
4503
+ margin-right: var(--size-24);
4504
+ }
4505
+ .wds-expressive-money-input-chevron {
4506
+ transform: translateY(-5%);
4507
+ }
4450
4508
  .np-navigation-option {
4451
4509
  -webkit-text-decoration: none;
4452
4510
  text-decoration: none;
@@ -0,0 +1,32 @@
1
+ .wds-amount-input-container {
2
+ width: 100%;
3
+ }
4
+ .wds-amount-input-input-container {
5
+ display: flex;
6
+ justify-content: right;
7
+ width: 100%;
8
+ transition: font-size 0.4s cubic-bezier(0.3, 0, 0.1, 1), height 0.4s cubic-bezier(0.3, 0, 0.1, 1), margin-top 0.4s cubic-bezier(0.3, 0, 0.1, 1), color 0.4s ease;
9
+ color: var(--color-interactive-primary);
10
+ overflow: hidden;
11
+ margin-bottom: 0 !important;
12
+ }
13
+ @media (prefers-reduced-motion: reduce) {
14
+ .wds-amount-input-input-container {
15
+ transition: none;
16
+ }
17
+ }
18
+ .wds-amount-input-input {
19
+ border: none;
20
+ outline: none;
21
+ flex-grow: 1;
22
+ text-align: right;
23
+ background-color: transparent;
24
+ }
25
+ .wds-amount-input-input:focus-visible {
26
+ outline: none;
27
+ }
28
+ .wds-amount-input-placeholder {
29
+ flex-grow: 0;
30
+ display: flex;
31
+ align-items: center;
32
+ }
@@ -0,0 +1,12 @@
1
+ .wds-chevron-container {
2
+ width: 32px;
3
+ width: var(--size-32);
4
+ overflow: hidden;
5
+ color: var(--color-interactive-primary);
6
+ margin-left: 8px;
7
+ margin-left: var(--size-8);
8
+ transition: width 0.3s ease;
9
+ }
10
+ .wds-chevron-hidden {
11
+ width: 0;
12
+ }
@@ -0,0 +1,6 @@
1
+ .wds-currency-selector:disabled {
2
+ opacity: 1 !important;
3
+ cursor: auto !important;
4
+ cursor: initial !important;
5
+ mix-blend-mode: initial !important;
6
+ }
@@ -0,0 +1,58 @@
1
+ .wds-amount-input-container {
2
+ width: 100%;
3
+ }
4
+ .wds-amount-input-input-container {
5
+ display: flex;
6
+ justify-content: right;
7
+ width: 100%;
8
+ transition: font-size 0.4s cubic-bezier(0.3, 0, 0.1, 1), height 0.4s cubic-bezier(0.3, 0, 0.1, 1), margin-top 0.4s cubic-bezier(0.3, 0, 0.1, 1), color 0.4s ease;
9
+ color: var(--color-interactive-primary);
10
+ overflow: hidden;
11
+ margin-bottom: 0 !important;
12
+ }
13
+ @media (prefers-reduced-motion: reduce) {
14
+ .wds-amount-input-input-container {
15
+ transition: none;
16
+ }
17
+ }
18
+ .wds-amount-input-input {
19
+ border: none;
20
+ outline: none;
21
+ flex-grow: 1;
22
+ text-align: right;
23
+ background-color: transparent;
24
+ }
25
+ .wds-amount-input-input:focus-visible {
26
+ outline: none;
27
+ }
28
+ .wds-amount-input-placeholder {
29
+ flex-grow: 0;
30
+ display: flex;
31
+ align-items: center;
32
+ }
33
+ .wds-currency-selector:disabled {
34
+ opacity: 1 !important;
35
+ cursor: auto !important;
36
+ cursor: initial !important;
37
+ mix-blend-mode: initial !important;
38
+ }
39
+ .wds-chevron-container {
40
+ width: 32px;
41
+ width: var(--size-32);
42
+ overflow: hidden;
43
+ color: var(--color-interactive-primary);
44
+ margin-left: 8px;
45
+ margin-left: var(--size-8);
46
+ transition: width 0.3s ease;
47
+ }
48
+ .wds-chevron-hidden {
49
+ width: 0;
50
+ }
51
+ .wds-expressive-money-input-currency-selector {
52
+ flex-shrink: 0;
53
+ margin-right: 24px;
54
+ margin-right: var(--size-24);
55
+ }
56
+ .wds-expressive-money-input-chevron {
57
+ transform: translateY(-5%);
58
+ }
@@ -4447,6 +4447,64 @@ button.np-link {
4447
4447
  box-shadow: inset 0 0 0 1px #c9cbce !important;
4448
4448
  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary) !important;
4449
4449
  }
4450
+ .wds-amount-input-container {
4451
+ width: 100%;
4452
+ }
4453
+ .wds-amount-input-input-container {
4454
+ display: flex;
4455
+ justify-content: right;
4456
+ width: 100%;
4457
+ transition: font-size 0.4s cubic-bezier(0.3, 0, 0.1, 1), height 0.4s cubic-bezier(0.3, 0, 0.1, 1), margin-top 0.4s cubic-bezier(0.3, 0, 0.1, 1), color 0.4s ease;
4458
+ color: var(--color-interactive-primary);
4459
+ overflow: hidden;
4460
+ margin-bottom: 0 !important;
4461
+ }
4462
+ @media (prefers-reduced-motion: reduce) {
4463
+ .wds-amount-input-input-container {
4464
+ transition: none;
4465
+ }
4466
+ }
4467
+ .wds-amount-input-input {
4468
+ border: none;
4469
+ outline: none;
4470
+ flex-grow: 1;
4471
+ text-align: right;
4472
+ background-color: transparent;
4473
+ }
4474
+ .wds-amount-input-input:focus-visible {
4475
+ outline: none;
4476
+ }
4477
+ .wds-amount-input-placeholder {
4478
+ flex-grow: 0;
4479
+ display: flex;
4480
+ align-items: center;
4481
+ }
4482
+ .wds-currency-selector:disabled {
4483
+ opacity: 1 !important;
4484
+ cursor: auto !important;
4485
+ cursor: initial !important;
4486
+ mix-blend-mode: initial !important;
4487
+ }
4488
+ .wds-chevron-container {
4489
+ width: 32px;
4490
+ width: var(--size-32);
4491
+ overflow: hidden;
4492
+ color: var(--color-interactive-primary);
4493
+ margin-left: 8px;
4494
+ margin-left: var(--size-8);
4495
+ transition: width 0.3s ease;
4496
+ }
4497
+ .wds-chevron-hidden {
4498
+ width: 0;
4499
+ }
4500
+ .wds-expressive-money-input-currency-selector {
4501
+ flex-shrink: 0;
4502
+ margin-right: 24px;
4503
+ margin-right: var(--size-24);
4504
+ }
4505
+ .wds-expressive-money-input-chevron {
4506
+ transform: translateY(-5%);
4507
+ }
4450
4508
  .np-navigation-option {
4451
4509
  -webkit-text-decoration: none;
4452
4510
  text-decoration: none;
@@ -0,0 +1,13 @@
1
+ import { Props as ExpressiveMoneyInputProps } from './ExpressiveMoneyInput';
2
+ type Props = {
3
+ id: string;
4
+ describedById?: string;
5
+ amount?: number | null;
6
+ currency: string;
7
+ autoFocus?: boolean;
8
+ onChange: (amount: number | null) => void;
9
+ onFocusChange?: (focused: boolean) => void;
10
+ } & Pick<ExpressiveMoneyInputProps, 'loading'>;
11
+ export declare const AmountInput: ({ id, describedById, amount, currency, autoFocus, onChange, onFocusChange, loading, }: Props) => import("react").JSX.Element;
12
+ export {};
13
+ //# sourceMappingURL=AmountInput.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AmountInput.d.ts","sourceRoot":"","sources":["../../../src/expressiveMoneyInput/AmountInput.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,IAAI,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAe5E,KAAK,KAAK,GAAG;IACX,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C,GAAG,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC,CAAC;AAE/C,eAAO,MAAM,WAAW,GAAI,uFASzB,KAAK,gCA2SP,CAAC"}
@@ -0,0 +1,9 @@
1
+ import type { ReactNode } from 'react';
2
+ interface Props {
3
+ children: ReactNode;
4
+ onClick?: () => void;
5
+ className?: string;
6
+ }
7
+ export declare const AnimatedNumber: ({ children, onClick, className }: Props) => import("react").JSX.Element;
8
+ export {};
9
+ //# sourceMappingURL=AnimatedNumber.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AnimatedNumber.d.ts","sourceRoot":"","sources":["../../../src/expressiveMoneyInput/AnimatedNumber.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,UAAU,KAAK;IACb,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,cAAc,GAAI,kCAAkC,KAAK,gCA8BrE,CAAC"}
@@ -0,0 +1,6 @@
1
+ interface Props {
2
+ shouldShow: boolean;
3
+ }
4
+ export declare const Chevron: ({ shouldShow }: Props) => import("react").JSX.Element;
5
+ export {};
6
+ //# sourceMappingURL=Chevron.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Chevron.d.ts","sourceRoot":"","sources":["../../../src/expressiveMoneyInput/Chevron.tsx"],"names":[],"mappings":"AAIA,UAAU,KAAK;IACb,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,OAAO,GAAI,gBAAuB,KAAK,gCA0BnD,CAAC"}
@@ -0,0 +1,30 @@
1
+ import type { AvatarLayoutProps } from '../avatarLayout';
2
+ import { CurrencyType, Props as ExpressiveMoneyInputProps } from './ExpressiveMoneyInput';
3
+ import { type ButtonHTMLAttributes } from 'react';
4
+ export interface CurrencyOption {
5
+ label?: string;
6
+ code: string;
7
+ keywords: string[] | undefined;
8
+ }
9
+ export interface CurrencySection {
10
+ title: string;
11
+ currencies: CurrencyOption[];
12
+ }
13
+ export type CurrencyOptions = CurrencySection[];
14
+ export type Props = {
15
+ id: string;
16
+ labelId: string;
17
+ options?: CurrencyOptions;
18
+ onChange?: (currency: CurrencyType) => void;
19
+ onOpen?: () => void;
20
+ addons?: AvatarLayoutProps['avatars'];
21
+ onSearchChange?: (payload: {
22
+ query: string;
23
+ resultCount: number;
24
+ }) => void;
25
+ } & Pick<ExpressiveMoneyInputProps, 'currency'>;
26
+ export declare const CurrencySelector: ({ id, currency, options, labelId, onChange, addons, onOpen, onSearchChange, }: Props) => import("react").JSX.Element;
27
+ export declare const ButtonInput: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
28
+ children?: import("react").ReactNode | undefined;
29
+ } & import("react").RefAttributes<HTMLButtonElement | null>>;
30
+ //# sourceMappingURL=CurrencySelector.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CurrencySelector.d.ts","sourceRoot":"","sources":["../../../src/expressiveMoneyInput/CurrencySelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAOzD,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAG1F,OAAO,EACL,KAAK,oBAAoB,EAK1B,MAAM,OAAO,CAAC;AAKf,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;CAChC;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,cAAc,EAAE,CAAC;CAC9B;AAED,MAAM,MAAM,eAAe,GAAG,eAAe,EAAE,CAAC;AAEhD,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACtC,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAC5E,GAAG,IAAI,CAAC,yBAAyB,EAAE,UAAU,CAAC,CAAC;AAEhD,eAAO,MAAM,gBAAgB,GAAI,+EAS9B,KAAK,gCA2FP,CAAC;AAEF,eAAO,MAAM,WAAW;;4DAgBtB,CAAC"}
@@ -0,0 +1,30 @@
1
+ import { type ReactNode } from 'react';
2
+ import { type Props as CurrencySelectorProps } from './CurrencySelector';
3
+ import { CommonProps } from '../common';
4
+ import { type InlinePromptProps } from '../prompt/InlinePrompt';
5
+ type AmountType = number | null;
6
+ export type CurrencyType = string;
7
+ type DefaultCurrencySelectorInstanceType = Pick<CurrencySelectorProps, 'addons' | 'options' | 'onChange' | 'onOpen' | 'onSearchChange'>;
8
+ type CustomCurrencySelectorInstanceType = (props: {
9
+ id: string;
10
+ labelId: string;
11
+ }) => ReactNode;
12
+ type CurrencySelectorType = DefaultCurrencySelectorInstanceType | CustomCurrencySelectorInstanceType;
13
+ export type Props = {
14
+ label?: ReactNode;
15
+ currencySelector?: CurrencySelectorType;
16
+ amount?: AmountType;
17
+ currency: CurrencyType;
18
+ inlinePrompt?: {
19
+ sentiment?: InlinePromptProps['sentiment'];
20
+ message: InlinePromptProps['children'];
21
+ };
22
+ showChevron?: boolean;
23
+ autoFocus?: boolean;
24
+ loading?: boolean;
25
+ onAmountChange: (amount: AmountType) => void;
26
+ onFocusChange?: (focused: boolean) => void;
27
+ } & CommonProps;
28
+ export default function ExpressiveMoneyInput({ label, currency, currencySelector, amount, onAmountChange, className, inlinePrompt, showChevron, autoFocus, loading, onFocusChange, }: Props): import("react").JSX.Element;
29
+ export {};
30
+ //# sourceMappingURL=ExpressiveMoneyInput.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ExpressiveMoneyInput.d.ts","sourceRoot":"","sources":["../../../src/expressiveMoneyInput/ExpressiveMoneyInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAS,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAE,KAAK,KAAK,IAAI,qBAAqB,EAAoB,MAAM,oBAAoB,CAAC;AAC3F,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAGxC,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE9E,KAAK,UAAU,GAAG,MAAM,GAAG,IAAI,CAAC;AAChC,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC;AAElC,KAAK,mCAAmC,GAAG,IAAI,CAC7C,qBAAqB,EACrB,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,QAAQ,GAAG,gBAAgB,CAChE,CAAC;AACF,KAAK,kCAAkC,GAAG,CAAC,KAAK,EAAE;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,KAAK,SAAS,CAAC;AAChG,KAAK,oBAAoB,GACrB,mCAAmC,GACnC,kCAAkC,CAAC;AAEvC,MAAM,MAAM,KAAK,GAAG;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,oBAAoB,CAAC;IACxC,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,QAAQ,EAAE,YAAY,CAAC;IACvB,YAAY,CAAC,EAAE;QACb,SAAS,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;QAC3C,OAAO,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;KACxC,CAAC;IACF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7C,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C,GAAG,WAAW,CAAC;AAEhB,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,KAAK,EACL,QAAQ,EACR,gBAAyE,EACzE,MAAM,EACN,cAAc,EACd,SAAS,EACT,YAAY,EACZ,WAAW,EACX,SAAS,EACT,OAAO,EACP,aAAa,GACd,EAAE,KAAK,+BAuEP"}
@@ -0,0 +1,12 @@
1
+ declare const _default: {
2
+ currencySelectorSearchPlaceholder: {
3
+ id: string;
4
+ defaultMessage: string;
5
+ };
6
+ currencySelectorSelectCurrency: {
7
+ id: string;
8
+ defaultMessage: string;
9
+ };
10
+ };
11
+ export default _default;
12
+ //# sourceMappingURL=ExpressiveMoneyInput.messages.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ExpressiveMoneyInput.messages.d.ts","sourceRoot":"","sources":["../../../src/expressiveMoneyInput/ExpressiveMoneyInput.messages.ts"],"names":[],"mappings":";;;;;;;;;;AAEA,wBAUG"}
@@ -0,0 +1,3 @@
1
+ export type { Props as ExpressiveMoneyInputProps } from './ExpressiveMoneyInput';
2
+ export { default } from './ExpressiveMoneyInput';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/expressiveMoneyInput/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,KAAK,IAAI,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AACjF,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC"}
@@ -0,0 +1,7 @@
1
+ export declare const useFocus: () => {
2
+ focus: boolean;
3
+ setFocus: (value: boolean) => void;
4
+ visualFocus: boolean;
5
+ setVisualFocus: (value: boolean) => void;
6
+ };
7
+ //# sourceMappingURL=useFocus.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useFocus.d.ts","sourceRoot":"","sources":["../../../src/expressiveMoneyInput/useFocus.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,QAAQ;;sBAgBC,OAAO;;4BAUD,OAAO;CAIlC,CAAC"}
@@ -0,0 +1,10 @@
1
+ import { type CSSProperties } from 'react';
2
+ import { Props as ExpressiveMoneyInputProps } from './ExpressiveMoneyInput';
3
+ type InputStyleObject = {
4
+ value: string;
5
+ focus: boolean;
6
+ inputElement: HTMLInputElement | null;
7
+ } & Pick<ExpressiveMoneyInputProps, 'loading'>;
8
+ export declare const useInputStyle: ({ value, focus, inputElement, loading }: InputStyleObject) => CSSProperties;
9
+ export {};
10
+ //# sourceMappingURL=useInputStyle.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useInputStyle.d.ts","sourceRoot":"","sources":["../../../src/expressiveMoneyInput/useInputStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAwC,MAAM,OAAO,CAAC;AACjF,OAAO,EAAE,KAAK,IAAI,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAE5E,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,YAAY,EAAE,gBAAgB,GAAG,IAAI,CAAC;CACvC,GAAG,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC,CAAC;AAE/C,eAAO,MAAM,aAAa,GAAI,yCAAyC,gBAAgB,kBAyBtF,CAAC"}
@@ -0,0 +1,10 @@
1
+ import { type SyntheticEvent } from 'react';
2
+ export declare const useSelectionRange: () => {
3
+ selection: {
4
+ selectionStart: number | null;
5
+ selectionEnd: number | null;
6
+ } | undefined;
7
+ handleSelect: (e: SyntheticEvent<HTMLInputElement>) => void;
8
+ handleSelectionBlur: () => void;
9
+ };
10
+ //# sourceMappingURL=useSelectionRange.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useSelectionRange.d.ts","sourceRoot":"","sources":["../../../src/expressiveMoneyInput/useSelectionRange.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAU,MAAM,OAAO,CAAC;AAEpD,eAAO,MAAM,iBAAiB;;wBAEV,MAAM,GAAG,IAAI;sBACf,MAAM,GAAG,IAAI;;sBAGJ,cAAc,CAAC,gBAAgB,CAAC;;CAc1D,CAAC"}