calculated value
two flavors of computed-value display:
CalculatedValueCard — small, inline, label + value + meta. for ambient computed values that live alongside other content (a copay estimate, a next-refill date) without commanding attention.
CalculatedResultCard — dramatic, tall, tone-coded big number with a slot-machine reveal. the intake-form BMI pattern. for results where the calculation is the message — BMI, eligibility score, treatment fit. tone color (green / gold / red) lives on the number itself; chrome stays neutral so multiple results can sit together without competing.
import from @klera/ui/components/forms/CalculatedValueCard, CalculatedResultCard
variants
Within ideal range
Healthy BMI range: 18.5–24.9 kg/m²edit any field to watch the slot-machine reveal fire. tone updates with the value: <17.5 alert · 17.5-18.5 caution · 18.5-25 healthy · 25-30 caution · ≥30 alert.
Enter height and weight to calculate.
Healthy BMI range: 18.5–24.9 kg/m²shown when no value yet. the white pill bar telegraphs 'result will appear here'.
Estimated monthly cost based on your plan.
pass animateOnChange={false} for non-clinical values that don't need the reveal drama (copay estimates, etc.)
the lightweight variant. label-on-top / value / meta. use when the computed value is supporting content, not the headline.