{"version":3,"file":"AutoInputTyping.BWKfpO1L.mjs","names":["React.useRef","React.useState","React.useMemo","p"],"sources":["https:/framerusercontent.com/modules/6RbpeVuM2mAXqb1BWeAY/wZxH4TzFPqFH5jwXun88/AutoInputTyping.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * @framerDisableUnlink\n * @framerIntrinsicWidth 560\n * @framerIntrinsicHeight 64\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight fixed\n */export default function AutoInputTyping(props){const{style,phrases:phrasesProp,typingSpeed,deleteSpeed,startDelay,endPause,loop,pillText,showPill,acceptSpeed,caretBlink,placeholderColor,caretColor,textColor,bgColor,borderColor,focusBorderColor,radius,paddingX,fontSize,fontFamily}=props;const phrases=(Array.isArray(phrasesProp)&&phrasesProp.length>0?phrasesProp:DEFAULT_PHRASES).filter(Boolean);const inputRef=React.useRef(null);// Input value & focus\nconst[value,setValue]=React.useState(\"\");const[focused,setFocused]=React.useState(false);const[phase,setPhase]=React.useState(\"idle\");const[pIndex,setPIndex]=React.useState(0)// which phrase\n;const[cIndex,setCIndex]=React.useState(0)// which char typed in placeholder\n;const active=phrases[pIndex]||\"\";const placeholder=active.slice(0,cIndex);// Kickoff after startDelay\nReact.useEffect(()=>{const id=setTimeout(()=>setPhase(\"typing\"),Math.max(0,startDelay));return()=>clearTimeout(id);},[startDelay,phrases.length]);// Core loop: typing -> pause -> deleting -> next typing\nReact.useEffect(()=>{if(phase===\"frozen\"||phase===\"accepting\"||phase===\"idle\")return;// TYPING\nif(phase===\"typing\"){if(cIndex>=active.length){setPhase(\"pause\");return;}const id=setTimeout(()=>setCIndex(i=>i+1),Math.max(15,typingSpeed));return()=>clearTimeout(id);}// PAUSE (show pill even if not focused)\nif(phase===\"pause\"){const id=setTimeout(()=>{if(focused){setPhase(\"frozen\")// freeze when focus happens anytime\n;}else{setPhase(\"deleting\");}},Math.max(200,endPause));return()=>clearTimeout(id);}// DELETING (faster)\nif(phase===\"deleting\"){if(cIndex<=0){// advance phrase\nconst next=pIndex+1;if(next<phrases.length){setPIndex(next);}else if(loop){setPIndex(0);}else{// stop at last\nsetPhase(\"idle\");return;}setCIndex(0);setPhase(\"typing\");return;}const id=setTimeout(()=>setCIndex(i=>Math.max(0,i-1)),Math.max(10,deleteSpeed));return()=>clearTimeout(id);}},[phase,cIndex,active.length,typingSpeed,deleteSpeed,endPause,focused,pIndex,phrases.length,loop]);// Focus/Blur => freeze/resume\nconst handleFocus=()=>setFocused(true);const handleBlur=()=>{setFocused(false);if(phase===\"frozen\")setPhase(\"deleting\")// resume cycle\n;};React.useEffect(()=>{if(!focused)return;// If focused during typing/deleting/pause, freeze on next frame\nif(phase===\"typing\"||phase===\"deleting\"||phase===\"pause\"){setPhase(\"frozen\");}},[focused])// eslint-disable-line\n;// Accept with Tab while focused: animated fill of input value\nReact.useEffect(()=>{const el=inputRef.current;if(!el)return;const onKeyDown=e=>{if(e.key!==\"Tab\")return;if(document.activeElement!==el)return;// Intercept Tab for accept\ne.preventDefault();if(phase===\"accepting\")return;setPhase(\"accepting\");setShowPillInternal(false);// animate fill\nlet i=0;setValue(\"\")// start empty\n;const id=setInterval(()=>{i++;setValue(active.slice(0,i));if(i>=active.length){clearInterval(id);// Stay frozen while focused\nif(focused){setPhase(\"frozen\");}else{setPhase(\"deleting\");}}},Math.max(10,acceptSpeed));};window.addEventListener(\"keydown\",onKeyDown);return()=>window.removeEventListener(\"keydown\",onKeyDown);},[phase,acceptSpeed,active,focused]);// Pill visibility\nconst[showPillInternal,setShowPillInternal]=React.useState(false);React.useEffect(()=>{// Show pill whenever a phrase finished typing (pause) OR frozen\nif(phase===\"pause\"||phase===\"frozen\"){setShowPillInternal(true);}else if(phase===\"typing\"||phase===\"deleting\"||phase===\"accepting\"){setShowPillInternal(false);}},[phase]);// Caret x position for overlay “placeholder”\nconst caretLeftPx=React.useMemo(()=>{return paddingX+measureTextWidth(placeholder,`${fontSize}px ${fontFamily}`);},[placeholder,paddingX,fontSize,fontFamily]);return /*#__PURE__*/_jsxs(\"div\",{style:{...style,position:\"relative\",display:\"flex\",alignItems:\"center\",width:\"100%\",height:\"100%\"},children:[/*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\",width:\"100%\",height:\"100%\"},children:[/*#__PURE__*/_jsx(\"input\",{ref:inputRef,value:value,onChange:e=>setValue(e.target.value),onFocus:handleFocus,onBlur:handleBlur,placeholder:\"\",\"aria-label\":\"Auto input typing\",style:{width:\"100%\",height:\"100%\",outline:\"none\",border:`1px solid ${focused?focusBorderColor:borderColor}`,background:bgColor||\"white\",color:textColor,borderRadius:radius,padding:`0 ${paddingX}px`,fontSize,fontFamily}}),/*#__PURE__*/_jsx(\"div\",{\"aria-hidden\":true,style:{pointerEvents:\"none\",position:\"absolute\",left:paddingX,top:\"50%\",transform:\"translateY(-50%)\",color:value?\"transparent\":placeholderColor,fontSize,fontFamily,whiteSpace:\"pre\"},children:placeholder}),caretBlink&&!value&&(phase===\"typing\"||phase===\"deleting\")&&/*#__PURE__*/_jsx(\"span\",{\"aria-hidden\":true,style:{position:\"absolute\",top:\"50%\",transform:\"translateY(-50%)\",left:caretLeftPx,width:1.5,height:Math.max(18,fontSize*.9),background:caretColor,animation:\"blink 1s step-start 0s infinite\",pointerEvents:\"none\"}}),showPill&&showPillInternal&&/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",right:10,top:\"50%\",transform:\"translateY(-50%)\",fontSize:Math.max(10,fontSize*.7),lineHeight:1,padding:\"6px 10px\",background:\"#FFE3DF\",color:\"#EA6653\",borderRadius:999,userSelect:\"none\",whiteSpace:\"nowrap\",pointerEvents:\"none\"},children:pillText})]}),/*#__PURE__*/_jsx(\"style\",{children:`\n        @keyframes blink { 50% { opacity: 0 } }\n      `})]});}/* ---------------- utils ---------------- */function measureTextWidth(text,font){if(typeof document===\"undefined\")return 0;const canvas=document.createElement(\"canvas\");const ctx=canvas.getContext(\"2d\");if(!ctx)return 0;ctx.font=font;return ctx.measureText(text).width;}const DEFAULT_PHRASES=[\"Plan a 4-day Tokyo itinerary\",\"Draft a launch tweet for my SaaS\",\"Summarize this research paper\",\"Convert JSON to CSV\"];AutoInputTyping.defaultProps={phrases:DEFAULT_PHRASES,typingSpeed:45,deleteSpeed:20,startDelay:400,endPause:3e3,loop:true,showPill:true,pillText:\"Press Tab\",acceptSpeed:18,caretBlink:true,placeholderColor:\"rgba(64,40,40,.4)\",caretColor:\"#422A28\",textColor:\"#422A28\",bgColor:\"#ffffff\",borderColor:\"#FEDAD5\",focusBorderColor:\"#FE7B6A\",radius:12,paddingX:16,fontSize:16,fontFamily:\"Inter, system-ui, -apple-system, Segoe UI, Roboto\"};addPropertyControls(AutoInputTyping,{phrases:{type:ControlType.Array,title:\"Phrases\",control:{type:ControlType.String},defaultValue:DEFAULT_PHRASES},typingSpeed:{type:ControlType.Number,title:\"Typing Speed\",min:10,max:200,step:5,unit:\"ms\",defaultValue:45},deleteSpeed:{type:ControlType.Number,title:\"Delete Speed\",min:5,max:120,step:5,unit:\"ms\",defaultValue:20},startDelay:{type:ControlType.Number,title:\"Start Delay\",min:0,max:5e3,step:50,unit:\"ms\",defaultValue:400},endPause:{type:ControlType.Number,title:\"End Pause\",min:500,max:8e3,step:100,unit:\"ms\",defaultValue:3e3},loop:{type:ControlType.Boolean,title:\"Loop\",defaultValue:true},showPill:{type:ControlType.Boolean,title:\"Show Pill\",defaultValue:true},pillText:{type:ControlType.String,title:\"Pill Text\",defaultValue:\"Press Tab\",hidden:p=>!p.showPill},acceptSpeed:{type:ControlType.Number,title:\"Accept Speed\",min:5,max:120,step:5,unit:\"ms\",defaultValue:18},caretBlink:{type:ControlType.Boolean,title:\"Caret Blink\",defaultValue:true},placeholderColor:{type:ControlType.Color,title:\"Placeholder\",defaultValue:\"rgba(100,116,139,.9)\"},caretColor:{type:ControlType.Color,title:\"Caret\",defaultValue:\"#7C3AED\"},textColor:{type:ControlType.Color,title:\"Text\",defaultValue:\"#0f172a\"},bgColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#ffffff\"},borderColor:{type:ControlType.Color,title:\"Border\",defaultValue:\"rgba(0,0,0,.12)\"},focusBorderColor:{type:ControlType.Color,title:\"Focus Border\",defaultValue:\"#7C3AED\"},radius:{type:ControlType.Number,title:\"Radius\",min:0,max:28,step:1,defaultValue:12},paddingX:{type:ControlType.Number,title:\"Padding X\",min:8,max:32,step:1,defaultValue:16},fontSize:{type:ControlType.Number,title:\"Font Size\",min:12,max:28,step:1,defaultValue:16},fontFamily:{type:ControlType.String,title:\"Font Family\",defaultValue:\"Inter, system-ui, -apple-system, Segoe UI, Roboto\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"AutoInputTyping\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"fixed\",\"framerIntrinsicHeight\":\"64\",\"framerDisableUnlink\":\"* @framerIntrinsicWidth 560\",\"framerSupportedLayoutWidth\":\"any\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./AutoInputTyping.map"],"mappings":"yUAMG,SAAwB,EAAgB,EAAM,CAAC,GAAK,CAAC,QAAM,QAAQ,EAAY,cAAY,cAAY,aAAW,WAAS,OAAK,WAAS,WAAS,cAAY,aAAW,mBAAiB,aAAW,YAAU,UAAQ,cAAY,mBAAiB,SAAO,WAAS,WAAS,cAAY,EAAY,GAAS,MAAM,QAAQ,EAAY,EAAE,EAAY,OAAO,EAAE,EAAY,GAAiB,OAAO,QAAQ,CAAO,EAASA,EAAa,KAAK,CAC3a,CAAC,EAAM,GAAUC,EAAe,GAAG,CAAM,CAAC,EAAQ,GAAYA,EAAe,GAAM,CAAM,CAAC,EAAM,GAAUA,EAAe,OAAO,CAAM,CAAC,EAAO,GAAWA,EAAe,EAAE,CACzK,CAAC,EAAO,GAAWA,EAAe,EAAE,CACnC,EAAO,EAAQ,IAAS,GAAS,EAAY,EAAO,MAAM,EAAE,EAAO,CAC1E,MAAoB,CAAC,IAAM,EAAG,eAAe,EAAS,SAAS,CAAC,KAAK,IAAI,EAAE,EAAW,CAAC,CAAC,UAAU,aAAa,EAAG,EAAG,CAAC,EAAW,EAAQ,OAAO,CAAC,CACjJ,MAAoB,CAAI,SAAQ,UAAU,IAAQ,aAAa,IAAQ,QACvE,IAAG,IAAQ,SAAS,CAAC,GAAG,GAAQ,EAAO,OAAO,CAAC,EAAS,QAAQ,CAAC,OAAQ,IAAM,EAAG,eAAe,EAAU,GAAG,EAAE,EAAE,CAAC,KAAK,IAAI,GAAG,EAAY,CAAC,CAAC,UAAU,aAAa,EAAG,CACvK,GAAG,IAAQ,QAAQ,CAAC,IAAM,EAAG,eAAe,CAAa,EAAT,EAAkB,SAClD,WAAW,EAAI,KAAK,IAAI,IAAI,EAAS,CAAC,CAAC,UAAU,aAAa,EAAG,CACjF,GAAG,IAAQ,WAAW,CAAC,GAAG,GAAQ,EAAE,CACpC,IAAM,EAAK,EAAO,EAAE,GAAG,EAAK,EAAQ,OAAQ,EAAU,EAAK,SAAU,EAAM,EAAU,EAAE,KAAM,CAC7F,EAAS,OAAO,CAAC,OAAQ,EAAU,EAAE,CAAC,EAAS,SAAS,CAAC,OAAQ,IAAM,EAAG,eAAe,EAAU,GAAG,KAAK,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,KAAK,IAAI,GAAG,EAAY,CAAC,CAAC,UAAU,aAAa,EAAG,IAAI,CAAC,EAAM,EAAO,EAAO,OAAO,EAAY,EAAY,EAAS,EAAQ,EAAO,EAAQ,OAAO,EAAK,CAAC,CAChR,IAAM,MAAgB,EAAW,GAAK,CAAO,MAAe,CAAC,EAAW,GAAM,CAAI,IAAQ,UAAS,EAAS,WAAW,EACpH,MAAoB,CAAK,IACzB,IAAQ,UAAU,IAAQ,YAAY,IAAQ,UAAS,EAAS,SAAS,EAAI,CAAC,EAAQ,CAAC,CAE1F,MAAoB,CAAC,IAAM,EAAG,EAAS,QAAQ,GAAG,CAAC,EAAG,OAAO,IAAM,EAAU,GAAG,CAC7D,GADiE,EAAE,MAAM,OAAgB,SAAS,gBAAgB,IACrI,EAAE,gBAAgB,CAAI,IAAQ,aAAY,OAAO,EAAS,YAAY,CAAC,EAAoB,GAAM,CACjG,IAAI,EAAE,EAAE,EAAS,GAAG,CACnB,IAAM,EAAG,gBAAgB,CAAC,IAAI,EAAS,EAAO,MAAM,EAAE,EAAE,CAAC,CAAI,GAAG,EAAO,SAAQ,cAAc,EAAG,CACrF,EAAT,EAAkB,SAAyB,WAAW,GAAK,KAAK,IAAI,GAAG,EAAY,CAAC,EAAgD,OAA7C,EAAO,iBAAiB,UAAU,EAAU,KAAW,EAAO,oBAAoB,UAAU,EAAU,EAAG,CAAC,EAAM,EAAY,EAAO,EAAQ,CAAC,CACtO,GAAK,CAAC,EAAiB,GAAqBA,EAAe,GAAM,CAAC,MAAoB,CACnF,IAAQ,SAAS,IAAQ,SAAU,EAAoB,GAAK,EAAU,IAAQ,UAAU,IAAQ,YAAY,IAAQ,cAAa,EAAoB,GAAM,EAAI,CAAC,EAAM,CAAC,CAC1K,IAAM,EAAYC,MAA0B,EAAS,EAAiB,EAAY,GAAG,EAAS,KAAK,IAAa,CAAG,CAAC,EAAY,EAAS,EAAS,EAAW,CAAC,CAAC,OAAoB,EAAM,MAAM,CAAC,MAAM,CAAC,GAAG,EAAM,SAAS,WAAW,QAAQ,OAAO,WAAW,SAAS,MAAM,OAAO,OAAO,OAAO,CAAC,SAAS,CAAc,EAAM,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,MAAM,OAAO,OAAO,OAAO,CAAC,SAAS,CAAc,EAAK,QAAQ,CAAC,IAAI,EAAe,QAAM,SAAS,GAAG,EAAS,EAAE,OAAO,MAAM,CAAC,QAAQ,EAAY,OAAO,EAAW,YAAY,GAAG,aAAa,oBAAoB,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,QAAQ,OAAO,OAAO,aAAa,EAAQ,EAAiB,IAAc,WAAW,GAAS,QAAQ,MAAM,EAAU,aAAa,EAAO,QAAQ,KAAK,EAAS,IAAI,WAAS,aAAW,CAAC,CAAC,CAAc,EAAK,MAAM,CAAC,cAAc,GAAK,MAAM,CAAC,cAAc,OAAO,SAAS,WAAW,KAAK,EAAS,IAAI,MAAM,UAAU,mBAAmB,MAAM,EAAM,cAAc,EAAiB,WAAS,aAAW,WAAW,MAAM,CAAC,SAAS,EAAY,CAAC,CAAC,GAAY,CAAC,IAAQ,IAAQ,UAAU,IAAQ,aAA0B,EAAK,OAAO,CAAC,cAAc,GAAK,MAAM,CAAC,SAAS,WAAW,IAAI,MAAM,UAAU,mBAAmB,KAAK,EAAY,MAAM,IAAI,OAAO,KAAK,IAAI,GAAG,EAAS,GAAG,CAAC,WAAW,EAAW,UAAU,kCAAkC,cAAc,OAAO,CAAC,CAAC,CAAC,GAAU,GAA+B,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,MAAM,GAAG,IAAI,MAAM,UAAU,mBAAmB,SAAS,KAAK,IAAI,GAAG,EAAS,GAAG,CAAC,WAAW,EAAE,QAAQ,WAAW,WAAW,UAAU,MAAM,UAAU,aAAa,IAAI,WAAW,OAAO,WAAW,SAAS,cAAc,OAAO,CAAC,SAAS,EAAS,CAAC,CAAC,CAAC,CAAC,CAAc,EAAK,QAAQ,CAAC,SAAS;;QAEprD,CAAC,CAAC,CAAC,CAAC,CAA+C,SAAS,EAAiB,EAAK,EAAK,CAAC,GAAG,OAAO,SAAW,IAAY,MAAO,GAAgD,IAAM,EAAvC,SAAS,cAAc,SAAS,CAAkB,WAAW,KAAK,CAAgC,OAA3B,GAAa,EAAI,KAAK,EAAY,EAAI,YAAY,EAAK,CAAC,OAA7C,yBA/BhL,IAA4B,IAAoD,CA+B0J,EAAgB,CAAC,+BAA+B,mCAAmC,gCAAgC,sBAAsB,CAAC,EAAgB,aAAa,CAAC,QAAQ,EAAgB,YAAY,GAAG,YAAY,GAAG,WAAW,IAAI,SAAS,IAAI,KAAK,GAAK,SAAS,GAAK,SAAS,YAAY,YAAY,GAAG,WAAW,GAAK,iBAAiB,oBAAoB,WAAW,UAAU,UAAU,UAAU,QAAQ,UAAU,YAAY,UAAU,iBAAiB,UAAU,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,oDAAoD,CAAC,EAAoB,EAAgB,CAAC,QAAQ,CAAC,KAAK,EAAY,MAAM,MAAM,UAAU,QAAQ,CAAC,KAAK,EAAY,OAAO,CAAC,aAAa,EAAgB,CAAC,YAAY,CAAC,KAAK,EAAY,OAAO,MAAM,eAAe,IAAI,GAAG,IAAI,IAAI,KAAK,EAAE,KAAK,KAAK,aAAa,GAAG,CAAC,YAAY,CAAC,KAAK,EAAY,OAAO,MAAM,eAAe,IAAI,EAAE,IAAI,IAAI,KAAK,EAAE,KAAK,KAAK,aAAa,GAAG,CAAC,WAAW,CAAC,KAAK,EAAY,OAAO,MAAM,cAAc,IAAI,EAAE,IAAI,IAAI,KAAK,GAAG,KAAK,KAAK,aAAa,IAAI,CAAC,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,YAAY,IAAI,IAAI,IAAI,IAAI,KAAK,IAAI,KAAK,KAAK,aAAa,IAAI,CAAC,KAAK,CAAC,KAAK,EAAY,QAAQ,MAAM,OAAO,aAAa,GAAK,CAAC,SAAS,CAAC,KAAK,EAAY,QAAQ,MAAM,YAAY,aAAa,GAAK,CAAC,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,YAAY,aAAa,YAAY,OAAO,GAAG,CAACC,EAAE,SAAS,CAAC,YAAY,CAAC,KAAK,EAAY,OAAO,MAAM,eAAe,IAAI,EAAE,IAAI,IAAI,KAAK,EAAE,KAAK,KAAK,aAAa,GAAG,CAAC,WAAW,CAAC,KAAK,EAAY,QAAQ,MAAM,cAAc,aAAa,GAAK,CAAC,iBAAiB,CAAC,KAAK,EAAY,MAAM,MAAM,cAAc,aAAa,uBAAuB,CAAC,WAAW,CAAC,KAAK,EAAY,MAAM,MAAM,QAAQ,aAAa,UAAU,CAAC,UAAU,CAAC,KAAK,EAAY,MAAM,MAAM,OAAO,aAAa,UAAU,CAAC,QAAQ,CAAC,KAAK,EAAY,MAAM,MAAM,aAAa,aAAa,UAAU,CAAC,YAAY,CAAC,KAAK,EAAY,MAAM,MAAM,SAAS,aAAa,kBAAkB,CAAC,iBAAiB,CAAC,KAAK,EAAY,MAAM,MAAM,eAAe,aAAa,UAAU,CAAC,OAAO,CAAC,KAAK,EAAY,OAAO,MAAM,SAAS,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,aAAa,GAAG,CAAC,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,YAAY,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,aAAa,GAAG,CAAC,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,YAAY,IAAI,GAAG,IAAI,GAAG,KAAK,EAAE,aAAa,GAAG,CAAC,WAAW,CAAC,KAAK,EAAY,OAAO,MAAM,cAAc,aAAa,oDAAoD,CAAC,CAAC"}