Cardspark UI

Utilities

Use Cardspark's server-safe helpers for Pokémon condition labels and USD display values.

Server-safe entrypoint

Import helpers directly from @cardspark/ui/utils in Server Components or shared modules. The same formatting helpers remain available from @cardspark/ui/core for compatibility, but that component entrypoint carries a Client Component boundary.

CardValue.tsx

1import {2  formatConditionLabel,3  formatCurrency4} from "@cardspark/ui/utils";5 6export default function CardValue({7  condition,8  value9}: {10  condition: string;11  value: number;12}) {13  return (14    <p>15      {formatConditionLabel(condition, "code-label")} · {formatCurrency(value)}16    </p>17  );18}

Condition labels

formatConditionLabel renders a condition as a compact code, full label, or combined code and label. getConditionAcronym returns the same compact code used by the default mode.

condition-labels.ts

1formatConditionLabel("Near Mint");2// "NM"3 4formatConditionLabel("Near Mint", "label");5// "Near Mint"6 7formatConditionLabel("Near Mint", "code-label");8// "NM - Near Mint"9 10getConditionAcronym("Lightly Played");11// "LP"

Known Pokémon conditions use Cardspark's standard abbreviations. Numeric and grader-prefixed grades are preserved, while unrecognized labels fall back to initials from their first two words.

USD values

formatCurrency, formatDeltaFromReference, and parseCurrencyLabel support Cardspark's current USD-focused package contract.

money.ts

1formatCurrency(214.75);2// "$214.75"3 4formatDeltaFromReference(214.75, 200);5// "+$14.75 (7.4%)"6 7parseCurrencyLabel("Market value: $1,024.50");8// 1024.5

formatCurrency currently uses the en-US locale and USD currency with two decimal places. These helpers do not yet accept locale or currency options.

API reference

Export	Signature	Behavior
`formatConditionLabel`	`(condition: string, mode?: ConditionLabelMode) => string`	Formats a condition as a code, label, or combined value. The mode defaults to "code".
`getConditionAcronym`	`(condition: string) => string`	Returns the compact code used by the default condition-label mode.
`formatCurrency`	`(value: number) => string`	Formats a number as an en-US USD amount with exactly two decimal places.
`formatDeltaFromReference`	`(value: number, referenceValue: number) => string`	Formats the signed USD difference and absolute percentage change from a reference value.
`parseCurrencyLabel`	`(value: string) => number \| undefined`	Returns the first comma-separated signed number found in a display label.
`ConditionLabelMode`	`"code" \| "label" \| "code-label"`	Controls compact, full, or combined condition-label output.