feat: improve Amount formatting capabilities

[ravisuhag]

Summary

Implements the remaining items from #595, plus a tabularNums prop.

New props

• notation ('standard' | 'compact', default 'standard') — compact formatting like $1.2M / $13K for dashboards and summary views. Note: compact rounds aggressively by design (Intl behavior), so small values like $12.99 render as $13.
• currencyDisplay: 'narrowSymbol' — always shows the narrow symbol ($ instead of US$ in non-US locales).
• signDisplay ('auto' | 'always' | 'exceptZero' | 'never', default 'auto') — controls the +/- sign, useful for gains/losses.
• tabularNums (default true) — fixed-width figures so digits align across table rows. Previously this was always on via CSS; it is now a prop so running text can opt out for proportional figures. Default behavior is unchanged.

Performance

• Intl.NumberFormat instances are now memoized in a module-level cache (keyed by locale + options, capped at 64 entries). Previously every render created 3 formatter instances, which adds up fast when Amount renders in table rows.
• isValidCurrency() and getCurrencyDecimals() are merged into a single cached getCurrencyInfo() lookup. Decimals now come from resolvedOptions().maximumFractionDigits instead of regex-matching formatted output.

Not included

• Issue item 6 (string slicing edge case) is already fixed on main — the padStart conversion handles short strings correctly ("5" → $0.05).

Docs

• Playground controls for the new props, plus notation, signDisplay, and tabularNums example sections.

Test plan

• 15 new test cases covering all four props and their interactions (compact + hideDecimals / string values / hideCurrency / explicit fraction digits; sign preserved when hideCurrency strips the currency token; tabular class toggling).
• Full Amount suite: 64/64 passing. Lint and typecheck clean for the touched files.

Closes #595

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
apsara	Ready	Preview	Jul 31, 2026 12:41pm

[coderabbitai]

Warning

Review limit reached

@ravisuhag, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 21 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: cee35082-3235-45e0-a3bc-313412648693

📥 Commits

Reviewing files that changed from the base of the PR and between 9a2aadf and bd16358.

📒 Files selected for processing (1)

• packages/raystack/components/amount/amount.tsx

📝 Walkthrough

Walkthrough

The Amount component now supports compact notation, configurable sign display, narrow currency symbols, and tabular numerals. It combines currency validation and decimal detection through cached formatter metadata. Formatter instances are cached for reuse. Tests and documentation cover the new options and formatting combinations.

Sequence Diagram(s)

sequenceDiagram
  participant Amount
  participant getCurrencyInfo
  participant getFormatter
  participant IntlNumberFormat
  Amount->>getCurrencyInfo: Validate currency and read decimal count
  getCurrencyInfo->>getFormatter: Request cached currency formatter
  getFormatter->>IntlNumberFormat: Create or reuse formatter
  Amount->>getFormatter: Format with notation and signDisplay
  getFormatter->>IntlNumberFormat: Create or reuse formatter
  Amount->>Amount: Render value with optional tabular styling

Loading

Suggested reviewers: rohanchkrabrty, shreyag02

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the primary change: expanded Amount formatting capabilities.
Description check	✅ Passed	The description directly explains the new Amount props, performance changes, tests, and documentation updates.
Linked Issues check	✅ Passed	The changes implement the linked issue requirements for notation, narrow symbols, sign display, formatter caching, and related Amount behavior.
Out of Scope Changes check	✅ Passed	The playground, documentation, tests, styling, and tabularNums additions are directly related to the stated Amount formatting objectives.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/raystack/components/amount/amount.tsx`:
- Around line 142-163: Bound currencyInfoCache before inserting entries in
getCurrencyInfo, using the same 64-entry limit as formatterCache; alternatively,
skip caching when the currency code is invalid. Preserve cached lookups for
valid currencies while ensuring unlimited distinct invalid inputs cannot cause
persistent module-level growth.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: d73b795e-3e56-4627-9a51-35c6ad4032e4

📥 Commits

Reviewing files that changed from the base of the PR and between 5e38ff6 and 9a2aadf.

📒 Files selected for processing (6)

• apps/www/src/components/playground/amount-examples.tsx
• apps/www/src/content/docs/components/amount/demo.ts
• apps/www/src/content/docs/components/amount/index.mdx
• packages/raystack/components/amount/__tests__/amount.test.tsx
• packages/raystack/components/amount/amount.module.css
• packages/raystack/components/amount/amount.tsx