@sproutsocial/seeds-react-numeral 1.0.0

package/.eslintignore

@@ -0,0 +1,6 @@
+# Node modules
+node_modules/
+
+# Build output
+dist/
+coverage/

package/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["eslint-config-seeds/racine"],
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,21 @@
+yarn run v1.22.22
+$ tsup --dts
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.0.2
+CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-numeral/tsup.config.ts
+CLI Target: es2022
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+CJS dist/index.js     6.55 KB
+CJS dist/index.js.map 9.75 KB
+CJS ⚡️ Build success in 78ms
+ESM dist/esm/index.js     4.45 KB
+ESM dist/esm/index.js.map 9.64 KB
+ESM ⚡️ Build success in 77ms
+DTS Build start
+DTS ⚡️ Build success in 7488ms
+DTS dist/index.d.ts  1.29 KB
+DTS dist/index.d.mts 1.29 KB
+Done in 9.98s.

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# @sproutsocial/seeds-react-numeral
+
+## 1.0.0
+
+### Major Changes
+
+- 4a52cff: Migrate Numeral and Tooltip components to their own seeds-react component
+
+### Patch Changes
+
+- Updated dependencies [4a52cff]
+  - @sproutsocial/seeds-react-tooltip@1.0.0

package/dist/esm/index.js

