{"version":3,"file":"LabeledProgressBar.DpbDRecH.mjs","names":["useRef","useMemo","p"],"sources":["https:/framerusercontent.com/modules/1vkDrTIoK2N10pnB9J2p/JAxNr3jIeogA8EIbrMb4/LabeledProgressBar.js"],"sourcesContent":["// Instructions: Create a Framer component that follows the Framer component rules and achieves the user's goal.\n// A label with a progress bar below, percentage text at the end, and optional percentage text inside the filled bar. Fill amount is based on percentage.\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useMemo,useRef}from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{motion,useInView}from\"framer-motion\";/**\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function LabeledProgressBar(props){const{label,percent,headerVariant,rightTitle,customValue,counterText,labelColor,rightTitleColor,percentColor,trackColor,fillColor,labelFont,rightTitleFont,percentFont,barHeight,barRadius,gap,barPercentGap,animate,transition,prefix,suffix,style}=props;const isStatic=useIsStaticRenderer();const wrapRef=useRef(null);const inView=useInView(wrapRef,{margin:\"100px 0px 100px 0px\",amount:.2,once:true});const clamped=useMemo(()=>{if(headerVariant===\"dual\")return 100;const n=Number.isFinite(percent)?percent:0;return Math.max(0,Math.min(100,n));},[percent,headerVariant]);const displayValue=useMemo(()=>{if(headerVariant===\"custom\"){return`${prefix}${customValue}${suffix}`;}return`${prefix}${Math.round(clamped)}${suffix}`;},[headerVariant,customValue,prefix,suffix,clamped]);const Fill=isStatic?\"div\":motion.div;const shouldAnimate=!isStatic&&animate&&inView;const containerStyle={position:\"relative\",width:\"100%\",height:\"100%\",display:\"flex\",flexDirection:\"column\",gap,...style};const topRowStyle={position:\"relative\",width:\"100%\",display:\"flex\",alignItems:\"baseline\",justifyContent:headerVariant===\"dual\"||headerVariant===\"inline\"?\"space-between\":\"flex-start\",gap:12,minWidth:0};const labelStyle={position:\"relative\",color:labelColor,margin:0,minWidth:0,overflow:\"hidden\",textOverflow:\"ellipsis\",whiteSpace:\"nowrap\",...labelFont};const rightTitleStyle={position:\"relative\",color:rightTitleColor,margin:0,minWidth:\"max-content\",...rightTitleFont};const percentStyle={position:\"relative\",color:percentColor,margin:0,minWidth:\"max-content\",...percentFont};const barRowStyle={position:\"relative\",width:\"100%\",display:\"flex\",alignItems:\"center\",gap:barPercentGap,minWidth:0};const trackStyle={position:\"relative\",width:\"100%\",height:barHeight,borderRadius:barRadius,background:trackColor,overflow:\"hidden\",flex:1,minWidth:0};const fillBaseStyle={position:\"absolute\",left:0,top:0,bottom:0,borderRadius:barRadius,background:fillColor,width:shouldAnimate?\"0%\":`${clamped}%`,willChange:shouldAnimate?\"width\":undefined};return /*#__PURE__*/_jsxs(\"section\",{ref:wrapRef,style:containerStyle,\"aria-label\":\"Progress\",children:[/*#__PURE__*/_jsxs(\"div\",{style:topRowStyle,children:[/*#__PURE__*/_jsx(\"p\",{style:labelStyle,children:label}),headerVariant===\"dual\"&&/*#__PURE__*/_jsx(\"p\",{style:rightTitleStyle,children:rightTitle}),headerVariant===\"inline\"&&/*#__PURE__*/_jsx(\"p\",{style:percentStyle,children:counterText})]}),/*#__PURE__*/_jsxs(\"div\",{style:barRowStyle,children:[/*#__PURE__*/_jsx(\"div\",{style:trackStyle,role:\"progressbar\",\"aria-valuenow\":Math.round(clamped),\"aria-valuemin\":0,\"aria-valuemax\":100,\"aria-label\":label,children:/*#__PURE__*/_jsx(Fill,{style:fillBaseStyle,initial:shouldAnimate?{width:\"0%\"}:false,animate:shouldAnimate?{width:`${clamped}%`}:undefined,transition:shouldAnimate?transition:undefined},shouldAnimate?`fill-${clamped}`:\"fill-static\")}),headerVariant!==\"dual\"&&headerVariant!==\"inline\"&&/*#__PURE__*/_jsx(\"p\",{style:percentStyle,children:displayValue})]})]});}addPropertyControls(LabeledProgressBar,{label:{type:ControlType.String,title:\"Label\",defaultValue:\"Venture Capital\"},rightTitle:{type:ControlType.String,title:\"Right Title\",defaultValue:\"Current\",hidden:p=>p.headerVariant!==\"dual\"},counterText:{type:ControlType.String,title:\"Counter Text\",defaultValue:\"1250\",hidden:p=>p.headerVariant!==\"inline\"},headerVariant:{type:ControlType.Enum,title:\"Header\",options:[\"single\",\"dual\",\"custom\",\"inline\"],optionTitles:[\"Single Title\",\"Two Titles\",\"Custom Value\",\"Inline Counter\"],defaultValue:\"single\"},percent:{type:ControlType.Number,title:\"Percent\",defaultValue:62,min:0,max:100,step:1,unit:\"%\",hidden:p=>p.headerVariant===\"dual\"},customValue:{type:ControlType.Number,title:\"Custom Value\",defaultValue:1250,step:1,displayStepper:true,hidden:p=>p.headerVariant!==\"custom\"},labelColor:{type:ControlType.Color,title:\"Label Color\",defaultValue:\"#CCCCCC\"},rightTitleColor:{type:ControlType.Color,title:\"Right Title Color\",defaultValue:\"#CCCCCC\",hidden:p=>p.headerVariant!==\"dual\"},percentColor:{type:ControlType.Color,title:\"Percent Color\",defaultValue:\"#E6D27A\"},trackColor:{type:ControlType.Color,title:\"Track\",defaultValue:\"#2A2A2A\"},fillColor:{type:ControlType.Color,title:\"Fill\",defaultValue:\"#E6D27A\"},labelFont:{type:ControlType.Font,title:\"Label Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"14px\",variant:\"Medium\",letterSpacing:\"-0.01em\",lineHeight:\"1.2em\"}},rightTitleFont:{type:ControlType.Font,title:\"Right Title Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"14px\",variant:\"Medium\",letterSpacing:\"-0.01em\",lineHeight:\"1.2em\"},hidden:p=>p.headerVariant!==\"dual\"},percentFont:{type:ControlType.Font,title:\"Percent Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"14px\",variant:\"Semibold\",letterSpacing:\"-0.01em\",lineHeight:\"1.2em\"},hidden:p=>p.headerVariant===\"dual\"},barHeight:{type:ControlType.Number,title:\"Bar Height\",defaultValue:4,min:2,max:24,step:1,unit:\"px\"},barRadius:{type:ControlType.Number,title:\"Radius\",defaultValue:999,min:0,max:999,step:1,unit:\"px\"},gap:{type:ControlType.Number,title:\"Gap\",defaultValue:10,min:0,max:40,step:1,unit:\"px\"},barPercentGap:{type:ControlType.Number,title:\"Bar/Text Gap\",defaultValue:12,min:0,max:40,step:1,unit:\"px\"},prefix:{type:ControlType.String,title:\"Prefix\",defaultValue:\"\",placeholder:\"e.g., $\",hidden:p=>p.headerVariant===\"dual\"||p.headerVariant===\"inline\"},suffix:{type:ControlType.String,title:\"Suffix\",defaultValue:\"%\",placeholder:\"e.g., %\",hidden:p=>p.headerVariant===\"dual\"||p.headerVariant===\"inline\"},animate:{type:ControlType.Boolean,title:\"Animate\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"},transition:{type:ControlType.Transition,title:\"Transition\",hidden:p=>!p.animate}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"LabeledProgressBar\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./LabeledProgressBar.map"],"mappings":"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"}