jengacore components · @jengacore/amount

Amount

Every money value: decimal string in, tabular figures, currency as a mono suffix, true minus, never red for a debit.

1,250.50USD−32,410.00USD3,200,000RWF+480.00KES215,000.00USD

Install

terminal

npx shadcn@latest add @jengacore/amount

Without the namespace configured: npx shadcn@latest add https://ui.jengacore.com/r/<new-york-v4|base-nova>/amount.json

Registry dependencies

@jengacore/format @jengacore/theme

Source

components/jc/amount.tsx

import * as React from "react"

import { formatAmount } from "@/lib/jengacore/format"
import { cn } from "@/lib/utils"

/**
 * Every money value in every app. Decimal string in (never a float), tabular figures, minor units per
 * ISO 4217, the currency code as a mono suffix and a true minus sign. A negative amount is not red:
 * a net debit position is not an error. One total per currency.
 */
export function Amount({
  value,
  currency,
  signed,
  size = "md",
  className,
}: {
  value: string
  currency: string
  /** Prefix credits with "+". */
  signed?: boolean
  size?: "sm" | "md" | "lg"
  className?: string
}) {
  return (
    <span
      data-slot="amount"
      className={cn(
        "whitespace-nowrap tabular-nums",
        size === "lg" ? "font-display text-2xl leading-8 font-semibold" : size === "sm" ? "text-[13px]" : "font-medium",
        className
      )}
    >
      {formatAmount(value, currency, { signed })}
      <span className="ml-1 font-mono text-[10.5px] font-medium tracking-[0.04em] text-muted-foreground">{currency}</span>
    </span>
  )
}