@sproutsocial/seeds-react-numeral 1.0.50 → 1.0.52

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 yarn run v1.22.22
-$ tsup --dts
+$ tsup --dts && cp src/numeral.css dist/numeral.css
 CLI Building entry: src/index.ts
 CLI Using tsconfig: tsconfig.json
 CLI tsup v8.5.0
@@ -8,14 +8,14 @@ $ tsup --dts
 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 12ms
-ESM dist/esm/index.js     4.44 KB
-ESM dist/esm/index.js.map 9.64 KB
-ESM ⚡️ Build success in 12ms
+CJS dist/index.js     8.30 KB
+CJS dist/index.js.map 14.48 KB
+CJS ⚡️ Build success in 14ms
+ESM dist/esm/index.js     5.98 KB
+ESM dist/esm/index.js.map 14.33 KB
+ESM ⚡️ Build success in 14ms
 DTS Build start
-DTS ⚡️ Build success in 1640ms
-DTS dist/index.d.ts  1.29 KB
-DTS dist/index.d.mts 1.29 KB
-Done in 2.35s.
+DTS ⚡️ Build success in 1660ms
+DTS dist/index.d.ts  1.82 KB
+DTS dist/index.d.mts 1.82 KB
+Done in 2.37s.

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @sproutsocial/seeds-react-numeral
 
+## 1.0.52
+
+### Patch Changes
+
+- Updated dependencies [d21ae54]
+  - @sproutsocial/seeds-react-theme@4.2.1
+  - @sproutsocial/seeds-react-tooltip@1.1.31
+  - @sproutsocial/seeds-react-visually-hidden@1.0.26
+
+## 1.0.51
+
+### Patch Changes
+
+- 6611f6a: Migrate Numeral to the hybrid Tailwind pattern: a pure CSS-class Tailwind implementation routed against styled-components via `needsStyledComponents`, with component-scoped classes in `numeral.css` under `@layer components` so Tailwind utilities reliably override them. `seeds-react-system-props` now also detects styled() extensions via the generated `sc-*` className so wrapped components take the styled-components path.
+- Updated dependencies [6611f6a]
+  - @sproutsocial/seeds-react-system-props@3.1.2
+  - @sproutsocial/seeds-react-tooltip@1.1.30
+  - @sproutsocial/seeds-react-text@1.5.1
+  - @sproutsocial/seeds-react-visually-hidden@1.0.25
+
 ## 1.0.50
 
 ### Patch Changes

package/dist/esm/index.js

@@ -1,4 +1,7 @@
-// src/Numeral.tsx
+// src/NumeralHybrid.tsx
+import "react";
+
+// src/getNumeral.tsx
 import "react";
 import memoize from "lru-memoize";
 
@@ -15,23 +18,9 @@ var DefaultPrecisions = {
 };
 var EM_DASH = "\u2014";
 
-// src/Numeral.tsx
+// src/getNumeral.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;
@@ -110,17 +99,13 @@ var normalizeArgs = (props) => {
     rest
   };
 };
