4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T2add,"use client"; import { useEffect, useId, useMemo, useRef, useState } from "react"; import { CircleHelp, Check } from "lucide-react"; import { cn } from "@/lib/utils"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip"; export type BMIThreshold = { maxBmi: number; isTargetRange?: boolean; title: string; description: string; color: string | [string, string]; statusMessage?: { text: string; className: string; }; }; export const DEFAULT_BMI_THRESHOLDS: BMIThreshold[] = [ { maxBmi: 0, title: "BMI", description: "Enter height and weight to calculate it.", color: "#e5e7eb", }, { maxBmi: 25, isTargetRange: true, title: "Balanced", description: "You're in a healthy range.", color: ["#91f63e", "#19a349"], statusMessage: { text: "This treatment may not be for you.", className: "bg-[#FFEDD8] text-[#DB913C]", }, }, { maxBmi: 27.1, title: "At Risk", description: "You're approaching an unhealthy range.", color: ["#f6ac3e", "#e2e21b"], statusMessage: { text: "You may be eligible for treatment & promotional offers.", className: "bg-[#E1FFE2] text-[#279329]", }, }, { maxBmi: Infinity, title: "High Risk", description: "Excess weight may be affecting your health.", color: ["#f63e3e", "#ff712a"], statusMessage: { text: "You may be eligible for treatment & promotional offers.", className: "bg-[#E1FFE2] text-[#279329]", }, }, ]; export interface BMICardProps { bmi: number; minValue?: number; maxValue?: number; shape?: "circle" | "semicircle" | "arc"; strokeWidth?: number; showThresholdMarkers?: boolean; valuePosition?: "inside" | "outside"; fillMode?: "full" | "progress"; animated?: boolean; animationDuration?: number; showStatusMessage?: boolean; tooltipContent?: React.ReactNode; thresholds?: BMIThreshold[]; size?: number; label?: string; className?: string; showTargetMessage?: boolean; } const SHAPE_CONFIG = { circle: { degrees: 360, rotation: -90 }, semicircle: { degrees: 180, rotation: 180 }, arc: { degrees: 270, rotation: 135 }, } as const; const BG_COLOR = "#e5e7eb"; function getThreshold(bmi: number, thresholds: BMIThreshold[]) { if (bmi <= 0) return thresholds[0]; return thresholds.find((t) => bmi < t.maxBmi) ?? thresholds.at(-1)!; } function useAnimatedValue(target: number, duration: number, enabled: boolean) { const [value, setValue] = useState(enabled ? 0 : target); const frameRef = useRef(undefined); useEffect(() => { if (!enabled) { setValue(target); return; } const start = value; let startTime: number; const animate = (time: number) => { startTime ??= time; const t = Math.min(1, (time - startTime) / duration); const eased = 1 - Math.pow(1 - t, 3); setValue(start + (target - start) * eased); if (t < 1) frameRef.current = requestAnimationFrame(animate); }; frameRef.current = requestAnimationFrame(animate); return () => { if (frameRef.current) cancelAnimationFrame(frameRef.current); }; }, [target, duration, enabled]); return value; } export function BMICard({ bmi, minValue = 5, maxValue = 30, shape = "circle", strokeWidth = 10, showThresholdMarkers = true, valuePosition = "inside", fillMode = "progress", animated = true, animationDuration = 800, showStatusMessage = true, tooltipContent = "Eligibility is typically BMI 30+, or 27+ with a related condition such as type 2 diabetes, high blood pressure, or high cholesterol. In some cases, people with BMI above 25 may qualify based on medical history.", thresholds = DEFAULT_BMI_THRESHOLDS, size = 132, label = "Your BMI", className, showTargetMessage = true, }: BMICardProps) { const displayBmi = Math.max(0, bmi); const threshold = useMemo( () => getThreshold(bmi, thresholds), [bmi, thresholds], ); const isSmall = size <= 100; const range = maxValue - minValue; const targetProgress = fillMode === "full" ? 1 : Math.min(1, Math.max(0, (displayBmi - minValue) / range)); const progress = useAnimatedValue(targetProgress, animationDuration, animated); const radius = (size - strokeWidth) / 2; const circumference = 2 * Math.PI * radius; const center = size / 2; const { degrees, rotation } = SHAPE_CONFIG[shape]; const viewBoxHeight = shape === "semicircle" ? size / 2 + strokeWidth : size; const gradientId = useId(); const isGradient = Array.isArray(threshold.color); const strokeColor = isGradient ? `url(#${gradientId})` : (threshold.color as string); const thresholdMarkers = showThresholdMarkers ? thresholds .filter((t) => t.maxBmi !== Infinity && t.maxBmi > 0) .map((t) => { const ratio = (t.maxBmi - minValue) / range; const angle = ((rotation + degrees * ratio) * Math.PI) / 180; const tickLength = strokeWidth + 4; const innerR = radius - tickLength / 2; const outerR = radius + tickLength / 2; return { x1: center + innerR * Math.cos(angle), y1: center + innerR * Math.sin(angle), x2: center + outerR * Math.cos(angle), y2: center + outerR * Math.sin(angle), bmi: t.maxBmi, }; }) : []; const arcLength = circumference * (degrees / 360); const filledLength = arcLength * progress; const bgDasharray = `${arcLength} ${circumference}`; const dasharray = `${filledLength} ${circumference}`; const isInTargetRange = Boolean(threshold.isTargetRange) && bmi > 0; return (

{valuePosition === "inside" && (

{displayBmi} {!isSmall && ( {label} )}

)}

{threshold.title}

{tooltipContent && ( {tooltipContent} )}

{threshold.description}

{valuePosition === "outside" && (

{label} {displayBmi}

)} {showTargetMessage && bmi > 0 && isInTargetRange && (

Target reached!

)}

{showStatusMessage && bmi > 0 && threshold.statusMessage && (

{threshold.statusMessage.text}

)}

); } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4f",null,{"namespace":"@turbopills-ui","registryDependencies":["tooltip"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"registry/turbopills/blocks/bmi-card/bmi-card.tsx","content":"$51","type":"registry:block","target":"components/turbopills/blocks/bmi-card.tsx"}],"className":"h-[70svh] min-h-80"}]]}]