@@ -0,0 +1,154 @@
+// src/Numeral.tsx
+import "react";
+import memoize from "lru-memoize";
+
+// src/constants.ts
+var DEFAULT_THRESHOLD = 1e4;
+var MEMO_CACHE_SIZE = 10;
+var COMPARE_OBJECTS = true;
+var MAX_PRECISION = 20;
+var ABBREV_PRECISION = 2;
+var DefaultPrecisions = {
+  decimal: [0, 2],
+  percent: [0, 1],
+  currency: [2, 2]
+};
+var EM_DASH = "\u2014";
+
+// src/Numeral.tsx
+import Tooltip from "@sproutsocial/seeds-react-tooltip";
+import { VisuallyHidden } from "@sproutsocial/seeds-react-visually-hidden";
+
+// src/styles.ts
+import styled from "styled-components";
+import Text from "@sproutsocial/seeds-react-text";
+var Container = styled(Text)`
+  font-variant-numeric: tabular-nums;
+`;
+var AbbrContainer = styled(Text)`
+  font-variant-numeric: tabular-nums;
+  border-bottom: 1px dotted
+    ${(props) => props.theme.colors.container.border.base};
+`;
+
+// src/Numeral.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var _getNumberFormatters = (options) => {
+  const { locale, format, currency, min, max } = options;
+  const compactPrecision = min === max ? min : ABBREV_PRECISION;
+  const _currency = format === "currency" ? currency : void 0;
+  const standard = {
+    style: format,
+    minimumFractionDigits: min,
+    maximumFractionDigits: max,
+    currency: _currency
+  };
+  const compact = {
+    style: format,
+    minimumFractionDigits: compactPrecision,
+    maximumFractionDigits: compactPrecision,
+    currency: _currency,
+    notation: "compact"
+  };
+  let abbreviated;
+  try {
+    abbreviated = new Intl.NumberFormat(locale, compact);
+  } catch (error) {
+    abbreviated = new Intl.NumberFormat(locale, standard);
+  }
+  return {
+    standard: new Intl.NumberFormat(locale, standard),
+    abbreviated
+  };
+};
+var memoizer = memoize(MEMO_CACHE_SIZE, COMPARE_OBJECTS);
+var getNumberFormatters = memoizer(_getNumberFormatters);
+var getThreshold = (abbreviate) => {
+  if (typeof abbreviate === "number")
+    return Math.max(1e3, Math.abs(abbreviate));
+  if (abbreviate)
+    return DEFAULT_THRESHOLD;
+  return Infinity;
+};
+var getMinMaxPrecision = (precision, format) => {
+  if (typeof precision === "number")
+    return [precision, precision];
+  if (precision === "none")
+    return [0, MAX_PRECISION];
+  return DefaultPrecisions[format];
+};
+var isValidNumber = (value) => {
+  return typeof value === "number" && isFinite(value);
+};
+var normalizeArgs = (props) => {
+  const {
+    number,
+    locale = "us-EN",
+    format = props.currency ? "currency" : "decimal",
+    currency = "USD",
+    abbreviate = true,
+    invalidNumberLabel,
+    precision,
+    qa,
+    ...rest
+  } = props;
+  const threshold = getThreshold(abbreviate);
+  const [min, max] = getMinMaxPrecision(precision, format);
+  const _number = number || 0;
+  const value = _number * (format === "percent" ? 0.01 : 1);
+  const canAbbreviate = Math.abs(_number) >= threshold;
+  const options = {
+    locale,
+    format,
+    currency,
+    min,
+    max
+  };
+  return {
+    value,
+    canAbbreviate,
+    invalidNumberLabel,
+    options,
+    qa,
+    rest
+  };
+};
+var getNumeral = ({
+  returnType,
+  props
+}) => {
+  const isReturnTypeString = returnType === "string";
+  const { value, canAbbreviate, invalidNumberLabel, options, qa, rest } = normalizeArgs(props);
+  if (!isValidNumber(props.number)) {
+    return isReturnTypeString ? EM_DASH : /* @__PURE__ */ jsxs(Fragment, { children: [
+      invalidNumberLabel && // Give screen readers something useful to read off + hide the em dash
+      /* @__PURE__ */ jsx(VisuallyHidden, { children: invalidNumberLabel }),
+      /* @__PURE__ */ jsx(Container, { "aria-hidden": true, ...qa, children: EM_DASH })
+    ] });
+  }
+  const formatters = getNumberFormatters(options);
+  const fullText = formatters.standard.format(value);
+  if (canAbbreviate) {
+    const abbreviatedText = formatters.abbreviated.format(value);
+    if (abbreviatedText !== fullText) {
+      return isReturnTypeString ? abbreviatedText : /* @__PURE__ */ jsx(Tooltip, { content: fullText, children: /* @__PURE__ */ jsx(AbbrContainer, { ...qa, ...rest, children: abbreviatedText }) });
+    }
+  }
+  return isReturnTypeString ? fullText : /* @__PURE__ */ jsx(Container, { ...qa, ...rest, children: fullText });
+};
+var formatNumeral = (props) => {
+  return getNumeral({ returnType: "string", props });
+};
+var Numeral = (props) => {
+  return getNumeral({ returnType: "component", props });
+};
+var Numeral_default = Numeral;
+
+// src/index.ts
+var src_default = Numeral_default;
+export {
+  Numeral_default as Numeral,
+  src_default as default,
+  formatNumeral
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Numeral.tsx","../../src/constants.ts","../../src/styles.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\n// @ts-expect-error lru-memoize is not typed\nimport memoize from \"lru-memoize\";\nimport { EM_DASH } from \"./constants\";\nimport Tooltip from \"@sproutsocial/seeds-react-tooltip\";\nimport type { TypeTextProps } from \"@sproutsocial/seeds-react-text\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\n\nimport {\n  DEFAULT_THRESHOLD,\n  MEMO_CACHE_SIZE,\n  COMPARE_OBJECTS,\n  MAX_PRECISION,\n  ABBREV_PRECISION,\n  DefaultPrecisions,\n} from \"./constants\";\nimport { AbbrContainer, Container } from \"./styles\";\nimport type { EnumNumeralFormat, TypeNumeralProps } from \"./NumeralTypes\";\n\ninterface TypeFormatOptions {\n  locale: string;\n  format: EnumNumeralFormat;\n  currency: string;\n  min: number;\n  max: number;\n}\n\ninterface TypeFormatters {\n  standard: Intl.NumberFormat;\n  abbreviated: Intl.NumberFormat;\n}\n\ninterface TypeArgs {\n  value: number;\n  canAbbreviate: boolean;\n  invalidNumberLabel?: string;\n  ariaLabel?: string;\n  options: TypeFormatOptions;\n  qa: object | null | undefined;\n  rest: Omit<TypeTextProps, \"children\">;\n}\n\nconst _getNumberFormatters = (options: TypeFormatOptions): TypeFormatters => {\n  const { locale, format, currency, min, max } = options;\n  const compactPrecision = min === max ? min : ABBREV_PRECISION;\n\n  const _currency = format === \"currency\" ? currency : undefined;\n\n  const standard: Intl.NumberFormatOptions = {\n    style: format,\n    minimumFractionDigits: min,\n    maximumFractionDigits: max,\n    currency: _currency,\n  };\n  const compact: Intl.NumberFormatOptions = {\n    style: format,\n    minimumFractionDigits: compactPrecision,\n    maximumFractionDigits: compactPrecision,\n    currency: _currency,\n    notation: \"compact\",\n  };\n  // Safari 14.1 is currently throwing errors when trying to use the compact\n  // options of NumberFormat\n  // https://community.atlassian.com/t5/Trello-questions/Trello-stuck-at-loading-after-Safari-14-1-update-on-macOS-Mojave/qaq-p/1675577#M45687\n  let abbreviated;\n\n  try {\n    abbreviated = new Intl.NumberFormat(locale, compact);\n  } catch (error) {\n    abbreviated = new Intl.NumberFormat(locale, standard);\n  }\n\n  return {\n    standard: new Intl.NumberFormat(locale, standard),\n    abbreviated,\n  };\n};\n\n// Memoize to reduce the energy of creating new instances of Intl.NumberFormat\nconst memoizer = memoize(MEMO_CACHE_SIZE, COMPARE_OBJECTS);\nconst getNumberFormatters = memoizer(_getNumberFormatters);\n\nconst getThreshold = (abbreviate: boolean | number): number => {\n  if (typeof abbreviate === \"number\")\n    return Math.max(1000, Math.abs(abbreviate));\n  if (abbreviate) return DEFAULT_THRESHOLD;\n  return Infinity;\n};\n\nconst getMinMaxPrecision = (\n  precision: TypeNumeralProps[\"precision\"],\n  format: EnumNumeralFormat\n): [number, number] => {\n  if (typeof precision === \"number\") return [precision, precision];\n  if (precision === \"none\") return [0, MAX_PRECISION];\n  return DefaultPrecisions[format];\n};\n\nconst isValidNumber = (value: unknown): boolean => {\n  return typeof value === \"number\" && isFinite(value);\n};\n\nconst normalizeArgs = (props: TypeNumeralProps): TypeArgs => {\n  const {\n    number,\n    locale = \"us-EN\",\n    format = props.currency ? \"currency\" : \"decimal\",\n    currency = \"USD\",\n    abbreviate = true,\n    invalidNumberLabel,\n    precision,\n    qa,\n    ...rest\n  } = props;\n  const threshold = getThreshold(abbreviate);\n  const [min, max] = getMinMaxPrecision(precision, format);\n\n  const _number = number || 0;\n\n  const value = _number * (format === \"percent\" ? 0.01 : 1);\n  const canAbbreviate = Math.abs(_number) >= threshold;\n  const options = {\n    locale,\n    format,\n    currency,\n    min,\n    max,\n  };\n\n  return {\n    value,\n    canAbbreviate,\n    invalidNumberLabel,\n    options,\n    qa,\n    rest,\n  };\n};\n\nconst getNumeral = ({\n  returnType,\n  props,\n}: {\n  returnType: \"string\" | \"component\";\n  props: TypeNumeralProps;\n}): string | React.ReactNode => {\n  const isReturnTypeString = returnType === \"string\";\n  const { value, canAbbreviate, invalidNumberLabel, options, qa, rest } =\n    normalizeArgs(props);\n\n  if (!isValidNumber(props.number)) {\n    return isReturnTypeString ? (\n      EM_DASH\n    ) : (\n      <>\n        {invalidNumberLabel && (\n          // Give screen readers something useful to read off + hide the em dash\n          <VisuallyHidden>{invalidNumberLabel}</VisuallyHidden>\n        )}\n        <Container aria-hidden {...qa}>\n          {EM_DASH}\n        </Container>\n      </>\n    );\n  }\n\n  const formatters = getNumberFormatters(options);\n  const fullText = formatters.standard.format(value);\n\n  if (canAbbreviate) {\n    const abbreviatedText = formatters.abbreviated.format(value);\n\n    // The following are used to debug the skipped tests which are misbehaving!!!\n    // console.log({ fullText, abbreviatedText });\n    // console.log({ abbreviated: formatters.abbreviated.resolvedOptions() });\n    // The following check is necessary because each locale may have differing thresholds\n    // for which abbreviation begins.\n    if (abbreviatedText !== fullText) {\n      return isReturnTypeString ? (\n        abbreviatedText\n      ) : (\n        <Tooltip content={fullText}>\n          <AbbrContainer {...qa} {...rest}>\n            {abbreviatedText}\n          </AbbrContainer>\n        </Tooltip>\n      );\n    }\n  }\n\n  return isReturnTypeString ? (\n    fullText\n  ) : (\n    <Container {...qa} {...rest}>\n      {fullText}\n    </Container>\n  );\n};\n\nexport const formatNumeral = (props: TypeNumeralProps): string => {\n  return getNumeral({ returnType: \"string\", props }) as string;\n};\n\nconst Numeral = (props: TypeNumeralProps) => {\n  return getNumeral({ returnType: \"component\", props });\n};\n\nexport default Numeral;\n","import type { EnumNumeralFormat } from \"./NumeralTypes\";\n\nexport const DEFAULT_THRESHOLD = 10000;\nexport const MEMO_CACHE_SIZE = 10;\nexport const COMPARE_OBJECTS = true;\nexport const MAX_PRECISION = 20;\nexport const ABBREV_PRECISION = 2;\nexport const DefaultPrecisions: {\n  [key in EnumNumeralFormat]: [number, number];\n} = {\n  decimal: [0, 2],\n  percent: [0, 1],\n  currency: [2, 2],\n};\n\nexport const EM_DASH = \"—\"; // shift + option + hyphen on a mac keyboard\n","import styled from \"styled-components\";\nimport Text from \"@sproutsocial/seeds-react-text\";\n\nexport const Container = styled(Text)`\n  font-variant-numeric: tabular-nums;\n`;\n\nexport const AbbrContainer = styled(Text)`\n  font-variant-numeric: tabular-nums;\n  border-bottom: 1px dotted\n    ${(props) => props.theme.colors.container.border.base};\n`;\n","import Numeral, { formatNumeral } from \"./Numeral\";\n\nexport default Numeral;\nexport { Numeral };\nexport { formatNumeral };\nexport * from \"./NumeralTypes\";\n"],"mappings":"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","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { TypeTextProps } from '@sproutsocial/seeds-react-text';
+
+type EnumNumeralFormat = "decimal" | "currency" | "percent";
+interface TypeNumeralProps extends Omit<TypeTextProps, "children"> {
+    /** The number to be formatted */
+    number?: number | null | undefined;
+    /** Locale to format. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument */
+    locale?: string;
+    format?: EnumNumeralFormat;
+    /** The currency format to use when formatting currency */
+    currency?: string;
+    /** A boolean determining whether or not the number should be abbreviated, or a number representing the abbreviation threshold  */
+    abbreviate?: boolean | number;
+    /** Text to be read off by screen readers for invalid values (i.e., any value rendered as '—' (em dash)) */
+    invalidNumberLabel?: string;
+    /** Override the default decimal precision (2 for decimals/currency, 1 for percentages), or "none" allowing unrestricted precision. */
+    precision?: number | "none";
+    qa?: object;
+}
+
+declare const formatNumeral: (props: TypeNumeralProps) => string;
+declare const Numeral: (props: TypeNumeralProps) => React.ReactNode;
+
+export { type EnumNumeralFormat, Numeral, type TypeNumeralProps, Numeral as default, formatNumeral };

package/dist/index.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { TypeTextProps } from '@sproutsocial/seeds-react-text';
+
+type EnumNumeralFormat = "decimal" | "currency" | "percent";
+interface TypeNumeralProps extends Omit<TypeTextProps, "children"> {
+    /** The number to be formatted */
+    number?: number | null | undefined;
+    /** Locale to format. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument */
+    locale?: string;
+    format?: EnumNumeralFormat;
+    /** The currency format to use when formatting currency */
+    currency?: string;
+    /** A boolean determining whether or not the number should be abbreviated, or a number representing the abbreviation threshold  */
+    abbreviate?: boolean | number;
+    /** Text to be read off by screen readers for invalid values (i.e., any value rendered as '—' (em dash)) */
+    invalidNumberLabel?: string;
+    /** Override the default decimal precision (2 for decimals/currency, 1 for percentages), or "none" allowing unrestricted precision. */
+    precision?: number | "none";
+    qa?: object;
+}
+
+declare const formatNumeral: (props: TypeNumeralProps) => string;
+declare const Numeral: (props: TypeNumeralProps) => React.ReactNode;
+
+export { type EnumNumeralFormat, Numeral, type TypeNumeralProps, Numeral as default, formatNumeral };

package/dist/index.js

@@ -0,0 +1,192 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Numeral: () => Numeral_default,
+  default: () => src_default,
+  formatNumeral: () => formatNumeral
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/Numeral.tsx
+var React = require("react");
+var import_lru_memoize = __toESM(require("lru-memoize"));
+
+// src/constants.ts
+var DEFAULT_THRESHOLD = 1e4;
+var MEMO_CACHE_SIZE = 10;
+var COMPARE_OBJECTS = true;
+var MAX_PRECISION = 20;
+var ABBREV_PRECISION = 2;
+var DefaultPrecisions = {
+  decimal: [0, 2],
+  percent: [0, 1],
+  currency: [2, 2]
+};
+var EM_DASH = "\u2014";
+
+// src/Numeral.tsx
+var import_seeds_react_tooltip = __toESM(require("@sproutsocial/seeds-react-tooltip"));
+var import_seeds_react_visually_hidden = require("@sproutsocial/seeds-react-visually-hidden");
+
+// src/styles.ts
+var import_styled_components = __toESM(require("styled-components"));
+var import_seeds_react_text = __toESM(require("@sproutsocial/seeds-react-text"));
+var Container = (0, import_styled_components.default)(import_seeds_react_text.default)`
+  font-variant-numeric: tabular-nums;
+`;
+var AbbrContainer = (0, import_styled_components.default)(import_seeds_react_text.default)`
+  font-variant-numeric: tabular-nums;
+  border-bottom: 1px dotted
+    ${(props) => props.theme.colors.container.border.base};
+`;
+
+// src/Numeral.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var _getNumberFormatters = (options) => {
+  const { locale, format, currency, min, max } = options;
+  const compactPrecision = min === max ? min : ABBREV_PRECISION;
+  const _currency = format === "currency" ? currency : void 0;
+  const standard = {
+    style: format,
+    minimumFractionDigits: min,
+    maximumFractionDigits: max,
+    currency: _currency
+  };
+  const compact = {
+    style: format,
+    minimumFractionDigits: compactPrecision,
+    maximumFractionDigits: compactPrecision,
+    currency: _currency,
+    notation: "compact"
+  };
+  let abbreviated;
+  try {
+    abbreviated = new Intl.NumberFormat(locale, compact);
+  } catch (error) {
+    abbreviated = new Intl.NumberFormat(locale, standard);
+  }
+  return {
+    standard: new Intl.NumberFormat(locale, standard),
+    abbreviated
+  };
+};
+var memoizer = (0, import_lru_memoize.default)(MEMO_CACHE_SIZE, COMPARE_OBJECTS);
+var getNumberFormatters = memoizer(_getNumberFormatters);
+var getThreshold = (abbreviate) => {
+  if (typeof abbreviate === "number")
+    return Math.max(1e3, Math.abs(abbreviate));
+  if (abbreviate)
+    return DEFAULT_THRESHOLD;
+  return Infinity;
+};
+var getMinMaxPrecision = (precision, format) => {
+  if (typeof precision === "number")
+    return [precision, precision];
+  if (precision === "none")
+    return [0, MAX_PRECISION];
+  return DefaultPrecisions[format];
+};
+var isValidNumber = (value) => {
+  return typeof value === "number" && isFinite(value);
+};
+var normalizeArgs = (props) => {
+  const {
+    number,
+    locale = "us-EN",
+    format = props.currency ? "currency" : "decimal",
+    currency = "USD",
+    abbreviate = true,
+    invalidNumberLabel,
+    precision,
+    qa,
+    ...rest
+  } = props;
+  const threshold = getThreshold(abbreviate);
+  const [min, max] = getMinMaxPrecision(precision, format);
+  const _number = number || 0;
+  const value = _number * (format === "percent" ? 0.01 : 1);
+  const canAbbreviate = Math.abs(_number) >= threshold;
+  const options = {
+    locale,
+    format,
+    currency,
+    min,
+    max
+  };
+  return {
+    value,
+    canAbbreviate,
+    invalidNumberLabel,
+    options,
+    qa,
+    rest
+  };
+};
+var getNumeral = ({
+  returnType,
+  props
+}) => {
+  const isReturnTypeString = returnType === "string";
+  const { value, canAbbreviate, invalidNumberLabel, options, qa, rest } = normalizeArgs(props);
+  if (!isValidNumber(props.number)) {
+    return isReturnTypeString ? EM_DASH : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      invalidNumberLabel && // Give screen readers something useful to read off + hide the em dash
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_visually_hidden.VisuallyHidden, { children: invalidNumberLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Container, { "aria-hidden": true, ...qa, children: EM_DASH })
+    ] });
+  }
+  const formatters = getNumberFormatters(options);
+  const fullText = formatters.standard.format(value);
+  if (canAbbreviate) {
+    const abbreviatedText = formatters.abbreviated.format(value);
+    if (abbreviatedText !== fullText) {
+      return isReturnTypeString ? abbreviatedText : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_tooltip.default, { content: fullText, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AbbrContainer, { ...qa, ...rest, children: abbreviatedText }) });
+    }
+  }
+  return isReturnTypeString ? fullText : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Container, { ...qa, ...rest, children: fullText });
+};
+var formatNumeral = (props) => {
+  return getNumeral({ returnType: "string", props });
+};
+var Numeral = (props) => {
+  return getNumeral({ returnType: "component", props });
+};
+var Numeral_default = Numeral;
+
+// src/index.ts
+var src_default = Numeral_default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Numeral,
+  formatNumeral
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/Numeral.tsx","../src/constants.ts","../src/styles.ts"],"sourcesContent":["import Numeral, { formatNumeral } from \"./Numeral\";\n\nexport default Numeral;\nexport { Numeral };\nexport { formatNumeral };\nexport * from \"./NumeralTypes\";\n","import * as React from \"react\";\n// @ts-expect-error lru-memoize is not typed\nimport memoize from \"lru-memoize\";\nimport { EM_DASH } from \"./constants\";\nimport Tooltip from \"@sproutsocial/seeds-react-tooltip\";\nimport type { TypeTextProps } from \"@sproutsocial/seeds-react-text\";\nimport { VisuallyHidden } from \"@sproutsocial/seeds-react-visually-hidden\";\n\nimport {\n  DEFAULT_THRESHOLD,\n  MEMO_CACHE_SIZE,\n  COMPARE_OBJECTS,\n  MAX_PRECISION,\n  ABBREV_PRECISION,\n  DefaultPrecisions,\n} from \"./constants\";\nimport { AbbrContainer, Container } from \"./styles\";\nimport type { EnumNumeralFormat, TypeNumeralProps } from \"./NumeralTypes\";\n\ninterface TypeFormatOptions {\n  locale: string;\n  format: EnumNumeralFormat;\n  currency: string;\n  min: number;\n  max: number;\n}\n\ninterface TypeFormatters {\n  standard: Intl.NumberFormat;\n  abbreviated: Intl.NumberFormat;\n}\n\ninterface TypeArgs {\n  value: number;\n  canAbbreviate: boolean;\n  invalidNumberLabel?: string;\n  ariaLabel?: string;\n  options: TypeFormatOptions;\n  qa: object | null | undefined;\n  rest: Omit<TypeTextProps, \"children\">;\n}\n\nconst _getNumberFormatters = (options: TypeFormatOptions): TypeFormatters => {\n  const { locale, format, currency, min, max } = options;\n  const compactPrecision = min === max ? min : ABBREV_PRECISION;\n\n  const _currency = format === \"currency\" ? currency : undefined;\n\n  const standard: Intl.NumberFormatOptions = {\n    style: format,\n    minimumFractionDigits: min,\n    maximumFractionDigits: max,\n    currency: _currency,\n  };\n  const compact: Intl.NumberFormatOptions = {\n    style: format,\n    minimumFractionDigits: compactPrecision,\n    maximumFractionDigits: compactPrecision,\n    currency: _currency,\n    notation: \"compact\",\n  };\n  // Safari 14.1 is currently throwing errors when trying to use the compact\n  // options of NumberFormat\n  // https://community.atlassian.com/t5/Trello-questions/Trello-stuck-at-loading-after-Safari-14-1-update-on-macOS-Mojave/qaq-p/1675577#M45687\n  let abbreviated;\n\n  try {\n    abbreviated = new Intl.NumberFormat(locale, compact);\n  } catch (error) {\n    abbreviated = new Intl.NumberFormat(locale, standard);\n  }\n\n  return {\n    standard: new Intl.NumberFormat(locale, standard),\n    abbreviated,\n  };\n};\n\n// Memoize to reduce the energy of creating new instances of Intl.NumberFormat\nconst memoizer = memoize(MEMO_CACHE_SIZE, COMPARE_OBJECTS);\nconst getNumberFormatters = memoizer(_getNumberFormatters);\n\nconst getThreshold = (abbreviate: boolean | number): number => {\n  if (typeof abbreviate === \"number\")\n    return Math.max(1000, Math.abs(abbreviate));\n  if (abbreviate) return DEFAULT_THRESHOLD;\n  return Infinity;\n};\n\nconst getMinMaxPrecision = (\n  precision: TypeNumeralProps[\"precision\"],\n  format: EnumNumeralFormat\n): [number, number] => {\n  if (typeof precision === \"number\") return [precision, precision];\n  if (precision === \"none\") return [0, MAX_PRECISION];\n  return DefaultPrecisions[format];\n};\n\nconst isValidNumber = (value: unknown): boolean => {\n  return typeof value === \"number\" && isFinite(value);\n};\n\nconst normalizeArgs = (props: TypeNumeralProps): TypeArgs => {\n  const {\n    number,\n    locale = \"us-EN\",\n    format = props.currency ? \"currency\" : \"decimal\",\n    currency = \"USD\",\n    abbreviate = true,\n    invalidNumberLabel,\n    precision,\n    qa,\n    ...rest\n  } = props;\n  const threshold = getThreshold(abbreviate);\n  const [min, max] = getMinMaxPrecision(precision, format);\n\n  const _number = number || 0;\n\n  const value = _number * (format === \"percent\" ? 0.01 : 1);\n  const canAbbreviate = Math.abs(_number) >= threshold;\n  const options = {\n    locale,\n    format,\n    currency,\n    min,\n    max,\n  };\n\n  return {\n    value,\n    canAbbreviate,\n    invalidNumberLabel,\n    options,\n    qa,\n    rest,\n  };\n};\n\nconst getNumeral = ({\n  returnType,\n  props,\n}: {\n  returnType: \"string\" | \"component\";\n  props: TypeNumeralProps;\n}): string | React.ReactNode => {\n  const isReturnTypeString = returnType === \"string\";\n  const { value, canAbbreviate, invalidNumberLabel, options, qa, rest } =\n    normalizeArgs(props);\n\n  if (!isValidNumber(props.number)) {\n    return isReturnTypeString ? (\n      EM_DASH\n    ) : (\n      <>\n        {invalidNumberLabel && (\n          // Give screen readers something useful to read off + hide the em dash\n          <VisuallyHidden>{invalidNumberLabel}</VisuallyHidden>\n        )}\n        <Container aria-hidden {...qa}>\n          {EM_DASH}\n        </Container>\n      </>\n    );\n  }\n\n  const formatters = getNumberFormatters(options);\n  const fullText = formatters.standard.format(value);\n\n  if (canAbbreviate) {\n    const abbreviatedText = formatters.abbreviated.format(value);\n\n    // The following are used to debug the skipped tests which are misbehaving!!!\n    // console.log({ fullText, abbreviatedText });\n    // console.log({ abbreviated: formatters.abbreviated.resolvedOptions() });\n    // The following check is necessary because each locale may have differing thresholds\n    // for which abbreviation begins.\n    if (abbreviatedText !== fullText) {\n      return isReturnTypeString ? (\n        abbreviatedText\n      ) : (\n        <Tooltip content={fullText}>\n          <AbbrContainer {...qa} {...rest}>\n            {abbreviatedText}\n          </AbbrContainer>\n        </Tooltip>\n      );\n    }\n  }\n\n  return isReturnTypeString ? (\n    fullText\n  ) : (\n    <Container {...qa} {...rest}>\n      {fullText}\n    </Container>\n  );\n};\n\nexport const formatNumeral = (props: TypeNumeralProps): string => {\n  return getNumeral({ returnType: \"string\", props }) as string;\n};\n\nconst Numeral = (props: TypeNumeralProps) => {\n  return getNumeral({ returnType: \"component\", props });\n};\n\nexport default Numeral;\n","import type { EnumNumeralFormat } from \"./NumeralTypes\";\n\nexport const DEFAULT_THRESHOLD = 10000;\nexport const MEMO_CACHE_SIZE = 10;\nexport const COMPARE_OBJECTS = true;\nexport const MAX_PRECISION = 20;\nexport const ABBREV_PRECISION = 2;\nexport const DefaultPrecisions: {\n  [key in EnumNumeralFormat]: [number, number];\n} = {\n  decimal: [0, 2],\n  percent: [0, 1],\n  currency: [2, 2],\n};\n\nexport const EM_DASH = \"—\"; // shift + option + hyphen on a mac keyboard\n","import styled from \"styled-components\";\nimport Text from \"@sproutsocial/seeds-react-text\";\n\nexport const Container = styled(Text)`\n  font-variant-numeric: tabular-nums;\n`;\n\nexport const AbbrContainer = styled(Text)`\n  font-variant-numeric: tabular-nums;\n  border-bottom: 1px dotted\n    ${(props) => props.theme.colors.container.border.base};\n`;\n"],"mappings":"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","names":["styled","Text","memoize","Tooltip"]}