-var getNumeral = ({
-  returnType,
-  props
-}) => {
-  const isReturnTypeString = returnType === "string";
+var renderNumeral = (props, { Container: Container2, AbbrContainer: AbbrContainer2 }) => {
   const { value, canAbbreviate, invalidNumberLabel, options, qa, rest } = normalizeArgs(props);
   if (!isValidNumber(props.number)) {
-    return isReturnTypeString ? EM_DASH : /* @__PURE__ */ jsxs(Fragment, { children: [
+    return /* @__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 })
+      /* @__PURE__ */ jsx(Container2, { "aria-hidden": true, ...qa, children: EM_DASH })
     ] });
   }
   const formatters = getNumberFormatters(options);
@@ -128,18 +113,86 @@ var getNumeral = ({
   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 /* @__PURE__ */ jsx(Tooltip, { content: fullText, children: /* @__PURE__ */ jsx(AbbrContainer2, { ...qa, ...rest, children: abbreviatedText }) });
     }
   }
-  return isReturnTypeString ? fullText : /* @__PURE__ */ jsx(Container, { ...qa, ...rest, children: fullText });
+  return /* @__PURE__ */ jsx(Container2, { ...qa, ...rest, children: fullText });
 };
 var formatNumeral = (props) => {
-  return getNumeral({ returnType: "string", props });
+  const { value, canAbbreviate, options } = normalizeArgs(props);
+  if (!isValidNumber(props.number)) {
+    return EM_DASH;
+  }
+  const formatters = getNumberFormatters(options);
+  const fullText = formatters.standard.format(value);
+  if (canAbbreviate) {
+    const abbreviatedText = formatters.abbreviated.format(value);
+    if (abbreviatedText !== fullText) {
+      return abbreviatedText;
+    }
+  }
+  return fullText;
 };
-var Numeral = (props) => {
-  return getNumeral({ returnType: "component", props });
+
+// 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/NumeralTailwind.tsx
+import "react";
+import Text2 from "@sproutsocial/seeds-react-text";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+var TwContainer = ({ className, children, ...rest }) => /* @__PURE__ */ jsx2(Text2, { className: cn("seeds-numeral", className), ...rest, children });
+var TwAbbrContainer = ({ className, children, ...rest }) => /* @__PURE__ */ jsx2(
+  Text2,
+  {
+    className: cn("seeds-numeral", "seeds-numeral-abbr", className),
+    ...rest,
+    children
+  }
+);
+var NumeralTailwind = (props) => renderNumeral(props, {
+  Container: TwContainer,
+  AbbrContainer: TwAbbrContainer
+});
+
+// src/NumeralHybrid.tsx
+import { needsStyledComponents } from "@sproutsocial/seeds-react-system-props";
+var NumeralHybrid = (props) => {
+  if (needsStyledComponents(props)) {
+    return renderNumeral(props, { Container, AbbrContainer });
+  }
+  return NumeralTailwind(props);
 };
-var Numeral_default = Numeral;
+NumeralHybrid.displayName = "Numeral";
+var NumeralHybrid_default = NumeralHybrid;
+
+// src/Numeral.tsx
+var Numeral_default = NumeralHybrid_default;
 
 // src/index.ts
 var index_default = Numeral_default;

package/dist/esm/index.js.map

@@ -1 +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":[]}
+{"version":3,"sources":["../../src/NumeralHybrid.tsx","../../src/getNumeral.tsx","../../src/constants.ts","../../src/styles.ts","../../src/NumeralTailwind.tsx","../../src/Numeral.tsx","../../src/index.ts"],"sourcesContent":["/**\n * Hybrid Numeral Component\n * Automatically chooses between Tailwind and styled-components based on props.\n *\n * Routes to styled-components when the consumer uses styled-system props or a\n * styled(Numeral) extension (which injects a `theme` prop); otherwise renders\n * the lighter Tailwind path. Gated on needsStyledComponents — a superset of\n * Button's hasStyledProps gate — so a styled(Numeral) extension reliably hits\n * the SC path, as the ticket's DoD requires.\n */\n\nimport * as React from \"react\";\nimport { renderNumeral } from \"./getNumeral\";\nimport { Container, AbbrContainer } from \"./styles\"; // Styled-components version\nimport { NumeralTailwind } from \"./NumeralTailwind\"; // Tailwind version\nimport { needsStyledComponents } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeNumeralProps } from \"./NumeralTypes\";\n\nconst NumeralHybrid = (props: TypeNumeralProps): React.ReactNode => {\n  if (needsStyledComponents(props)) {\n    return renderNumeral(props, { Container, AbbrContainer });\n  }\n\n  // Use Tailwind version (preferred - better performance)\n  return NumeralTailwind(props);\n};\n\nNumeralHybrid.displayName = \"Numeral\";\nexport default NumeralHybrid;\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 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\n/**\n * The two container components used to render a numeral. The SC path supplies\n * the styled(Text) wrappers from ./styles; the Tailwind path supplies plain\n * Text wrappers carrying the seeds-numeral CSS classes.\n */\nexport interface TypeNumeralContainers {\n  Container: React.ComponentType<any>;\n  AbbrContainer: React.ComponentType<any>;\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\n/**\n * Path-independent component renderer. Produces the three render branches\n * (invalid, abbreviated-with-Tooltip, standard) using whichever container\n * components are passed in. The SC and Tailwind paths share this logic so the\n * formatting engine is never duplicated.\n */\nexport const renderNumeral = (\n  props: TypeNumeralProps,\n  { Container, AbbrContainer }: TypeNumeralContainers\n): React.ReactNode => {\n  const { value, canAbbreviate, invalidNumberLabel, options, qa, rest } =\n    normalizeArgs(props);\n\n  if (!isValidNumber(props.number)) {\n    return (\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 check is necessary because each locale may have differing thresholds\n    // for which abbreviation begins.\n    if (abbreviatedText !== fullText) {\n      return (\n        <Tooltip content={fullText}>\n          <AbbrContainer {...qa} {...rest}>\n            {abbreviatedText}\n          </AbbrContainer>\n        </Tooltip>\n      );\n    }\n  }\n\n  return (\n    <Container {...qa} {...rest}>\n      {fullText}\n    </Container>\n  );\n};\n\nexport const formatNumeral = (props: TypeNumeralProps): string => {\n  const { value, canAbbreviate, options } = normalizeArgs(props);\n\n  if (!isValidNumber(props.number)) {\n    return EM_DASH;\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    if (abbreviatedText !== fullText) {\n      return abbreviatedText;\n    }\n  }\n\n  return fullText;\n};\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","/**\n * Tailwind CSS implementation of Numeral component\n * Uses Seeds numeral CSS classes from numeral.css\n *\n * NOTE: mirror Button — do NOT `import \"./numeral.css\"`. The CSS ships via a\n * build-step copy (cp src/numeral.css dist/numeral.css) and the global racine\n * aggregation, not via a source-level import.\n */\n\nimport * as React from \"react\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport { renderNumeral } from \"./getNumeral\";\nimport type { TypeNumeralProps } from \"./NumeralTypes\";\n\n// Utility for merging class names properly\nfunction cn(\n  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n  const classes: string[] = [];\n\n  for (const input of inputs) {\n    if (!input) continue;\n\n    if (typeof input === \"string\") {\n      classes.push(input);\n    } else if (typeof input === \"object\") {\n      for (const [key, value] of Object.entries(input)) {\n        if (value) {\n          classes.push(key);\n        }\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n\n// Plain Text wrappers carrying the numeral.css classes. Text forwards\n// className and the remaining props (incl. non-styled typography props like\n// fontSize/fontWeight) to its DOM span, so the classes land on the span.\nconst TwContainer = ({ className, children, ...rest }: any) => (\n  <Text className={cn(\"seeds-numeral\", className)} {...rest}>\n    {children}\n  </Text>\n);\n\nconst TwAbbrContainer = ({ className, children, ...rest }: any) => (\n  <Text\n    className={cn(\"seeds-numeral\", \"seeds-numeral-abbr\", className)}\n    {...rest}\n  >\n    {children}\n  </Text>\n);\n\nexport const NumeralTailwind = (props: TypeNumeralProps): React.ReactNode =>\n  renderNumeral(props, {\n    Container: TwContainer,\n    AbbrContainer: TwAbbrContainer,\n  });\n","import NumeralHybrid from \"./NumeralHybrid\";\n\nexport { formatNumeral } from \"./getNumeral\";\nexport default NumeralHybrid;\n","import Numeral, { formatNumeral } from \"./Numeral\";\n\nexport default Numeral;\nexport { Numeral };\nexport { formatNumeral };\nexport * from \"./NumeralTypes\";\n"],"mappings":"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","names":["Container","AbbrContainer","Text","jsx","Text"]}

package/dist/index.d.mts

@@ -19,7 +19,22 @@ interface TypeNumeralProps extends Omit<TypeTextProps, "children"> {
     qa?: object;
 }
 
+/**
+ * Hybrid Numeral Component
+ * Automatically chooses between Tailwind and styled-components based on props.
+ *
+ * Routes to styled-components when the consumer uses styled-system props or a
+ * styled(Numeral) extension (which injects a `theme` prop); otherwise renders
+ * the lighter Tailwind path. Gated on needsStyledComponents — a superset of
+ * Button's hasStyledProps gate — so a styled(Numeral) extension reliably hits
+ * the SC path, as the ticket's DoD requires.
+ */
+
+declare const NumeralHybrid: {
+    (props: TypeNumeralProps): React.ReactNode;
+    displayName: string;
+};
+
 declare const formatNumeral: (props: TypeNumeralProps) => string;
-declare const Numeral: (props: TypeNumeralProps) => React.ReactNode;
 
-export { type EnumNumeralFormat, Numeral, type TypeNumeralProps, Numeral as default, formatNumeral };
+export { type EnumNumeralFormat, NumeralHybrid as Numeral, type TypeNumeralProps, NumeralHybrid as default, formatNumeral };

package/dist/index.d.ts

@@ -19,7 +19,22 @@ interface TypeNumeralProps extends Omit<TypeTextProps, "children"> {
     qa?: object;
 }
 
+/**
+ * Hybrid Numeral Component
+ * Automatically chooses between Tailwind and styled-components based on props.
+ *
+ * Routes to styled-components when the consumer uses styled-system props or a
+ * styled(Numeral) extension (which injects a `theme` prop); otherwise renders
+ * the lighter Tailwind path. Gated on needsStyledComponents — a superset of
+ * Button's hasStyledProps gate — so a styled(Numeral) extension reliably hits
+ * the SC path, as the ticket's DoD requires.
+ */
+
+declare const NumeralHybrid: {
+    (props: TypeNumeralProps): React.ReactNode;
+    displayName: string;
+};
+
 declare const formatNumeral: (props: TypeNumeralProps) => string;
-declare const Numeral: (props: TypeNumeralProps) => React.ReactNode;
 
-export { type EnumNumeralFormat, Numeral, type TypeNumeralProps, Numeral as default, formatNumeral };
+export { type EnumNumeralFormat, NumeralHybrid as Numeral, type TypeNumeralProps, NumeralHybrid as default, formatNumeral };

package/dist/index.js

@@ -36,7 +36,10 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/Numeral.tsx
+// src/NumeralHybrid.tsx
+var React3 = require("react");
+
+// src/getNumeral.tsx
 var React = require("react");
 var import_lru_memoize = __toESM(require("lru-memoize"));
 
@@ -53,23 +56,9 @@ var DefaultPrecisions = {
 };
 var EM_DASH = "\u2014";
 
-// src/Numeral.tsx
+// src/getNumeral.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;
@@ -148,17 +137,13 @@ var normalizeArgs = (props) => {
     rest
   };
 };
-var getNumeral = ({
-  returnType,
-  props
-}) => {
-  const isReturnTypeString = returnType === "string";
+var renderNumeral = (props, { Container: Container2, AbbrContainer: AbbrContainer2 }) => {
   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: [
+    return /* @__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 })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Container2, { "aria-hidden": true, ...qa, children: EM_DASH })
     ] });
   }
   const formatters = getNumberFormatters(options);
@@ -166,18 +151,86 @@ var getNumeral = ({
   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 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_tooltip.default, { content: fullText, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AbbrContainer2, { ...qa, ...rest, children: abbreviatedText }) });
     }
   }
-  return isReturnTypeString ? fullText : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Container, { ...qa, ...rest, children: fullText });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Container2, { ...qa, ...rest, children: fullText });
 };
 var formatNumeral = (props) => {
-  return getNumeral({ returnType: "string", props });
+  const { value, canAbbreviate, options } = normalizeArgs(props);
+  if (!isValidNumber(props.number)) {
+    return EM_DASH;
+  }
+  const formatters = getNumberFormatters(options);
+  const fullText = formatters.standard.format(value);
+  if (canAbbreviate) {
+    const abbreviatedText = formatters.abbreviated.format(value);
+    if (abbreviatedText !== fullText) {
+      return abbreviatedText;
+    }
+  }
+  return fullText;
 };
-var Numeral = (props) => {
-  return getNumeral({ returnType: "component", props });
+
+// 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/NumeralTailwind.tsx
+var React2 = require("react");
+var import_seeds_react_text2 = __toESM(require("@sproutsocial/seeds-react-text"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+var TwContainer = ({ className, children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_text2.default, { className: cn("seeds-numeral", className), ...rest, children });
+var TwAbbrContainer = ({ className, children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  import_seeds_react_text2.default,
+  {
+    className: cn("seeds-numeral", "seeds-numeral-abbr", className),
+    ...rest,
+    children
+  }
+);
+var NumeralTailwind = (props) => renderNumeral(props, {
+  Container: TwContainer,
+  AbbrContainer: TwAbbrContainer
+});
+
+// src/NumeralHybrid.tsx
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
+var NumeralHybrid = (props) => {
+  if ((0, import_seeds_react_system_props.needsStyledComponents)(props)) {
+    return renderNumeral(props, { Container, AbbrContainer });
+  }
+  return NumeralTailwind(props);
 };
-var Numeral_default = Numeral;
+NumeralHybrid.displayName = "Numeral";
+var NumeralHybrid_default = NumeralHybrid;
+
+// src/Numeral.tsx
+var Numeral_default = NumeralHybrid_default;
 
 // src/index.ts
 var index_default = Numeral_default;

package/dist/index.js.map

@@ -1 +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"]}
+{"version":3,"sources":["../src/index.ts","../src/NumeralHybrid.tsx","../src/getNumeral.tsx","../src/constants.ts","../src/styles.ts","../src/NumeralTailwind.tsx","../src/Numeral.tsx"],"sourcesContent":["import Numeral, { formatNumeral } from \"./Numeral\";\n\nexport default Numeral;\nexport { Numeral };\nexport { formatNumeral };\nexport * from \"./NumeralTypes\";\n","/**\n * Hybrid Numeral Component\n * Automatically chooses between Tailwind and styled-components based on props.\n *\n * Routes to styled-components when the consumer uses styled-system props or a\n * styled(Numeral) extension (which injects a `theme` prop); otherwise renders\n * the lighter Tailwind path. Gated on needsStyledComponents — a superset of\n * Button's hasStyledProps gate — so a styled(Numeral) extension reliably hits\n * the SC path, as the ticket's DoD requires.\n */\n\nimport * as React from \"react\";\nimport { renderNumeral } from \"./getNumeral\";\nimport { Container, AbbrContainer } from \"./styles\"; // Styled-components version\nimport { NumeralTailwind } from \"./NumeralTailwind\"; // Tailwind version\nimport { needsStyledComponents } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeNumeralProps } from \"./NumeralTypes\";\n\nconst NumeralHybrid = (props: TypeNumeralProps): React.ReactNode => {\n  if (needsStyledComponents(props)) {\n    return renderNumeral(props, { Container, AbbrContainer });\n  }\n\n  // Use Tailwind version (preferred - better performance)\n  return NumeralTailwind(props);\n};\n\nNumeralHybrid.displayName = \"Numeral\";\nexport default NumeralHybrid;\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 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\n/**\n * The two container components used to render a numeral. The SC path supplies\n * the styled(Text) wrappers from ./styles; the Tailwind path supplies plain\n * Text wrappers carrying the seeds-numeral CSS classes.\n */\nexport interface TypeNumeralContainers {\n  Container: React.ComponentType<any>;\n  AbbrContainer: React.ComponentType<any>;\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\n/**\n * Path-independent component renderer. Produces the three render branches\n * (invalid, abbreviated-with-Tooltip, standard) using whichever container\n * components are passed in. The SC and Tailwind paths share this logic so the\n * formatting engine is never duplicated.\n */\nexport const renderNumeral = (\n  props: TypeNumeralProps,\n  { Container, AbbrContainer }: TypeNumeralContainers\n): React.ReactNode => {\n  const { value, canAbbreviate, invalidNumberLabel, options, qa, rest } =\n    normalizeArgs(props);\n\n  if (!isValidNumber(props.number)) {\n    return (\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 check is necessary because each locale may have differing thresholds\n    // for which abbreviation begins.\n    if (abbreviatedText !== fullText) {\n      return (\n        <Tooltip content={fullText}>\n          <AbbrContainer {...qa} {...rest}>\n            {abbreviatedText}\n          </AbbrContainer>\n        </Tooltip>\n      );\n    }\n  }\n\n  return (\n    <Container {...qa} {...rest}>\n      {fullText}\n    </Container>\n  );\n};\n\nexport const formatNumeral = (props: TypeNumeralProps): string => {\n  const { value, canAbbreviate, options } = normalizeArgs(props);\n\n  if (!isValidNumber(props.number)) {\n    return EM_DASH;\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    if (abbreviatedText !== fullText) {\n      return abbreviatedText;\n    }\n  }\n\n  return fullText;\n};\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","/**\n * Tailwind CSS implementation of Numeral component\n * Uses Seeds numeral CSS classes from numeral.css\n *\n * NOTE: mirror Button — do NOT `import \"./numeral.css\"`. The CSS ships via a\n * build-step copy (cp src/numeral.css dist/numeral.css) and the global racine\n * aggregation, not via a source-level import.\n */\n\nimport * as React from \"react\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport { renderNumeral } from \"./getNumeral\";\nimport type { TypeNumeralProps } from \"./NumeralTypes\";\n\n// Utility for merging class names properly\nfunction cn(\n  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n  const classes: string[] = [];\n\n  for (const input of inputs) {\n    if (!input) continue;\n\n    if (typeof input === \"string\") {\n      classes.push(input);\n    } else if (typeof input === \"object\") {\n      for (const [key, value] of Object.entries(input)) {\n        if (value) {\n          classes.push(key);\n        }\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n\n// Plain Text wrappers carrying the numeral.css classes. Text forwards\n// className and the remaining props (incl. non-styled typography props like\n// fontSize/fontWeight) to its DOM span, so the classes land on the span.\nconst TwContainer = ({ className, children, ...rest }: any) => (\n  <Text className={cn(\"seeds-numeral\", className)} {...rest}>\n    {children}\n  </Text>\n);\n\nconst TwAbbrContainer = ({ className, children, ...rest }: any) => (\n  <Text\n    className={cn(\"seeds-numeral\", \"seeds-numeral-abbr\", className)}\n    {...rest}\n  >\n    {children}\n  </Text>\n);\n\nexport const NumeralTailwind = (props: TypeNumeralProps): React.ReactNode =>\n  renderNumeral(props, {\n    Container: TwContainer,\n    AbbrContainer: TwAbbrContainer,\n  });\n","import NumeralHybrid from \"./NumeralHybrid\";\n\nexport { formatNumeral } from \"./getNumeral\";\nexport default NumeralHybrid;\n"],"mappings":"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","names":["React","memoize","Container","AbbrContainer","Tooltip","styled","Text","React","import_seeds_react_text","import_jsx_runtime","Text"]}

package/dist/numeral.css

@@ -0,0 +1,21 @@
+/**
+ * Seeds Numeral component classes
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * Usage:
+ *   <span class="seeds-numeral">1,234</span>
+ *   <span class="seeds-numeral seeds-numeral-abbr">1.2K</span>
+ */
+
+@layer components {
+  .seeds-numeral {
+    font-variant-numeric: tabular-nums;
+  }
+
+  .seeds-numeral-abbr {
+    border-bottom: 1px dotted var(--color-container-border-base);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-numeral",
-  "version": "1.0.50",
+  "version": "1.0.52",
   "description": "Seeds React Numeral",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -8,8 +8,8 @@
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "build": "tsup --dts",
-    "build:debug": "tsup --dts --metafile",
+    "build": "tsup --dts && cp src/numeral.css dist/numeral.css",
+    "build:debug": "tsup --dts --metafile && cp src/numeral.css dist/numeral.css",
     "dev": "tsup --watch --dts",
     "clean": "rm -rf .turbo dist",
     "clean:modules": "rm -rf node_modules",
@@ -18,11 +18,11 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-theme": "^4.2.0",
-    "@sproutsocial/seeds-react-system-props": "^3.1.1",
-    "@sproutsocial/seeds-react-tooltip": "^1.1.29",
-    "@sproutsocial/seeds-react-text": "^1.5.0",
-    "@sproutsocial/seeds-react-visually-hidden": "^1.0.24",
+    "@sproutsocial/seeds-react-theme": "^4.2.1",
+    "@sproutsocial/seeds-react-system-props": "^3.1.2",
+    "@sproutsocial/seeds-react-tooltip": "^1.1.31",
+    "@sproutsocial/seeds-react-text": "^1.5.1",
+    "@sproutsocial/seeds-react-visually-hidden": "^1.0.26",
     "lru-memoize": "~1.0.2"
   },
   "devDependencies": {

package/src/Numeral.stories.tsx

@@ -167,3 +167,24 @@ export const AbbreviatedNegative: Story = {
     abbreviate: true,
   },
 };
+
+/**
+ * Demonstrates that Tailwind utility classes override the component's own
+ * `numeral.css` rules. Because those rules now live in `@layer components`,
+ * plain utilities like `mx-200`, `p-300`, and `inline-flex` win the cascade
+ * and visibly take effect on the rendered numeral.
+ *
+ * `color` is cleared (it is set as a default in `meta.args`); any styled-system
+ * prop would route Numeral onto the styled-components path, where the
+ * `seeds-numeral` class is never emitted and the override demo would prove
+ * nothing. Plain utility classes do not match `SC_CLASS_PATTERN` (`sc-` prefix
+ * required), so passing them via `className` keeps the component on the
+ * Tailwind path.
+ */
+export const TailwindOverrides: Story = {
+  args: {
+    number: 1234.5,
+    color: undefined,
+    className: "mx-200 p-300 inline-flex bg-decorative-blue-100",
+  },
+};

package/src/Numeral.tsx

@@ -1,208 +1,4 @@
-import * as React from "react";
-// @ts-expect-error lru-memoize is not typed
-import memoize from "lru-memoize";
-import { EM_DASH } from "./constants";
-import Tooltip from "@sproutsocial/seeds-react-tooltip";
-import type { TypeTextProps } from "@sproutsocial/seeds-react-text";
-import { VisuallyHidden } from "@sproutsocial/seeds-react-visually-hidden";
+import NumeralHybrid from "./NumeralHybrid";
 
-import {
-  DEFAULT_THRESHOLD,
-  MEMO_CACHE_SIZE,
-  COMPARE_OBJECTS,
-  MAX_PRECISION,
-  ABBREV_PRECISION,
-  DefaultPrecisions,
-} from "./constants";
-import { AbbrContainer, Container } from "./styles";
-import type { EnumNumeralFormat, TypeNumeralProps } from "./NumeralTypes";
-
-interface TypeFormatOptions {
-  locale: string;
-  format: EnumNumeralFormat;
-  currency: string;
-  min: number;
-  max: number;
-}
-
-interface TypeFormatters {
-  standard: Intl.NumberFormat;
-  abbreviated: Intl.NumberFormat;
-}
-
-interface TypeArgs {
-  value: number;
-  canAbbreviate: boolean;
-  invalidNumberLabel?: string;
-  ariaLabel?: string;
-  options: TypeFormatOptions;
-  qa: object | null | undefined;
-  rest: Omit<TypeTextProps, "children">;
-}
-
-const _getNumberFormatters = (options: TypeFormatOptions): TypeFormatters => {
-  const { locale, format, currency, min, max } = options;
-  const compactPrecision = min === max ? min : ABBREV_PRECISION;
-
-  const _currency = format === "currency" ? currency : undefined;
-
-  const standard: Intl.NumberFormatOptions = {
-    style: format,
-    minimumFractionDigits: min,
-    maximumFractionDigits: max,
-    currency: _currency,
-  };
-  const compact: Intl.NumberFormatOptions = {
-    style: format,
-    minimumFractionDigits: compactPrecision,
-    maximumFractionDigits: compactPrecision,
-    currency: _currency,
-    notation: "compact",
-  };
-  // Safari 14.1 is currently throwing errors when trying to use the compact
-  // options of NumberFormat
-  // https://community.atlassian.com/t5/Trello-questions/Trello-stuck-at-loading-after-Safari-14-1-update-on-macOS-Mojave/qaq-p/1675577#M45687
-  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,
-  };
-};
-
-// Memoize to reduce the energy of creating new instances of Intl.NumberFormat
-const memoizer = memoize(MEMO_CACHE_SIZE, COMPARE_OBJECTS);
-const getNumberFormatters = memoizer(_getNumberFormatters);
-
-const getThreshold = (abbreviate: boolean | number): number => {
-  if (typeof abbreviate === "number")
-    return Math.max(1000, Math.abs(abbreviate));
-  if (abbreviate) return DEFAULT_THRESHOLD;
-  return Infinity;
-};
-
-const getMinMaxPrecision = (
-  precision: TypeNumeralProps["precision"],
-  format: EnumNumeralFormat
-): [number, number] => {
-  if (typeof precision === "number") return [precision, precision];
-  if (precision === "none") return [0, MAX_PRECISION];
-  return DefaultPrecisions[format];
-};
-
-const isValidNumber = (value: unknown): boolean => {
-  return typeof value === "number" && isFinite(value);
-};
-
-const normalizeArgs = (props: TypeNumeralProps): TypeArgs => {
-  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,
-  };
-};
-
-const getNumeral = ({
-  returnType,
-  props,
-}: {
-  returnType: "string" | "component";
-  props: TypeNumeralProps;
-}): string | React.ReactNode => {
-  const isReturnTypeString = returnType === "string";
-  const { value, canAbbreviate, invalidNumberLabel, options, qa, rest } =
-    normalizeArgs(props);
-
-  if (!isValidNumber(props.number)) {
-    return isReturnTypeString ? (
-      EM_DASH
-    ) : (
-      <>
-        {invalidNumberLabel && (
-          // Give screen readers something useful to read off + hide the em dash
-          <VisuallyHidden>{invalidNumberLabel}</VisuallyHidden>
-        )}
-        <Container aria-hidden {...qa}>
-          {EM_DASH}
-        </Container>
-      </>
-    );
-  }
-
-  const formatters = getNumberFormatters(options);
-  const fullText = formatters.standard.format(value);
-
-  if (canAbbreviate) {
-    const abbreviatedText = formatters.abbreviated.format(value);
-
-    // The following are used to debug the skipped tests which are misbehaving!!!
-    // console.log({ fullText, abbreviatedText });
-    // console.log({ abbreviated: formatters.abbreviated.resolvedOptions() });
-    // The following check is necessary because each locale may have differing thresholds
-    // for which abbreviation begins.
-    if (abbreviatedText !== fullText) {
-      return isReturnTypeString ? (
-        abbreviatedText
-      ) : (
-        <Tooltip content={fullText}>
-          <AbbrContainer {...qa} {...rest}>
-            {abbreviatedText}
-          </AbbrContainer>
-        </Tooltip>
-      );
-    }
-  }
-
-  return isReturnTypeString ? (
-    fullText
-  ) : (
-    <Container {...qa} {...rest}>
-      {fullText}
-    </Container>
-  );
-};
-
-export const formatNumeral = (props: TypeNumeralProps): string => {
-  return getNumeral({ returnType: "string", props }) as string;
-};
-
-const Numeral = (props: TypeNumeralProps) => {
-  return getNumeral({ returnType: "component", props });
-};
-
-export default Numeral;
+export { formatNumeral } from "./getNumeral";
+export default NumeralHybrid;

package/src/NumeralHybrid.tsx

@@ -0,0 +1,29 @@
+/**
+ * Hybrid Numeral Component
+ * Automatically chooses between Tailwind and styled-components based on props.
+ *
+ * Routes to styled-components when the consumer uses styled-system props or a
+ * styled(Numeral) extension (which injects a `theme` prop); otherwise renders
+ * the lighter Tailwind path. Gated on needsStyledComponents — a superset of
+ * Button's hasStyledProps gate — so a styled(Numeral) extension reliably hits
+ * the SC path, as the ticket's DoD requires.
+ */
+
+import * as React from "react";
+import { renderNumeral } from "./getNumeral";
+import { Container, AbbrContainer } from "./styles"; // Styled-components version
+import { NumeralTailwind } from "./NumeralTailwind"; // Tailwind version
+import { needsStyledComponents } from "@sproutsocial/seeds-react-system-props";
+import type { TypeNumeralProps } from "./NumeralTypes";
+
+const NumeralHybrid = (props: TypeNumeralProps): React.ReactNode => {
+  if (needsStyledComponents(props)) {
+    return renderNumeral(props, { Container, AbbrContainer });
+  }
+
+  // Use Tailwind version (preferred - better performance)
+  return NumeralTailwind(props);
+};
+
+NumeralHybrid.displayName = "Numeral";
+export default NumeralHybrid;

package/src/NumeralTailwind.tsx

@@ -0,0 +1,60 @@
+/**
+ * Tailwind CSS implementation of Numeral component
+ * Uses Seeds numeral CSS classes from numeral.css
+ *
+ * NOTE: mirror Button — do NOT `import "./numeral.css"`. The CSS ships via a
+ * build-step copy (cp src/numeral.css dist/numeral.css) and the global racine
+ * aggregation, not via a source-level import.
+ */
+
+import * as React from "react";
+import Text from "@sproutsocial/seeds-react-text";
+import { renderNumeral } from "./getNumeral";
+import type { TypeNumeralProps } from "./NumeralTypes";
+
+// Utility for merging class names properly
+function cn(
+  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]
+): string {
+  const classes: string[] = [];
+
+  for (const input of inputs) {
+    if (!input) continue;
+
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+
+  return classes.join(" ");
+}
+
+// Plain Text wrappers carrying the numeral.css classes. Text forwards
+// className and the remaining props (incl. non-styled typography props like
+// fontSize/fontWeight) to its DOM span, so the classes land on the span.
+const TwContainer = ({ className, children, ...rest }: any) => (
+  <Text className={cn("seeds-numeral", className)} {...rest}>
+    {children}
+  </Text>
+);
+
+const TwAbbrContainer = ({ className, children, ...rest }: any) => (
+  <Text
+    className={cn("seeds-numeral", "seeds-numeral-abbr", className)}
+    {...rest}
+  >
+    {children}
+  </Text>
+);
+
+export const NumeralTailwind = (props: TypeNumeralProps): React.ReactNode =>
+  renderNumeral(props, {
+    Container: TwContainer,
+    AbbrContainer: TwAbbrContainer,
+  });

package/src/__tests__/features/routing.test.tsx

@@ -0,0 +1,48 @@
+/* eslint-env jest, node */
+import React from "react";
+import styled from "styled-components";
+import { render } from "@sproutsocial/seeds-react-testing-library";
+import Numeral, { formatNumeral } from "../../Numeral";
+
+jest.mock("../../constants.ts", () => ({
+  ...jest.requireActual("../../constants.ts"),
+  MEMO_CACHE_SIZE: 0,
+  COMPARE_OBJECTS: false,
+}));
+
+describe("Numeral hybrid routing", () => {
+  it("renders the Tailwind path (seeds-numeral class) for a plain numeral", () => {
+    const { container } = render(<Numeral number={5} />);
+    expect(container.querySelector(".seeds-numeral")).toBeTruthy();
+  });
+
+  it("renders the Tailwind abbreviated branch with a tooltip", () => {
+    const { container } = render(<Numeral number={12345} abbreviate />);
+    expect(container.querySelector(".seeds-numeral-abbr")).toBeTruthy();
+    expect(container.querySelector("[data-qa-tooltip]")).toBeTruthy();
+  });
+
+  it("routes to the styled-components path when a styled-system prop is used", () => {
+    const { container } = render(<Numeral number={5} color="teal.500" />);
+    expect(container.querySelector(".seeds-numeral")).toBeFalsy();
+  });
+
+  it("routes to the styled-components path for a styled(Numeral) extension", () => {
+    const Extended = styled(Numeral)``;
+    const { container } = render(<Extended number={5} />);
+    expect(container.querySelector(".seeds-numeral")).toBeFalsy();
+  });
+
+  it("keeps a plain utility className on the Tailwind path and applies it to the seeds-numeral element", () => {
+    const { container } = render(
+      <Numeral number={5} className="mx-200 p-300 inline-flex" />
+    );
+    const el = container.querySelector(".seeds-numeral");
+    expect(el).toBeTruthy();
+    expect(el).toHaveClass("mx-200", "p-300", "inline-flex");
+  });
+
+  it("keeps formatNumeral working as a named export", () => {
+    expect(formatNumeral({ number: 12345 })).toEqual("12.35K");
+  });
+});

package/src/css.d.ts

@@ -0,0 +1 @@
+declare module "*.css";

package/src/getNumeral.tsx

@@ -0,0 +1,220 @@
+import * as React from "react";
+// @ts-expect-error lru-memoize is not typed
+import memoize from "lru-memoize";
+import { EM_DASH } from "./constants";
+import Tooltip from "@sproutsocial/seeds-react-tooltip";
+import type { TypeTextProps } from "@sproutsocial/seeds-react-text";
+import { VisuallyHidden } from "@sproutsocial/seeds-react-visually-hidden";
+
+import {
+  DEFAULT_THRESHOLD,
+  MEMO_CACHE_SIZE,
+  COMPARE_OBJECTS,
+  MAX_PRECISION,
+  ABBREV_PRECISION,
+  DefaultPrecisions,
+} from "./constants";
+import type { EnumNumeralFormat, TypeNumeralProps } from "./NumeralTypes";
+
+interface TypeFormatOptions {
+  locale: string;
+  format: EnumNumeralFormat;
+  currency: string;
+  min: number;
+  max: number;
+}
+
+interface TypeFormatters {
+  standard: Intl.NumberFormat;
+  abbreviated: Intl.NumberFormat;
+}
+
+interface TypeArgs {
+  value: number;
+  canAbbreviate: boolean;
+  invalidNumberLabel?: string;
+  ariaLabel?: string;
+  options: TypeFormatOptions;
+  qa: object | null | undefined;
+  rest: Omit<TypeTextProps, "children">;
+}
+
+/**
+ * The two container components used to render a numeral. The SC path supplies
+ * the styled(Text) wrappers from ./styles; the Tailwind path supplies plain
+ * Text wrappers carrying the seeds-numeral CSS classes.
+ */
+export interface TypeNumeralContainers {
+  Container: React.ComponentType<any>;
+  AbbrContainer: React.ComponentType<any>;
+}
+
+const _getNumberFormatters = (options: TypeFormatOptions): TypeFormatters => {
+  const { locale, format, currency, min, max } = options;
+  const compactPrecision = min === max ? min : ABBREV_PRECISION;
+
+  const _currency = format === "currency" ? currency : undefined;
+
+  const standard: Intl.NumberFormatOptions = {
+    style: format,
+    minimumFractionDigits: min,
+    maximumFractionDigits: max,
+    currency: _currency,
+  };
+  const compact: Intl.NumberFormatOptions = {
+    style: format,
+    minimumFractionDigits: compactPrecision,
+    maximumFractionDigits: compactPrecision,
+    currency: _currency,
+    notation: "compact",
+  };
+  // Safari 14.1 is currently throwing errors when trying to use the compact
+  // options of NumberFormat
+  // https://community.atlassian.com/t5/Trello-questions/Trello-stuck-at-loading-after-Safari-14-1-update-on-macOS-Mojave/qaq-p/1675577#M45687
+  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,
+  };
+};
+
+// Memoize to reduce the energy of creating new instances of Intl.NumberFormat
+const memoizer = memoize(MEMO_CACHE_SIZE, COMPARE_OBJECTS);
+const getNumberFormatters = memoizer(_getNumberFormatters);
+
+const getThreshold = (abbreviate: boolean | number): number => {
+  if (typeof abbreviate === "number")
+    return Math.max(1000, Math.abs(abbreviate));
+  if (abbreviate) return DEFAULT_THRESHOLD;
+  return Infinity;
+};
+
+const getMinMaxPrecision = (
+  precision: TypeNumeralProps["precision"],
+  format: EnumNumeralFormat
+): [number, number] => {
+  if (typeof precision === "number") return [precision, precision];
+  if (precision === "none") return [0, MAX_PRECISION];
+  return DefaultPrecisions[format];
+};
+
+const isValidNumber = (value: unknown): boolean => {
+  return typeof value === "number" && isFinite(value);
+};
+
+const normalizeArgs = (props: TypeNumeralProps): TypeArgs => {
+  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,
+  };
+};
+
+/**
+ * Path-independent component renderer. Produces the three render branches
+ * (invalid, abbreviated-with-Tooltip, standard) using whichever container
+ * components are passed in. The SC and Tailwind paths share this logic so the
+ * formatting engine is never duplicated.
+ */
+export const renderNumeral = (
+  props: TypeNumeralProps,
+  { Container, AbbrContainer }: TypeNumeralContainers
+): React.ReactNode => {
+  const { value, canAbbreviate, invalidNumberLabel, options, qa, rest } =
+    normalizeArgs(props);
+
+  if (!isValidNumber(props.number)) {
+    return (
+      <>
+        {invalidNumberLabel && (
+          // Give screen readers something useful to read off + hide the em dash
+          <VisuallyHidden>{invalidNumberLabel}</VisuallyHidden>
+        )}
+        <Container aria-hidden {...qa}>
+          {EM_DASH}
+        </Container>
+      </>
+    );
+  }
+
+  const formatters = getNumberFormatters(options);
+  const fullText = formatters.standard.format(value);
+
+  if (canAbbreviate) {
+    const abbreviatedText = formatters.abbreviated.format(value);
+
+    // The following check is necessary because each locale may have differing thresholds
+    // for which abbreviation begins.
+    if (abbreviatedText !== fullText) {
+      return (
+        <Tooltip content={fullText}>
+          <AbbrContainer {...qa} {...rest}>
+            {abbreviatedText}
+          </AbbrContainer>
+        </Tooltip>
+      );
+    }
+  }
+
+  return (
+    <Container {...qa} {...rest}>
+      {fullText}
+    </Container>
+  );
+};
+
+export const formatNumeral = (props: TypeNumeralProps): string => {
+  const { value, canAbbreviate, options } = normalizeArgs(props);
+
+  if (!isValidNumber(props.number)) {
+    return EM_DASH;
+  }
+
+  const formatters = getNumberFormatters(options);
+  const fullText = formatters.standard.format(value);
+
+  if (canAbbreviate) {
+    const abbreviatedText = formatters.abbreviated.format(value);
+    if (abbreviatedText !== fullText) {
+      return abbreviatedText;
+    }
+  }
+
+  return fullText;
+};

package/src/numeral.css

@@ -0,0 +1,21 @@
+/**
+ * Seeds Numeral component classes
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * Usage:
+ *   <span class="seeds-numeral">1,234</span>
+ *   <span class="seeds-numeral seeds-numeral-abbr">1.2K</span>
+ */
+
+@layer components {
+  .seeds-numeral {
+    font-variant-numeric: tabular-nums;
+  }
+
+  .seeds-numeral-abbr {
+    border-bottom: 1px dotted var(--color-container-border-base);
+  }
+}