Renders pricing data consistently across comparison tables, vendor cards, and dropdowns, supporting both structured `StructuredPricingItem` arrays and legacy string formats. ## Key Components ### Exports - **`PricingDisplay`** — Primary component that renders pricing with configurable styling. Accepts structured pricing data (single item, array, or legacy string) and a `styleConfig`. - **`PRICING_STYLES`** — Predefined style config constants for three layout contexts: - `comparison` — Default; no tilde prefix, primary text color - `compact` — Vendor dropdowns; shows tilde prefix (`~$`), secondary text color - `card` — Vendor cards; shows tilde prefix, mixed primary/secondary colors - **`formatPricingForDisplay`** — Pass-through utility for pre-processing pricing strings (currently identity function). ### Internal - **`LegacyPricingDisplay`** — Handles backward-compatible string input, parsing comma-separated, pipe-separated, multi-cycle (`/$`), and single-price formats. - **`formatPriceValue`** — Normalizes `number | 'Free' | 'Contact'` to a display string, optionally prefixed with `~`. ### Interfaces | Interface | Purpose | |---|---| | `PricingStyleConfig` | Font size, color, tilde prefix, and font-family tokens | | `PricingDisplayProps` | Component props; `pricing` accepts array, single item, or string | ## Usage Example ```typescript import { PricingDisplay, PRICING_STYLES } from './pricing-display' // Structured pricing (preferred) // Legacy string input (backward compatible) // Compact dropdown style with tilde prefix → renders "~$29/device/month" ``` **Source:** [`pricing-display.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/pricing-display.tsx)