{"version":3,"file":"Examples.C-RUuqFp.mjs","names":["useStore","useState","useState","useRef","useMemo","useCallback"],"sources":["https:/framerusercontent.com/modules/vj7bFUjvEQFgEzNBkdoG/vf3CKm378wlVcBk7IhSU/createStore.js","https:/framer.com/m/framer/store.js@^1.0.0","https:/framerusercontent.com/modules/28rXvpPsrum7FH6cMELS/1jCAazZw1EGHjrG5Nu5D/Utils.js","https:/framer.com/m/framer/utils.js@^0.9.0","https:/framerusercontent.com/modules/NZPszflga77ivYmSgpZK/bmWou787byAQCrkyE9el/Examples.js"],"sourcesContent":["import{useState,useEffect}from\"react\";import{Data,useObserveData}from\"framer\";export function createStore(state1){// Use Data so that a Preview reload resets the state\nconst dataStore=Data({state:Object.freeze({...state1})});// Create a set function that updates the state\nconst setDataStore=newState=>{// If the state is an object, make sure we copy it\nif(typeof newState===\"function\"){newState=newState(dataStore.state);}dataStore.state=Object.freeze({...dataStore.state,...newState});};// Store the initial state, copy the object if it's an object\nlet storeState=typeof state1===\"object\"?Object.freeze({...state1}):state1;// Keep a list of all the listeners, in the form of React hook setters\nconst storeSetters=new Set();// Create a set function that updates all the listeners / setters\nconst setStoreState=newState=>{// If the state is an object, make sure we copy it\nif(typeof newState===\"function\"){newState=newState(storeState);}storeState=typeof newState===\"object\"?Object.freeze({...storeState,...newState}):newState;// Update all the listeners / setters with the new value\nstoreSetters.forEach(setter=>setter(storeState));};// Create the actual hook based on everything above\nfunction useStore(){// Create the hook we are going to use as a listener\nconst[state,setState]=useState(storeState);// If we unmount the component using this hook, we need to remove the listener\n// @ts-ignore\nuseEffect(()=>{// But right now, we need to add the listener\nstoreSetters.add(setState);return()=>storeSetters.delete(setState);},[]);// If Data context exists, use Data, otherwise use vanilla React state\nif(useObserveData()===true){useObserveData();return[dataStore.state,setDataStore];}else{// Return the state and a function to update the central store\nreturn[state,setStoreState];}}return useStore;}\nexport const __FramerMetadata__ = {\"exports\":{\"createStore\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./createStore.map","/*\n * createStore (framer/store@1.0.1)\n *\n * Learn More: https://www.framer.com/asset-urls\n */\n\nexport * from \"https://framerusercontent.com/modules/vj7bFUjvEQFgEzNBkdoG/vf3CKm378wlVcBk7IhSU/createStore.js\"\n","export const centerContent = {\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\"\n};\nexport const autoSizingText = {\n    width: \"max-content\",\n    wordBreak: \"break-word\",\n    overflowWrap: \"break-word\",\n    overflow: \"hidden\",\n    whiteSpace: \"pre-wrap\",\n    flexShrink: 0\n};\nexport const defaultContainerStyles = {\n    ...centerContent,\n    overflow: \"hidden\"\n};\nexport const containerStyles = defaultContainerStyles;\nexport const randomColor = ()=>\"#\" + Math.floor(Math.random() * 16777215).toString(16)\n;\n\nexport const __FramerMetadata__ = {\"exports\":{\"centerContent\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"containerStyles\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"autoSizingText\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"defaultContainerStyles\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"randomColor\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}}}}\n//# sourceMappingURL=./Utils.map","/*\n * Utils (framer/utils@0.9.0)\n *\n * Learn More: https://www.framer.com/asset-urls\n */\n\nexport * from \"https://framerusercontent.com/modules/28rXvpPsrum7FH6cMELS/1jCAazZw1EGHjrG5Nu5D/Utils.js\"\n","import{jsx as _jsx}from\"react/jsx-runtime\";import{useCallback,useEffect,useMemo,useRef,useState}from\"react\";import{createStore}from\"https://framer.com/m/framer/store.js@^1.0.0\";import{randomColor}from\"https://framer.com/m/framer/utils.js@^0.9.0\";// Learn more: https://www.framer.com/docs/guides/overrides/\nconst useStore=createStore({background:\"#0099FF\"});export function withRotate(Component){return props=>{return /*#__PURE__*/_jsx(Component,{...props,animate:{rotate:90},transition:{duration:2}});};}export function withHover(Component){return props=>{return /*#__PURE__*/_jsx(Component,{...props,whileHover:{scale:1.05}});};}export function withRandomColor(Component){return props=>{const[store,setStore]=useStore();return /*#__PURE__*/_jsx(Component,{...props,animate:{background:store.background},onClick:()=>{setStore({background:randomColor()});}});};}export function withCounter(Component){return props=>{const[count,setCount]=useState(0);useEffect(()=>{const interval=setInterval(()=>{setCount(seconds=>seconds+Math.floor(Math.random()*1e3));},100);return()=>clearInterval(interval);},[]);return /*#__PURE__*/_jsx(Component,{...props,text:count.toLocaleString()});};}export function withCounterSlow(Component){return props=>{const[count,setCount]=useState(0);useEffect(()=>{const interval=setInterval(()=>{setCount(seconds=>seconds+Math.floor(Math.random()*100));},100);return()=>clearInterval(interval);},[]);return /*#__PURE__*/_jsx(Component,{...props,text:count.toLocaleString()});};}export function withCounterVerySlow(Component){return props=>{const[count,setCount]=useState(0);useEffect(()=>{const interval=setInterval(()=>{setCount(seconds=>seconds+Math.floor(Math.random()*10));},100);return()=>clearInterval(interval);},[]);return /*#__PURE__*/_jsx(Component,{...props,text:count.toLocaleString()});};}export function withAniamtedEncryption(Component){return props=>{const ref=useRef();const{output,start,stop}=useAnimatedString(props.text);const isVisible=useOnScreen(ref);useEffect(()=>{if(isVisible){start();}else{stop();}},[isVisible]);return /*#__PURE__*/_jsx(Component,{ref:ref,...props,text:output});};}function useOnScreen(ref){const[isIntersecting,setIntersecting]=useState(false);const observer=useMemo(()=>{if(typeof window!==\"undefined\"){return new IntersectionObserver(([entry])=>setIntersecting(entry.isIntersecting));}},[ref]);useEffect(()=>{observer.observe(ref.current);return()=>observer.disconnect();},[]);return isIntersecting;}const useAnimatedString=input=>{const[output,setOutput]=useState(input);const timerIdRef=useRef();const animatingRef=useRef(false);const getRandomChar=()=>{const chars=\"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789\";return chars.charAt(Math.floor(Math.random()*chars.length));};const start=useCallback(()=>{const delay=100// 0.1 seconds\n;const targetString=\"*\".repeat(input.length);const animate=(str,index)=>{if(index<0){setOutput(targetString);return;}for(let i=0;i<3;i++){timerIdRef.current=setTimeout(()=>{const animatedStr=str.substring(0,index)+getRandomChar()+str.substring(index+1);setOutput(animatedStr);},i*delay);}timerIdRef.current=setTimeout(()=>{const animatedStr=str.substring(0,index)+\"*\"+str.substring(index+1);animate(animatedStr,index-1);},3*delay);};animatingRef.current=true;animate(input,input.length-1);},[input]);const stop=useCallback(()=>{if(timerIdRef.current){clearTimeout(timerIdRef.current);animatingRef.current=false;}},[]);useEffect(()=>{return()=>{if(timerIdRef.current){clearTimeout(timerIdRef.current);}};},[]);return{output,start,stop};};\nexport const __FramerMetadata__ = {\"exports\":{\"withHover\":{\"type\":\"reactHoc\",\"name\":\"withHover\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withRotate\":{\"type\":\"reactHoc\",\"name\":\"withRotate\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withCounter\":{\"type\":\"reactHoc\",\"name\":\"withCounter\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withAniamtedEncryption\":{\"type\":\"reactHoc\",\"name\":\"withAniamtedEncryption\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withCounterVerySlow\":{\"type\":\"reactHoc\",\"name\":\"withCounterVerySlow\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withRandomColor\":{\"type\":\"reactHoc\",\"name\":\"withRandomColor\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withCounterSlow\":{\"type\":\"reactHoc\",\"name\":\"withCounterSlow\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Examples.map"],"mappings":"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"}