{"version":3,"file":"AnimatedProgressBar.DvCTVd_n.mjs","names":["React.useRef","React.useState"],"sources":["https:/framerusercontent.com/modules/DqsPTBetJZupDKtEN9TV/zzAF5IKCeLNT4N9Othhj/AnimatedProgressBar.js"],"sourcesContent":["// User wants a progress bar similar to the provided design (label on left, percentage on right, rounded bar below).\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * LinearProgressBar\n *\n * @framerIntrinsicWidth 320\n * @framerIntrinsicHeight 60\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function LinearProgressBar(props){const{label,value,showValue,backgroundColor,fillColor,borderColor,textColor,labelFont,valueFont,barHeight,borderRadius,animateOnMount,animationDuration,animateWhenVisible,labelSpacing,style}=props;const clampedValue=Math.max(0,Math.min(100,value));const containerRef=React.useRef(null);const[hasBeenVisible,setHasBeenVisible]=React.useState(!animateWhenVisible);React.useEffect(()=>{if(!animateWhenVisible)return;if(typeof window===\"undefined\"||!(\"IntersectionObserver\"in window))return;const node=containerRef.current;if(!node)return;const observer=new IntersectionObserver(entries=>{entries.forEach(entry=>{if(entry.isIntersecting||entry.intersectionRatio>0){React.startTransition(()=>setHasBeenVisible(true));observer.disconnect();}});},{threshold:.2});observer.observe(node);return()=>{observer.disconnect();};},[animateWhenVisible]);const[animatedValue,setAnimatedValue]=React.useState(animateOnMount?0:clampedValue);React.useEffect(()=>{if(!animateOnMount){React.startTransition(()=>setAnimatedValue(clampedValue));return;}if(animateWhenVisible&&!hasBeenVisible){React.startTransition(()=>setAnimatedValue(0));return;}React.startTransition(()=>setAnimatedValue(clampedValue));},[clampedValue,animateOnMount,animateWhenVisible,hasBeenVisible]);const isFixedWidth=style&&style.width===\"100%\";return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{position:\"relative\",width:\"100%\",height:\"100%\",display:\"flex\",flexDirection:\"column\",justifyContent:\"center\",gap:labelSpacing,...style,...isFixedWidth?{}:{minWidth:\"200px\"}},children:[/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",alignItems:\"center\",justifyContent:\"space-between\",color:textColor},children:[/*#__PURE__*/_jsx(\"span\",{style:{margin:0,...labelFont},children:label}),showValue&&/*#__PURE__*/_jsxs(\"span\",{style:{margin:0,...valueFont},children:[clampedValue,\"%\"]})]}),/*#__PURE__*/_jsx(\"div\",{style:{width:\"100%\",height:barHeight,borderRadius,border:`1px solid ${borderColor}`,backgroundColor,overflow:\"hidden\",boxSizing:\"border-box\"},children:/*#__PURE__*/_jsx(\"div\",{style:{height:\"100%\",width:`${animatedValue}%`,backgroundColor:fillColor,borderRight:animatedValue>0&&animatedValue<100?`1px solid ${borderColor}`:\"none\",boxSizing:\"border-box\",transition:animateOnMount?`width ${animationDuration}ms ease-out`:\"none\"}})})]});}LinearProgressBar.displayName=\"Linear Progress Bar\";addPropertyControls(LinearProgressBar,{label:{type:ControlType.String,title:\"Label\",defaultValue:\"UI Design\"},value:{type:ControlType.Number,title:\"Value\",defaultValue:95,min:0,max:100,step:1,unit:\"%\"},showValue:{type:ControlType.Boolean,title:\"Show Value\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"},backgroundColor:{type:ControlType.Color,title:\"Bar BG\",defaultValue:\"#F2F7FF\"},fillColor:{type:ControlType.Color,title:\"Fill\",defaultValue:\"#D7E9FF\"},borderColor:{type:ControlType.Color,title:\"Border\",defaultValue:\"#000000\"},textColor:{type:ControlType.Color,title:\"Text\",defaultValue:\"#000000\"},labelFont:{type:ControlType.Font,title:\"Label Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"16px\",variant:\"Regular\",letterSpacing:\"-0.01em\",lineHeight:\"1.2em\"}},valueFont:{type:ControlType.Font,title:\"Value Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:\"16px\",variant:\"Regular\",letterSpacing:\"-0.01em\",lineHeight:\"1.2em\"}},barHeight:{type:ControlType.Number,title:\"Bar Height\",defaultValue:10,min:4,max:40,step:1,unit:\"px\"},borderRadius:{type:ControlType.Number,title:\"Radius\",defaultValue:999,min:0,max:999,step:1,unit:\"px\"},animateOnMount:{type:ControlType.Boolean,title:\"Animate\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"},animationDuration:{type:ControlType.Number,title:\"Duration\",defaultValue:600,min:100,max:5e3,step:50,unit:\"ms\"},animateWhenVisible:{type:ControlType.Boolean,title:\"On Scroll\",defaultValue:true,enabledTitle:\"In View\",disabledTitle:\"Always\"},labelSpacing:{type:ControlType.Number,title:\"Gap\",defaultValue:8,min:0,max:40,step:1,unit:\"px\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"LinearProgressBar\",\"slots\":[],\"annotations\":{\"framerIntrinsicHeight\":\"60\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\",\"framerIntrinsicWidth\":\"320\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./AnimatedProgressBar.map"],"mappings":"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"}