package/jest.config.js

@@ -0,0 +1,13 @@
+const baseConfig = require("@sproutsocial/seeds-testing");
+
+/** * @type {import('jest').Config} */
+const config = {
+  ...baseConfig,
+  displayName: "seeds-react-numeral",
+  testPathIgnorePatterns: [
+    ...baseConfig.testPathIgnorePatterns,
+    "testNumeral.tsx",
+  ],
+};
+
+module.exports = config;

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@sproutsocial/seeds-react-numeral",
+  "version": "1.0.0",
+  "description": "Seeds React Numeral",
+  "author": "Sprout Social, Inc.",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup --dts",
+    "build:debug": "tsup --dts --metafile",
+    "dev": "tsup --watch --dts",
+    "clean": "rm -rf .turbo dist",
+    "clean:modules": "rm -rf node_modules",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false"
+  },
+  "dependencies": {
+    "@sproutsocial/seeds-react-theme": "*",
+    "@sproutsocial/seeds-react-system-props": "*",
+    "@sproutsocial/seeds-react-tooltip": "*",
+    "@sproutsocial/seeds-react-text": "*",
+    "@sproutsocial/seeds-react-visually-hidden": "*",
+    "lru-memoize": "~1.0.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
+    "@sproutsocial/eslint-config-seeds": "*",
+    "react": "^18.0.0",
+    "styled-components": "^5.2.3",
+    "tsup": "^8.0.2",
+    "typescript": "^5.6.2",
+    "@sproutsocial/seeds-tsconfig": "*",
+    "@sproutsocial/seeds-testing": "*",
+    "@sproutsocial/seeds-react-testing-library": "*"
+  },
+  "peerDependencies": {
+    "styled-components": "^5.2.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}