@kanso-labs/kanso-ui 0.28.0 → 0.28.2
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.
|
@@ -96,12 +96,21 @@ function Currency(t0) {
|
|
|
96
96
|
} else t7 = $[19];
|
|
97
97
|
return t5(t7);
|
|
98
98
|
}
|
|
99
|
+
const formatters = /* @__PURE__ */ new Map();
|
|
99
100
|
function formatCurrency(value, options) {
|
|
100
|
-
return
|
|
101
|
-
|
|
102
|
-
|
|
101
|
+
return formatterFor(options.locale, options.currency, options.sign).formatToParts(value).map((part) => part.type === "minusSign" ? MINUS_SIGN : part.value).join("");
|
|
102
|
+
}
|
|
103
|
+
function formatterFor(locale, currency, sign) {
|
|
104
|
+
const key = `${locale ?? ""}|${currency}|${sign}`;
|
|
105
|
+
const cached = formatters.get(key);
|
|
106
|
+
if (cached) return cached;
|
|
107
|
+
const formatter = new Intl.NumberFormat(locale, {
|
|
108
|
+
currency,
|
|
109
|
+
signDisplay: sign,
|
|
103
110
|
style: "currency"
|
|
104
|
-
})
|
|
111
|
+
});
|
|
112
|
+
formatters.set(key, formatter);
|
|
113
|
+
return formatter;
|
|
105
114
|
}
|
|
106
115
|
function resolveTone(value, tone) {
|
|
107
116
|
if (tone !== "auto") return tone;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["stylex","RenderComponentProps","useRender","mergeStyles","colors","typography","styles","base","kB7OPa","kMv6JI","kcqcaj","k63SB2","$$css","tones","negative","kMwMTN","neutral","positive","MINUS_SIGN","CurrencyProps","Omit","currency","locale","sign","SignDisplay","tone","Tone","value","Currency","t0","$","_c","render","t1","t2","t3","t4","t5","t6","t7","t8","t9","props","undefined","formatCurrency","resolveTone","children","defaultTagName","
|
|
1
|
+
{"version":3,"file":"index.js","names":["stylex","RenderComponentProps","useRender","mergeStyles","colors","typography","styles","base","kB7OPa","kMv6JI","kcqcaj","k63SB2","$$css","tones","negative","kMwMTN","neutral","positive","MINUS_SIGN","CurrencyProps","Omit","currency","locale","sign","SignDisplay","tone","Tone","value","Currency","t0","$","_c","render","t1","t2","t3","t4","t5","t6","t7","t8","t9","props","undefined","formatCurrency","resolveTone","children","defaultTagName","formatters","Map","Intl","NumberFormat","options","formatterFor","formatToParts","map","part","type","join","key","cached","get","formatter","signDisplay","style","set"],"sources":["../../../src/components/currency/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\n\n// Deliberately sets no font-size. The same value turns up at several sizes —\n// inside a list row, as a heading-scale figure, as a total — differing in\n// nothing else, so the size is the container's decision. What must never vary\n// is here: the mono face, tabular figures so a column of them lines up on the\n// decimal point, and the medium weight that separates a figure from the prose\n// around it.\n//\n// No Material Design page draws an amount. It is type alone: the mono face\n// and medium weight from the type tokens, tabular figures, and the on surface\n// role for the neutral tone. Positive and negative are the library's own\n// roles, the pair Tag draws from as well.\nconst styles = {\n base: {\n kB7OPa: \"x9f619\",\n kMv6JI: \"xbppi91\",\n kcqcaj: \"xss6m8b\",\n k63SB2: \"x1bf3uqz\",\n $$css: true\n }\n};\nconst tones = {\n negative: {\n kMwMTN: \"x12gp0t\",\n $$css: true\n },\n neutral: {\n kMwMTN: \"x139gbkf\",\n $$css: true\n },\n positive: {\n kMwMTN: \"x4no3js\",\n $$css: true\n }\n};\n\n// U+2212 MINUS SIGN, not the U+002D hyphen Intl actually emits. The hyphen is\n// a typographic stand-in: it is narrower than the plus it pairs with and does\n// not sit on the same optical centre as the digits, which shows up as a\n// wobbling column the moment amounts are stacked.\nconst MINUS_SIGN = '−';\ntype CurrencyProps = Omit<RenderComponentProps<'span'>, 'children'> & {\n /**\n * ISO 4217 code for the currency to format in.\n * @default 'USD'\n */\n currency?: string;\n /**\n * BCP 47 locale to format for. Defaults to the runtime's own locale, so an\n * app that has not chosen one still formats the way its reader expects.\n */\n locale?: string;\n /**\n * When to show the sign. `auto` shows one only on negatives, `always` also\n * prefixes positives with a plus, and `never` shows neither — which leaves\n * colour as the only thing separating a credit from a debt, so reach for it\n * only where the direction is already stated some other way.\n * @default 'auto'\n */\n sign?: SignDisplay;\n /**\n * Which colour role to render in. `auto` follows the sign of `value`, with\n * zero reading as neutral.\n * @default 'auto'\n */\n tone?: Tone;\n /** The amount, in the currency's major units. */\n value: number;\n};\ntype SignDisplay = 'always' | 'auto' | 'never';\ntype Tone = 'auto' | 'negative' | 'neutral' | 'positive';\nfunction Currency({\n currency = 'USD',\n locale,\n render,\n sign = 'auto',\n tone = 'auto',\n value,\n ...props\n}: CurrencyProps) {\n return useRender({\n defaultTagName: 'span',\n props: {\n ...props,\n children: formatCurrency(value, {\n currency,\n locale,\n sign\n }),\n ...mergeStyles(stylex.props(styles.base, tones[resolveTone(value, tone)]), props)\n },\n render\n });\n}\n\n// Constructing an Intl.NumberFormat resolves the locale, loads the currency's\n// data and builds the pattern; formatToParts on one already built skips all\n// three, which measures about ten times cheaper per value. An instance is\n// stateless once constructed, so one can be shared across every component\n// asking for the same three options.\n//\n// What this saves is a mount and a changing amount, not an idle re-render:\n// the React Compiler already memoises the call below on the four things it\n// reads, so a component re-rendered with the same props never reaches here.\n// That cache belongs to one component instance and counts `value` among its\n// keys, which leaves two cases it cannot cover — a column of rows, where every\n// instance has a cache of its own and each builds a formatter, and a single\n// amount that ticks, where each new value misses.\n//\n// Unbounded on purpose. The keys are the option sets an app actually uses —\n// its locales times its currencies times the three sign settings — so the map\n// settles at that size rather than growing with renders or with values.\nconst formatters = new Map<string, Intl.NumberFormat>();\n\n// formatToParts rather than a replace over the formatted string, so only the\n// sign is substituted. A blind replace would also hit a hyphen inside a\n// locale's currency name or grouping, and locales that wrap negatives in\n// parentheses have no minus to swap at all — both of which this leaves alone.\nfunction formatCurrency(value: number, options: {\n currency: string;\n locale: string | undefined;\n sign: SignDisplay;\n}) {\n return formatterFor(options.locale, options.currency, options.sign).formatToParts(value).map(part => part.type === 'minusSign' ? MINUS_SIGN : part.value).join('');\n}\nfunction formatterFor(locale: string | undefined, currency: string, sign: SignDisplay) {\n // Neither a BCP 47 locale nor an ISO 4217 code can contain a vertical bar\n // and `sign` is one of three known words, so joining on one cannot make two\n // different option sets share a key.\n const key = `${locale ?? ''}|${currency}|${sign}`;\n const cached = formatters.get(key);\n if (cached) {\n return cached;\n }\n const formatter = new Intl.NumberFormat(locale, {\n currency,\n signDisplay: sign,\n style: 'currency'\n });\n formatters.set(key, formatter);\n return formatter;\n}\n\n// Zero is neither owed nor owing, so it takes the neutral role rather than\n// being forced into one of the two. Negative zero lands here too, which is\n// what a rounded-away debt should read as.\nfunction resolveTone(value: number, tone: Tone) {\n if (tone !== 'auto') {\n return tone;\n }\n if (value > 0) {\n return 'positive';\n }\n if (value < 0) {\n return 'negative';\n }\n return 'neutral';\n}\nexport type { CurrencyProps };\nexport default Currency;"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kanso-labs/kanso-ui",
|
|
3
|
-
"version": "0.28.
|
|
3
|
+
"version": "0.28.2",
|
|
4
4
|
"description": "A React component library built on React Aria Components primitives and styled with StyleX, with design tokens sourced from a single W3C DTCG file and compiled via Style Dictionary",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -70,10 +70,11 @@
|
|
|
70
70
|
"devDependencies": {
|
|
71
71
|
"@babel/core": "7.29.7",
|
|
72
72
|
"@chromatic-com/storybook": "5.3.1",
|
|
73
|
+
"@codecov/rollup-plugin": "2.0.1",
|
|
73
74
|
"@commitlint/cli": "21.2.2",
|
|
74
75
|
"@commitlint/config-conventional": "21.2.2",
|
|
75
76
|
"@eslint/js": "10.0.1",
|
|
76
|
-
"@kanso-labs/unplugin-style-dictionary": "0.6.
|
|
77
|
+
"@kanso-labs/unplugin-style-dictionary": "0.6.2",
|
|
77
78
|
"@rolldown/plugin-babel": "0.2.4",
|
|
78
79
|
"@storybook/addon-a11y": "10.6.0",
|
|
79
80
|
"@storybook/addon-docs": "10.6.0",
|