{"version":3,"file":"ProcessTimeline.qoaouTMk.mjs","names":["useRef","useState","__esmMin","init_npm_react_18_3_1","_e","p","c","init_jsx_runtime","ce","de","motion","init_framer_motion_DhsWWWsN","init_framer_D6uXRwWs","addPropertyControls","ControlType","ProcessTimeline","props","ref","w","setW","ro","cw","v","vertical","layout","breakpoint","count","steps","stepDelay","i","replay","font","isLast","d","DOT","dotBorder","accent","DOT_TIME","LINE_TIME","lineColor","numberColor","monoFont","titleColor","step","textColor","init_ProcessTimeline"],"sources":["https:/framerusercontent.com/modules/zvKuGkdNQFVdGfrgFnu0/XqmoC18X724kQZ57MZnJ/ProcessTimeline.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useRef,useState}from\"react\";import{motion}from\"framer-motion\";import{addPropertyControls,ControlType}from\"framer\";// Process timeline for \"04 · Building it\".\n// Draws dot → line → dot … and fills the last dot with the accent colour.\n/**\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight auto\n */const DOT=13;const DOT_TIME=.25// dot pop\n;const LINE_TIME=.45// line growing to the next dot\n;export default function ProcessTimeline(props){const{steps,layout,breakpoint,accent,lineColor,dotBorder,titleColor,textColor,numberColor,font,monoFont,replay}=props;const ref=useRef(null);const[w,setW]=useState(1e3);useEffect(()=>{if(!ref.current)return;const ro=new ResizeObserver(()=>{const cw=ref.current?ref.current.clientWidth:1e3;setW(v=>Math.abs(v-cw)>2?cw:v);});ro.observe(ref.current);return()=>ro.disconnect();},[]);const vertical=layout===\"vertical\"||layout===\"auto\"&&w<breakpoint;const count=steps.length;const stepDelay=i=>i*(DOT_TIME+LINE_TIME);return /*#__PURE__*/_jsx(\"div\",{ref:ref,style:{width:\"100%\"},children:/*#__PURE__*/_jsx(motion.div,{initial:\"hidden\",whileInView:\"show\",viewport:{once:!replay,amount:.2},style:{width:\"100%\",display:\"flex\",flexDirection:vertical?\"column\":\"row\",fontFamily:font,gap:vertical?0:20},children:steps.map((step,i)=>{const isLast=i===count-1;const d=stepDelay(i);return /*#__PURE__*/_jsxs(\"div\",{style:{flex:vertical?\"none\":\"1 1 0\",minWidth:0,display:\"flex\",flexDirection:vertical?\"row\":\"column\",gap:vertical?16:0},children:[/*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\",display:\"flex\",flexDirection:vertical?\"column\":\"row\",alignItems:\"center\",height:vertical?\"auto\":DOT,width:vertical?DOT:\"auto\",marginBottom:vertical?0:22,alignSelf:vertical?\"stretch\":\"auto\",flex:\"none\"},children:[/*#__PURE__*/_jsx(motion.span,{variants:{hidden:{scale:0,opacity:0},show:{scale:1,opacity:1,transition:{delay:d,type:\"spring\",stiffness:420,damping:20}}},style:{flex:\"none\",width:DOT,height:DOT,borderRadius:99,boxSizing:\"border-box\",border:`1px solid ${dotBorder}`,background:\"#0B0B0B\",position:\"relative\",overflow:\"hidden\"},children:isLast&&/*#__PURE__*/_jsx(motion.span,{variants:{hidden:{scale:0},show:{scale:1,transition:{delay:d+.3,duration:.4,ease:\"easeOut\"}}},style:{position:\"absolute\",inset:-1,borderRadius:99,background:accent}})}),!isLast&&/*#__PURE__*/_jsx(motion.span,{variants:{hidden:vertical?{scaleY:0}:{scaleX:0},show:{...vertical?{scaleY:1}:{scaleX:1},transition:{delay:d+DOT_TIME,duration:LINE_TIME,ease:\"easeInOut\"}}},style:{flex:1,background:lineColor,transformOrigin:vertical?\"top\":\"left\",...vertical?{width:1,minHeight:24}:{height:1,marginRight:-20}}})]}),/*#__PURE__*/_jsxs(motion.div,{variants:{hidden:{opacity:0,y:8},show:{opacity:1,y:0,transition:{delay:d+.05,duration:.4}}},style:{flex:vertical?1:\"none\",minWidth:0,paddingBottom:vertical&&!isLast?28:0,marginTop:vertical?-3:0},children:[/*#__PURE__*/_jsx(motion.p,{variants:isLast?{hidden:{color:numberColor},show:{color:accent,transition:{delay:d+.3,duration:.4}}}:undefined,style:{margin:\"0 0 8px\",fontFamily:monoFont,fontSize:12,color:numberColor},children:String(i+1).padStart(2,\"0\")}),/*#__PURE__*/_jsx(\"p\",{style:{margin:\"0 0 6px\",fontSize:17,fontWeight:600,color:titleColor},children:step.title}),/*#__PURE__*/_jsx(\"p\",{style:{margin:0,fontSize:14,lineHeight:1.5,color:textColor},children:step.text})]})]},i);})},vertical?\"v\":\"h\")});}ProcessTimeline.defaultProps={steps:[{title:\"Content map\",text:\"Every API, use case and resource in one inventory.\"},{title:\"Prototype\",text:\"A simple, clickable structure shared with dev from day one.\"},{title:\"Wireframes\",text:\"The key pages tested end to end before any visual design.\"},{title:\"Final UI\",text:\"Final screens built with Telef\\xf3nica’s library.\"},{title:\"Launch\",text:\"Live at Mobile World Congress 2024, on a fixed date.\"}],layout:\"auto\",breakpoint:640,accent:\"#3B82F6\",lineColor:\"#2E2E2E\",dotBorder:\"#6B6B6B\",titleColor:\"#FFFFFF\",textColor:\"#8A8A8A\",numberColor:\"#8A8A8A\",font:\"Switzer, Inter, sans-serif\",monoFont:\"Geist Mono, ui-monospace, monospace\",replay:false};addPropertyControls(ProcessTimeline,{steps:{type:ControlType.Array,title:\"Steps\",control:{type:ControlType.Object,controls:{title:{type:ControlType.String,title:\"Title\"},text:{type:ControlType.String,title:\"Text\",displayTextArea:true}}}},layout:{type:ControlType.Enum,title:\"Layout\",options:[\"auto\",\"horizontal\",\"vertical\"],optionTitles:[\"Auto\",\"Horizontal\",\"Vertical\"],displaySegmentedControl:true},breakpoint:{type:ControlType.Number,title:\"Vertical below\",min:300,max:1200,step:10,unit:\"px\",defaultValue:640,hidden:p=>p.layout!==\"auto\"},accent:{type:ControlType.Color,title:\"Accent\"},lineColor:{type:ControlType.Color,title:\"Line\"},dotBorder:{type:ControlType.Color,title:\"Dot border\"},titleColor:{type:ControlType.Color,title:\"Title\"},textColor:{type:ControlType.Color,title:\"Text\"},numberColor:{type:ControlType.Color,title:\"Number\"},font:{type:ControlType.String,title:\"Font\"},monoFont:{type:ControlType.String,title:\"Mono font\"},replay:{type:ControlType.Boolean,title:\"Replay\",defaultValue:false}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ProcessTimeline\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ProcessTimeline.map"],"mappings":"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"}